• Resolved sechc

    (@sechc)


    Hello all!

    This is my first post on these support forums. I’ve recently took on the responsibility of managing my organization’s website, and attempting to learn CSS and HTML to make minor adjustments and improvement. We’re a small nonprofit, and don’t have the resources to hire professionals.

    I have two main issues here:

    1. Recently, I’ve noticed that changes made to my child theme of Genesis (called Nancy, for whatever reason) are not reflected when viewing my website. I’ve tried viewing the site from multiple browsers, and tried clearing my cache and browsing history.

    What seems to work is adding changes to the CSS to the “Edit CSS” tab under appearances, rather than making changes to directly to the style.css page under the child theme in the “Editor” tab.

    I’d like to know if this issue is commonplace (aka not an issue), or if users should be able to edit the appearance of their site directly through their style.css page of the child theme. If it is the latter, any help finding a solution would be greatly appreciated.

    2. Secondly, I’d like to make some changes to my site (here), specifically removing the “Text Size +/-” tool. I’d like to keep the “Call us at: #” text.

    I believe I have removed the Text Size +/- from my style.css. I think I also accidentally removed the Call us at # text as well (which I’d like to keep). However, neither of these changes are showing up in my browser (or better or worse). If I have accidentally removed the “Call Us” CSS, I’d like to add it back.

    Here is a copy of the header section of my style.css code for my child theme:

    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title {
    background: url(images/logo.png) no-repeat;
    }

    .header-image #title-area {
    margin: 10px 0 10px 10px;
    }

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 80px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
    }

    .header-image #description {
    display: block;
    overflow: hidden;
    }

    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area {
    float: left;
    width: 50%;
    }

    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    /* Header / Primary / Secondary Navigation
    ———————————————————— */

    #nav {
    margin: 0 auto;
    width: 1200px;
    }

    #nav .wrap {
    border-radius: 8px;
    background: #024e76;
    padding: 0 10px;
    }

    .menu-primary,
    .menu-secondary,
    #header .menu {
    clear: both;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    }

    #header .menu {
    border: 1px solid #ddd;
    box-sizing: border-box;
    }

    .menu-primary {
    border-bottom: 0;
    }

    .menu-secondary {
    border-bottom: 1px solid #ddd;
    border-top: none;
    }

    .menu-primary ul,
    .menu-secondary ul,
    #header .menu ul {
    float: left;
    width: 100%;
    }

    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    float: left;
    list-style-type: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    color: #FFF;
    display: block;
    padding: 7px 19px 6px;
    position: relative;
    text-decoration: none;
    }

    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    background-color: #216589;
    color: #FFF;
    }

    .menu-primary li li a,
    .menu-primary li li a:link,
    .menu-primary li li a:visited,
    .menu-secondary li li a,
    .menu-secondary li li a:link,
    .menu-secondary li li a:visited,
    #header .menu li li a,
    #header .menu li li a:link,
    #header .menu li li a:visited {
    border-top: none;
    color: #FFF;
    font-size: 12px;
    padding: 9px 10px 8px;
    position: relative;
    text-transform: none;
    width: 208px;
    }

    .menu-primary li li a:active,
    .menu-primary li li a:hover,
    .menu-secondary li li a:active,
    .menu-secondary li li a:hover,
    #header .menu li li a:active,
    #header .menu li li a:hover {
    background-color: #196c97;
    color: #FFF;
    }

    .menu-primary li ul,
    .menu-secondary li ul,
    #header .menu li ul {
    height: auto;
    left: -9999px;
    margin: 0 0 0 -1px;
    position: absolute;
    width: 228px;
    z-index: 9999;
    }

    .menu-primary li ul {
    border-radius: 0 0 6px 6px;
    background: #216589;
    padding: 0 0 10px;
    }

    .menu-primary li ul a,
    .menu-secondary li ul a,
    #header .menu li ul a {
    width: 210px;
    }

    .menu-primary li ul ul,
    .menu-secondary li ul ul,
    #header .menu li ul ul {
    margin: -33px 0 0 228px;
    }

    .menu li:hover ul ul,
    .menu li.sfHover ul ul {
    left: -9999px;
    }

    .menu li:hover,
    .menu li.sfHover {
    position: static;
    }

    ul.menu li:hover>ul,
    ul.menu li.sfHover ul,
    #header .menu li:hover>ul,
    #header .menu li.sfHover ul {
    left: auto;
    }

    .menu-primary li a.sf-with-ul,
    .menu-secondary li a.sf-with-ul,
    #header .menu li a.sf-with-ul {
    padding-right: 30px;
    }

    .menu li a .sf-sub-indicator,
    .menu li li a .sf-sub-indicator,
    .menu li li li a .sf-sub-indicator {
    background: url(images/icon-plus-white.png) no-repeat;
    height: 16px;
    position: absolute;
    right: 4px;
    text-indent: -9999px;
    top: 10px;
    width: 16px;
    }

    .menu li a .sf-sub-indicator {
    top: 13px;
    }

    #wpadminbar li:hover ul ul {
    left: 0;

    I’ve also added this header css to the Edit CSS Tab to improve spacing between the logo and main navigation bar:

    /* Header
    ———————————————————— */
    #header {
    margin: 0 auto;
    min-height: 100px;
    overflow: hidden;
    width: 1200px;
    }

    #title-area {
    float: left;
    padding: 17px 0 65px;
    overflow: hidden;
    width: 400px;
    background: url(http://www.ldancywebsitedesign.com/wp-content/uploads/2013/09/SECHCLOGO_2pms-Converted.png) no-repeat top left;
    }

    Let me know of any suggestions you may have, and/or if I can provide additional information! Thanks in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • For issue #1, the Edit CSS is part of JetPack’s Custom CSS option. You can add your CSS either way, through a plugin’s CSS or through your child theme’s style.css file, both should work. If there are rules with identical specificity in each, the rule which comes later will take precedence, so any identical rules added through JetPack will take precedence over those in your child theme’s style.css file.

    It’s hard to tell why changes to your child theme’s style.css file aren’t being expressed. It could have something to do with your Minify plugin caching the CSS. What I would do is deactivate Minify while you are making updates to your site, then reactivate it once everything looks OK. Also, if you deactivate Minify, I can examine the site using a web debugging tool like Chrome Developer Tools and see why the changes aren’t taking; Minify crams all of the CSS together in one big file, so it’s hard to tell which CSS is coming from the parent theme and which is coming from the child theme.

    For issue 2, you can hide the text size tool by adding this CSS rule:

    .font-size {
       display: none;
    }

    But you might want to add some spacing above the phone number so it’s not directly at the top of the page:

    .contact-top {
       margin-top: 10px;
    }

    In the future, it is generally not necessary to paste in large amounts of code, since you’ve provided a link to your site. However, if you do need to provide a large amount of code, best to do it in a pastebin and provide us with a link.

    Thread Starter sechc

    (@sechc)

    CrouchingBruin,

    Thank you for taking the time to respond to my post. I appreciate your tips on how to reference code in the support forums. I’ll be sure not to paste large and cumbersome amounts of code in the future.

    Firstly, deactivating W3 Total Cache (the Minify plugin, if I’m not mistaken) helped immensely! My website seems fully responsive to changes made in both Edit CSS and Editor.

    As far as fixing the alignment and font size of the contact information, and removing the text size tool, I am having difficulty finding where to insert these CSS rules. Now that I’ve deactivated my plug in, would you (or anyone else out there!) mind taking a moment to provide further insight as to where these items belong? Provided, of course, that you have the time.

    Thanks a million,
    sechc

    Hi, sechc. Just copy & paste those rules in JetPack’s Custom CSS option (Appearance > Edit CSS), that should be fine. If you find a rule you want to override from the theme, you can paste it in JetPack’s Custom CSS and use the same selector; since it will come after the theme’s CSS, your rule will override the theme’s rule.

    Thread Starter sechc

    (@sechc)

    Excellent! Thank you, again. Now I’m off to study why these tricks work. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Editing Child Theme CSS Does Not Produce Changes on Website’ is closed to new replies.