CSS Style Sheet

  • Unknown's avatar
    carolynsei · Member ·

    I can’t access the add-on CSS option and am unable to see my theme’s CSS style sheet to edit it.

  • Unknown's avatar
    helper-heroponriki · Member ·

    Hi there!

    You can access the CSS stylesheet editor one of two ways:

    1. Appearance -> Custom Design -> CSS from your site’s dashboard, or;

    2. Appearance -> Customize and select CSS from the right side menu.

    Here’s more information on the CSS portion of the Custom Design upgrade:
    http://en.support.wordpress.com/custom-design/custom-css/

    I hope that helps! Let me know if you have any questions.

  • Unknown's avatar
    carolynsei · Member ·

    Hi csonnek,

    I can get to that point but having upgraded to customize my theme I’m assuming I should be able to access the actual coding so I can, for example, change the header image to be centered as opposed to the sitting to the left, etc. I’m not able to see the line by line CSS coding, all I see is this message:

    /*
    Welcome to Custom CSS!

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.

    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don’t need to copy all
    your theme’s stylesheet content.

    If you need any further help, ask in the CSS Customization forum.
    */

  • Unknown's avatar
    helper-heroponriki · Member ·

    With the CSS stylesheet editor, you won’t have access to the theme’s entire CSS file as WordPress.com is a shared hosting platform and if you changed the theme’s base CSS file, you would change it for everyone using that theme on WordPress.com worldwide. Not the best idea. :)

    What you should do is use browser-based tools to help you find and identify (and even test) changes to any CSS on your page. Here are a few options:

    1. Chrome Inspector: https://developers.google.com/chrome-developer-tools/

    2. Firefox Firebug plugin: http://getfirebug.com/

    3. Internet Explorer Developer Toolbar: http://www.microsoft.com/en-us/download/details.aspx?id=18359

    Then, when you determine the CSS code you need to change, you only put that code in the Stylesheet Editor and it will override the base theme stylesheet.

    At this page, there are some great tips and links to get you started:
    http://en.support.wordpress.com/custom-design/editing-css/#css-help

    I know that was a lot of information, but it’s a good way to get started with CSS.

    Let me know if you have any questions!

  • Unknown's avatar
    carolynsei · Member ·

    Thanks, that was helpful. Now I’m able to see CSS changes in my preview window but when I go to the live site they’re not reflected there. (For example, trying to remove the image border in the Chunk theme) any thoughts?

  • Unknown's avatar
    helper-heroponriki · Member ·

    You can copy and paste this code into your CSS stylesheet editor to remove the image border and the image link border:

    .entry-content a:hover img, .entry-content img { border: none; }

    You will need to save any changes in the Customizer before they will be reflected in your site. You may also need to clear out your cache and cookies as your browser may be retaining the old stylesheet information. Here’s a page that might help:
    http://en.support.wordpress.com/browser-issues/#clear-your-cache-and-cookies

    I hope that helps!

  • Unknown's avatar
    carolynsei · Member ·

    Thank you it does but for some reason the borders are still showing up on my ‘About’ page images. thehouseofpancakes.com

    I’m also curious how to change the font size of my post entry titles and the comment and date titles. I’ve tried here but I don’t see the changes reflected:

    .entry-title {
    color: #666;
    font-family: ‘Oswald’, Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 38px;
    margin: 5px 0 15px;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    }
    #comments #comments-title {
    background: #555;
    border-radius: 3px;
    color: #eee;
    color: rgba(255,255,255,0.7);
    display: block;
    font-size: 15px;
    font-weight: normal;
    padding: 5px 20px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    }

  • Unknown's avatar
    helper-heroponriki · Member ·

    Yes, you need to use the code exactly as I listed for it to remove the border globally on your site. I checked your current CSS and I didn’t see that code listed.

    To target the size of those elements, use the following codes (note: these can exist independent of any other CSS – just place it at the bottom of your CSS customizations):

    h2.entry-title {
font-size: 30px !important;
}

.wf-active .hentry .entry-meta, .wf-active .hentry .entry-meta a {
font-size: 16px;
}

.wf-active .hentry .entry-meta .comments, .wf-active .hentry .entry-meta .comments a {
font-size: 14px;
}

    I hope that helps get you started! We also have a great CSS Customizations forum where you can get tips, tricks, and expert help with CSS customizations from our great team of volunteers:
    https://en.forums.wordpress.com/forum/css-customization

    Happy Blogging!

  • The topic ‘CSS Style Sheet’ is closed to new replies.