Style.css in Child Theme doesn’t show changes

  • Hello there!

    I use a child theme for my website theme Kami. I recently wanted to change all the turquoise on my website into another color so I changed each color mention to another one in the Style.css file within the Child Theme using FTP, but changes are not visible…

    It’s not the browser or the cache. What can I do?

    Thanks in advance,

    Laura

    • This topic was modified 4 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 18 total)

  • There are a few possible reasons that you have identified.

    • Make sure you are doing changes in the right file. To verify that check the file doing the view source from the frontend.
    • If you have Cloudflare plugin, then make sure to enable the development mode into the plugin.
    • Sometimes the browser keeps the file into the cache. Try with the following. For Chrome, Open console, click to the Network Tab and navigate the Disable Cache checkbox in the very first line.

    I hope this will help you.

    Hi

    Try to clear CDN cache / Server Cache
    also if you are using any plugin which serving cache try to clear that as well

    Thanks
    Praveen Valmiki

    Thread Starter Whatabouther

    (@whatabouther)

    How do I know if I use a plugin with serving cache and how do I clear that?
    I have cleared the cache within the browser already, how do I clear other caches?

    How do I check if it’s the right file? It should be the style.css file from the Child Theme as that one is activated right? The style.css file in the main theme is empty. Can I add the same lines that are in the Child Theme style.css to check if this works?

    Thanks!

    I mentioned verifying the right file through the view source option in the browser.

    Something like domain.com/wp-content/themes/child-theme/style.css

    Check in the plugins list for the Cache plugin. Most of the Caching plugin provides the setting to delete or empty cache. You have to navigate it through the settings.

    Hi,

    first of all, there is inline css that contains invalid css code, rendering the css rules following that code useless, see image:

    https://vanweerd.com/screenshots/s20200110134013.jpg

    That highlighted code should go into the functions.php file.

    Then, this is the child theme stylesheet: https://www.whatabouther.nl/wp-content/themes/kami-child/style.css

    When opening that file in your browser, does it show the edits you made?

    you are not using child theme I believe you still using the parent theme, check the below screenshot.

    https://prnt.sc/qlt29p

    make the changes in the parent CSS file.

    Thread Starter Whatabouther

    (@whatabouther)

    Ahhh thanks for finding that out!

    When I open the kami theme folder (the main one) and open style.css I only see this:

    /*
    Theme Name: Kami
    Theme URI: https://bk-ninja.com
    Description: Kami is a clean magazine & blog WordPress theme.
    License: GNU General Public License version 3.0
    License URI: https://www.gnu.org/licenses/gpl-3.0.html
    Author: BK-Ninja
    Author URI: https://bk-ninja.com
    Text Domain: bkninja
    Tags: right-sidebar, sticky-post, light, two-columns, three-columns, responsive-layout, custom-menu, featured-images, post-formats, translation-ready
    Version: 1.4.0
    */

    Nothing more!

    Can I just copy paste the other style.css in here?

    Thread Starter Whatabouther

    (@whatabouther)

    @ronaldvw

    It does show the edits I’ve made in that file!

    About the screenshot: do you mean I need to remove that line from style.css and put it in functions.php?

    Hi,

    the child theme css is being loaded, see line 15: https://vanweerd.com/screenshots/s20200110135934.jpg

    this is the child theme stylesheet: https://www.whatabouther.nl/wp-content/themes/kami-child/style.css

    When opening that file in your browser, does it show the edits you made?

    Can you give an example of a specific modification?

    When adding your custom CSS via the WordPress customizer > Custom CSS, does that work?

    And, it is not recommended to edit the parent theme css.

    Thread Starter Whatabouther

    (@whatabouther)

    @jogesh_pi

    I’ve installed a cache plugin and I can empty my caches: it that safe to do?

    I need to remove that line from style.css and put it in functions.php?

    that line does not exist in style.css. It is inline css, meaning, it is not stored in an external css file, but it is stored in the html source of the site. But either way, that code I highlighted should not exist in a stylesheet as it invalidate the css.

    So for now, I would locate it, and remove it. It’s not essential (at the moment). Also remove the additional } just below the hightlighted code, that is also redundant.

    • This reply was modified 4 years, 10 months ago by ronaldvw.
    Thread Starter Whatabouther

    (@whatabouther)

    @ronaldvw

    If you check https://www.whatabouther.nl: I want to change ALL elements that are turquoise now to a new darker green.

    So what I did was searching for the old color code in style.css and replaced ALL hits with the new color code. That should work right?

    That is the only thing I wanted to change for now.

    I have no clue what separate codes they are as it has been a while and someone did it for me back then!

    Thread Starter Whatabouther

    (@whatabouther)

    @ronaldvw How can I find and delete the line when it’s not in a file? Sorry if this is a stupid question, haha. Oh well, stupid questions don’t exist. :))

    Answer:
    When adding your custom CSS via the WordPress customizer > Custom CSS, does that work?

    I tried putting the whole style.css into there but it doesn’t work!

    Hi,

    How can I find and delete the line when it’s not in a file?

    It may have been added using a plugin to add custom css.

    your site doesn’t show any custom css added via the Customizer. Are you sure that you are working on the right site, the right files?

    Can you go to the Customizer and add a screenshot of your custom css (Extra css)?

    And I now see:

    I’ve installed a cache plugin and I can empty my caches: it that safe to do?

    Yes, delete all cache files, and deactivate any caching plugin.

    Thread Starter Whatabouther

    (@whatabouther)

    I deleted the customer lines again because it didn’t work but then I found another way of putting custom CSS in and that one was in the old colors, change it, and it WORKED!

    However: a part of my top menu bar is black now and I don’t know why haha, it was all turquoise and now only the text part is green: do you have any idea how I can change this?

    This is the custom CSS code that was there:

    body {
    font-family: ‘Open Sans’, ‘sans-serif’, ‘Poiret+One’ !important;
    line-height: 1.5;
    color: #212121;
    height: 100%;
    font-size: 16px;
    font-weight: 300;
    }
    .logo h1 a img {margin-top: 20px;margin-left: auto;margin-right: auto;}
    .bk-sub-menu > li.menu-item-has-children > a:after {
    content: ‘\f0d7’;
    position: absolute;
    right: 5px;
    font-family: “FontAwesome”;
    font-size: 12px;
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    color:#445848;
    }
    .bk-sub-menu > li.menu-item-has-children:hover > a:after {
    transform: rotatez(-90deg);
    -webkit-transform: rotatez(-90deg);
    color: #445848;

    }
    function custom_excerpt_length( $length ) {
    return 0;
    }
    add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );
    }
    .home .post-cat {display:none;}
    .home .fa-comments-o,
    .home .meta-comment a {color:#445848;}
    .home .title a {text-decoration:none; font-weight: 200; border-bottom: 0px solid #fff;}
    .bk-sub-post .post-date {display:none;}
    .home .three-cols .excerpt {font-size: 13px;}

    .top-bar {
    background-color: #4458482;
    height: 35px;
    }
    #top-menu{
    padding: 0;
    list-style: none;
    margin: 0;
    display: inline-block;
    background-color: #445848;
    position: relative;
    float:left;
    }
    .header-inner {
    margin: 20px auto;
    position: relative;
    display: table;
    width: 100%;
    }
    .main-nav {
    background-color: #fff;
    position: relative;
    list-style-type:none;
    z-index: 900;
    min-height: 4px;
    color: #000;
    }
    .main-nav ul li {
    color: #000;
    }
    .main-nav a {
    display: inline-block;
    text-decoration:none;
    color: #000;
    }
    .main-nav .menu > li > a {
    position: relative;
    font-size: 15px;
    padding: 0 10px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 0;
    color: #000;
    letter-spacing: 1px;
    border-left: 0px solid #445848;
    padding-left: -3px;
    }
    .main-nav .menu ul li, .bk-sub-menu ul li {
    border-left: 2px solid #445848;
    margin-left: -9px;
    }
    .main-nav .menu > li:hover > a {
    background-color: #Fff;
    color:#445848 ;
    }
    #main-menu a {color: #000;}
    .module-windows .excerpt {display:none;}
    #main-menu > ul > li.current-post-ancestor.menu-item > a {background: #fff;}
    .header-below {background-color: #fff;}
    #main-search input {
    border: none;
    font-size: 16px;
    padding-left: 50px;
    padding-right: 350px;
    background: #fff;
    }
    .co-type1 {
    padding: 15px;padding-bottom: -15px;
    border-bottom: 0px solid #ddd;
    border-top: none;
    text-align: center;
    margin-bottom: 0px;
    }
    .co-type1 .excerpt {font-size: 13px;}
    .col-md-4,
    .col-md-6 {margin-bottom: -30px;}
    /*** load more button ***/
    .loadmore-wrap {
    margin-top: 0px;
    width: 100%;
    margin-bottom: -20px;
    }
    .loadmore {
    position: relative;
    padding: 6px 0;
    width: 50%;
    text-align: center;
    border: 0px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    color: #212121;
    font-weight: 700;
    z-index: 0;
    letter-spacing: 1px;
    }
    .loadmore .load-more-text {
    font-weight: 400;
    }
    .loadmore.next {
    float: left;
    border-left: 0px solid #ccc !important;
    }
    .loadmore.next:after {
    background: transparent;
    content: ”;
    position: absolute;
    z-index: -1;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    }
    .loadmore.previous:after {
    background: transparent;
    content: ”;
    position: absolute;
    z-index: -1;
    width: 0%;
    height: 100%;
    top: 0;
    right: 0;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    }
    .loadmore:hover:after{
    background-color: #445848;
    width: 100%;
    }
    .loadmore:hover {
    border: 0px solid #445848;
    }
    .loadmore.previous {
    float: left;
    border-right: 0px solid #ccc !important;
    }
    .loadmore.no-more, .loadmore.loading {
    color: #ccc !important;
    border: 0px solid #ccc;
    }
    .loadmore.no-more:hover:after, .loadmore.loading:hover:after {
    background: transparent !important;
    }
    .loadmore.no-more:hover, .loadmore.loading:hover {
    color: #ccc !important;
    background: ##445848 !important;
    border: 0px solid #ccc;
    }
    .loadmore:hover {
    color: #fff;
    }
    .loadmore.previous i {
    margin-right: 5px;
    font-size: 26px;
    }
    .loadmore.next i {
    margin-left: 5px;
    font-size: 26px;
    }

    .single .recommend-box .entries {font-size: 85%;}
    .single .article-content p, ol.commentlist li {font-size: 14px;}
    .social-share a:hover {background:#445848;}
    .header-social {background-color: #fff;}
    #single-top {display:none;}
    #widget_sp_image-3 img.attachment-220×198 {margin:0 auto;text-align:center; float: center;}
    .footer {
    width: 100%;
    background-color: #e8f8f5;
    clear: both;
    margin-top: 45px;
    padding-top: 30px;
    position: relative;
    color: #000;
    }
    .footer .ticker-wrapper {
    background-color: #333;
    position: relative;
    margin-top: -30px;
    margin-bottom: 30px;
    }
    .footer .footer-content {
    padding-bottom: 30px;
    }
    .footer .footer-lower {
    width: 100%;
    margin: auto;
    padding: 20px;
    background-color: #445848;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    }
    #footer-menu a {
    color: #fff;
    letter-spacing: 1px;
    }
    .widget .widget-title h3 {
    font: 20px ‘Raleway’;
    color: #445848;
    }
    .footer .widget-title h3,
    .footer .widget {
    background: transparent;
    color: #000;
    font: 20px ‘Raleway’;

    }
    .footer .widget a {color: #000;}
    .single .post-tags-title, .single .tag-btn a {font-size: 11px;}
    .single a.tag-btn {background:#fff!important; color: #000; font-size: 11px;}
    .single .label span {background: transparent;}
    .single #text-17 .bk-header .widget-title:before,
    .single .comment-box-wrap .label h3:before {
    position: absolute;
    width: 100%;
    content: ‘ ‘;
    height: 2px;
    left: 0;
    background-color: #fff;
    bottom: 5px;
    box-sizing: border-box;
    top:50%;
    transform: translatey(-50%);
    }
    .single .share-box-wrap {min-height: 50px;margin-top: -17px;}

    .share-box-wrap .social-share li a {height: 25px;position: relative; top: -35px;}
    .single .post-nav-link {max-height: 100px;}
    .single .post-nav-link .thumb {visibility: hidden;}
    .single .post-nav-link-title, .single .post-nav-link-title .inner h3 {display:block;color: #000!important;}
    .single .post-nav-link-next:before {
    float:right;
    content: ‘\f105’;
    font-family: FontAwesome;
    font-size: 60px;
    }
    .single .post-nav-link-prev:before {
    float: left;
    content: ‘\f104’;
    font-family: FontAwesome;
    font-size: 60px;
    }
    .single .related-box-wrap, .single .share-box-wrap, .single .post-nav {
    margin-top: 0px!important;
    }
    /* For displaying 3 columns on tablet */
    @media only screen and (max-width: 800px) {
    #gallery-4 .gallery-item {
    width: 33%;
    }
    }

    /* For displaying single column on mobile */
    @media only screen and (max-width: 480px) {
    #gallery-4 .gallery-item {
    width: 100% !important;
    }
    }

    #gallery-4 .gallery-item:nth-child(5n+1) {
    clear: none;
    }
    #gallery-4 .gallery-item {
    float: none;
    width: auto;
    }
    @media only screen and (max-width: 320px) {
    .page-id-13894 #gallery-4 .gallery-item img {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    } }
    .single .hentry {text-align: justify;}
    .single .main-title {color:#445848;font: 38px ‘Raleway’;line-height: 60px;text-transform: uppercase; font-weight:200;}
    .single h2, .single h3, .single h4 {color:#445848;font: 28px ‘Raleway’;line-height: 60px;text-transform: uppercase; font-weight:200;}
    .home .module-mainslider .carousel-ctrl ul li {visibility: hidden;}
    .home .module-mainslider {margin-bottom: -70px;}
    .home .col-md-4 {margin-bottom: -30px!important;}
    .page .gallery-caption {font: 18px ‘Raleway’;}
    .thumb > a {
    display: block;
    }
    .single .comments-area-title {color:#445848;font: 28px ‘Raleway’;line-height: 60px;text-transform: uppercase; font-weight:200;}
    .single .list .widget-post-wrap .article-content-wrap .title {font-size: 13px; font-style:normal;}

    .single .footer .widget_text .bk-header .widget-title,
    .single .footer .widget_youtube-channel .bk-header .widget-title {width:365px;margin: 0 auto;margin-bottom: 15px; }
    .single .footer .widget_text .textwidget p {clear: left;}
    .footer .widget_text .textwidget {
    color: #000;
    }

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Style.css in Child Theme doesn’t show changes’ is closed to new replies.

Tags