WordPress.org

Forums

Customizr
[resolved] Difference between using custom css in the theme options and adding css to child (9 posts)

  1. eyeland
    Member
    Posted 9 months ago #

    What is the difference between using custom css in the theme options and adding css to the child theme stylesheet?
    Some snippets seem to only work in one or the other?

  2. rdellconsulting
    Member
    Posted 9 months ago #

    Can you be more specific on those snippets as that shouldn't be an issue and I've not heard that over the past 12 months. Since the extensions were introduced, some of the snippets may be compromised. We fix them as we find out issues.

    My advice would be to use Custom CSS to experiment and see instant results. Then when satisfied, move the code over to the child theme style sheet.

    Child Theme protects your code as Czr updates are applied, though there is always a possibility that something changes as the Theme matures. (I can only remember one instance of that happening). Keep an eye on the Changelog to understand what has changed in each release.

  3. eyeland
    Member
    Posted 9 months ago #

    @rdellconsulting - That was my understanding as well and that is how I usually work. Here are 2 examples of CSS that only works for me in the Custom CSS field and not in the child stylesheet:

    /* slider caption background opacity */
    .carousel-caption {
     background: rgba(0, 0, 0, 0.4);
    }
    
    /* slider caption background size  Up,Right,Down,Left*/
    .carousel-caption {
        margin: 11%;
        padding: 3% 3% 3% 3%;
    }
  4. acub
    Member
    Posted 9 months ago #

    I just inspected your website and and ran into the following error:

    Failed to load resource: the server responded with a status of 404 (Not Found):
    http://mcasien.com/wp-content/themes/Customizer-child/www/wp/wp-content/themes/customizr/style.css

    That's why your css doesn't apply. Remove line 13 from your child theme's style.css:

    @import url('www/wp/wp-content/themes/customizr/style.css');

    Apart from other themes, Customizr already loads the parent theme css, so you don't need to load it yourself. Besides, the proper path for that would be:

    @import url('../customizr/style.css');
  5. eyeland
    Member
    Posted 9 months ago #

    @acub Oo Thanks!

  6. eyeland
    Member
    Posted 9 months ago #

    I don't think that line 13 was the issue. Removed it and the snippet still didn't work and http://mcasien.com/wp-content/themes/Customizer-child/www/wp/wp-content/themes/customizr/style.css still doesn't load.
    http://mcasien.com/wp-content/themes/Customizer-child/style.css does however.
    Moving the snippet to the end of all the other snippets (that always worked) in the stylesheet made it work. I suppose this means that there is a conflict in my snippets.

  7. acub
    Member
    Posted 9 months ago #

    It means one thing: somewhere in your snippets you have a selector of exact same specificity. If you add the same rule multiple times, with different values the last value always gets applied.
    If you make your selector more specific (more powerful):

    .item .carousel-caption {
        margin: 11%;
        padding: 3% 3% 3% 3%;
    }

    it will apply even if you place it before the

    .carousel-caption {/* whatever */};

    from the rest of the snippets.

  8. eyeland
    Member
    Posted 9 months ago #

    @acub great, that clears it up, thanks :)
    Then I suppose that the answer to my original question would be that the custom CSS from the customizr gets applied after the stylesheet, thus explaining why the snippet worked from there?

  9. rdellconsulting
    Member
    Posted 9 months ago #

    Yes, that's correct. Custom CSS has highest specificity

Reply

You must log in to post.

About this Theme

About this Topic