Customizing Your Theme

You Do NOT Have to Learn Code!

We promise that, now til the end of time. That’s what we’re here in the forums for. If you want to change the colors of your site, add something new or whatever just start a support topic with your request(s). We’ll write and supply the code (and instructions if needed) for you! You need only ever copy and paste:

Add custom CSS within your theme options under: Appearance > StartupPro Options > Advanced Editing > Custom CSS

Then save and make sure to clear all caches if you don’t see the change and that’s it. However, if you do want learn, we’ve prepared…

CSS (Cascading Stylesheets)

CSS is the code that controls the look and feel of your website, colors, fonts, backgrounds etc. CSS is very human-readable and doesn’t take very long to gain a general understanding of it’s use and application, even for complete beginners.

The first step is to find the selector of the area you would like to style. A selector can be an id, class or HTML tag. Examples:

ID Example: <h2 id="entry-title">Hello World</h2> – In CSS we would style with #entry-title{color:#555}
Class Example: <h2 class="entry-title">Hello World</h2> – In CSS we would style with .entry-title{color:#555}
HTML Tag Example: <h2>Hello World</h2> – In CSS we would style with h2{color:#555}

Most major browsers (Firefox, Chrome, Safari) already come with an Inspect Element feature pre-built in, which allows you to simply highlight or right-click on any area of the page you’re viewing, click Inspect Element and immediately learn more about the CSS and HTML of that area and even trial CSS/HTML changes in real-time before actually implementing them.

Firefox Inspect Element Documentation

https://developer.mozilla.org/en/Tools/Inspector / You may instead wish to use the very popular Firefox add-on Firebug.

Chrome Inspect Element Documentation

https://developers.google.com/chrome-developer-tools/docs/overview

Safari Inspect Element Documentation

http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html

You can also easily reference your default stylesheet from your theme options, see (for reference, view the default stylesheet) under the Custom CSS area. Simply copy and paste over styles and change them as needed.

The Basics

Body Background Color
body{background:#fff}

Body Text Color
body{color:#000}

Link Color
a{color:#09f;text-decoration:none}

Link Hover
a:hover{text-decoration:underline}

See color codes.

Different Styles for Popular Devices

iPad

@media all and (max-width:768px){body{background:#fff}}

iPhone (Landscape)

@media all and (max-width:480px){body{background:#000}}

iPhone (Portrait)

@media all and (max-width:320px){body{background:#666}}

Print

@media print{header, aside, #sidebar, footer{display:none}}

Popular CSS Requests

Often requested examples will appear here…

HTML (Hypertext Markup Language)

HTML is the code that controls the framework and structure of your website. The containers (that are styled by CSS) to separate the different areas of the webpage, header, article, footer for example. In WordPress, HTML can be added directly to pages and posts when editing in HTML mode. You can also add HTML to Text widgets from under Appearance > Widgets in your WP admin.

The Basics

Text Link
<a href="http://someurl.com/">Click Here</a>

Image
<img src="http://someurl.com/images/flowers.png" alt="Flowers" />

Image Link
<a href="http://someurl.com/"><img src="http://someurl.com/images/flowers.png" alt="Flowers" /></a>

You can upload images in the Media area of your WP admin.

Popular HTML Requests

Often requested examples will appear here…