New Topic

Customizing Your Theme

Home › Forum › Documentation › Customizing Your Theme

This topic contains 0 replies, has 1 voice, and was last updated by  StartupWP 1 year, 9 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #101

    StartupWP
    Support

    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…


Viewing 1 post (of 1 total)

The topic ‘Customizing Your Theme’ is closed to new replies.