WordPress.org

Support

Support » Themes and Templates » Spasalon » Child Theme Editor NOT working – Changes only happen under custom css

Child Theme Editor NOT working – Changes only happen under custom css

  • Hi,
    I made a child them for spasalon and neither using my FTP to update the child’s style.css nor the editor within the dashboard show any changes.

    In fact, I can only use the “enter custom css here” under appearances>option panel>general to see any changes on my page – how can I bypass this and use the editor?

    Here is what I’ve tried putting in the editor

    /*
    Theme Name: Spa Salon Child
    Author: Thomas Byers
    Author URI: http://shantisalon.com
    Template: spasalon
    Version: 1.0.0

    */

    @import url(“../spasalon/style.css”);

    .slidesDescription{
    background: none repeat scroll 0 0 #416A55;
    }

    .slidesDescription p{
    border-left: 1px solid #FFFFFF; color: #FFFFFF;
    }

    .navbar-inverse .nav > li > a:hover {
    color: #Fffff; background-color: #EED8A4;
    }

    .navbar-inverse .nav li.current_page_item {
    color: #Fffff; background-color: #EED8A4;
    }

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Are you sure you linked the right website?

    ah, sorry – it is on my home server – not up for public viewing.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I would try something simple like:

    body {
     border: 10px solid red !important;
    }

    In your Child Theme style.css file to double-check whether your styles are working

    They are not – the spa salon child is working though. I referenced the parent style sheet and it works. Just nothing I do in the actual child style.css or editor of the same file in the WP dashboard

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Do you have a caching plugin?

    Back track –

    I just tried the code above again and it worked! Why does nothing else. This is what I have in my editor now.

    /*
    Theme Name: Spa Salon Child
    Author: Thomas Byers
    Author URI: http://shantisalon.com
    Template: spasalon
    Version: 1.0.0

    */

    @import url(“../spasalon/style.css”);

    body {
    border: 10px solid red !important;
    }

    .slidesDescription{
    background: none repeat scroll 0 0 #416A55;
    }

    .slidesDescription p{
    border-left: 1px solid #FFFFFF; color: #FFFFFF;
    }

    .navbar-inverse .nav > li > a:hover {
    color: #Fffff; background-color: #EED8A4;
    }

    .navbar-inverse .nav li.current_page_item {
    color: #Fffff; background-color: #EED8A4;
    }

    Hi Thomasbyers

    Firstly you can create child theme.

    Followup given instruction.

    1.Install child theme creator plugin
    orbisius-child-theme-creator

    2 This plugin create your child theme with new child theme directory and style.css files.

    3. After that you can set your css changes in style.css.

    It will resolved your issue.

    Thanks

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    If you’re sure you don’t have a caching plugin, and you cleared your browser’s cache, speak to your hosting providers as to whether they do some sort of server-side caching.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    If you’re sure you don’t have a caching plugin, and you cleared your browser’s cache, speak to your hosting providers as to whether they do some sort of server-side caching.

    Hey Andrew,

    I just tried that Body code again that you gave and it worked!! I have a red border now. However, none of the other code works.

    Also, I am my own host and I have coded out any cacheing . . . Plus, the red border would not have worked either. Am I wrong on that?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I thought you already tried the red border style and it didn’t work first time.

    It didn’t – I just closed everything and redid it all and the red border came up. But still nothing else.

    Just my two cents…
    Try checking your elements using Developer Tools. Verify that the css you are trying to change is implemented from a style sheet and not a JavaScript insert into the element (inline styling). If so you will need to add the !important ( before the closing ; ) clause to override your changes from a style sheet. You will notice that Andrew’s test code (the red border) has the !important clause.

    Ok, just for fun I downloaded the spasalon theme to my test server and started playing around with the theme code. I was able to track down that the child theme stylesheet is loaded first, then all the other stylesheets are loaded after that via the wp_head() hook. This over-writes any changes you make in your stylesheet.

    Here is my work-around (and this may not be proper, but it works, and was easier than searching through the this themes code to change the order of what the hook loads):

    1. Copy header.php file to your child theme folder.
    2. Edit your new copy of header.php and change the order of loading your child stylesheet (line 18) to below the wp_head hook

    Your new header.php file should now look like this (lines ~19 & 20):

    <?php wp_head(); ?>
    	 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />

    Save your freshly edited file and refresh your browser. All should be well…

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Child Theme Editor NOT working – Changes only happen under custom css’ is closed to new replies.
Skip to toolbar