style.css vs advanced settings

  • jasio126

    (@jasio126)


    7 years ago

    Hello,

    I create virtue child theme and I want to write my custom css in style.css file, but unfortunately changes doesn’t show up on the page. When I type the same code into Advanced settings it works. So what I have to do to make my style.css works?

    -Jan

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show us your Website with the CSS (that isn’t working) inside your Child Theme style.css file?

    Kevin

    (@jx-3p)

    Why not just use the theme options css box? It’s likely that you have something within your styles.css file that’s breaking the custom CSS.

    Unless you’re making other changes to the theme files, you don’t need to use a child theme. What kind of other edits have you made to files?

    -Kevin

    Thread Starter jasio126

    (@jasio126)

    I’m making this website local on my computer so I can’t show it to you, but here is css code:

    /*
    Theme Name: Virtue Child
    Theme URI: https://kadencethemes.com/product/virtue-free-theme/
    Description: Virtue Child Theme
    Version: 3.1.8
    Author: Kadence Themes
    Author URI: https://kadencethemes.com/
    Template: virtue
    Tags: custom-colors, two-columns, one-column, custom-header, custom-menu, featured-images, translation-ready, theme-options, blog, e-commerce, portfolio, rtl-language-support
    Text Domain: virtue-child

    License: GNU General Public License v3.0
    License URI: https://www.gnu.org/licenses/gpl.html
    */

    /* Typografia */

    body{
    color: white;
    font-family: Verdena, Geneva, sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    }

    h1{
    color: white;
    font-family: Lato;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    }

    h2{
    color: white;
    font-family: Lato;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    }

    h3{
    color: white;
    font-family: Lato;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    }

    h4{
    color: white;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    }

    h5{
    color: white;
    font-family: Lato;
    font-size: 18px;
    font-style: bold;
    font-weight: 700;
    line-height: 40px;
    }

    #containerfooter h3 {
    font-size: 20px;
    color: white;
    }

    @media (max-width: 740px) {
    #containerfooter h3 {
    font-size: 16px;
    }}

    /* Stopka */

    #sponsorzy {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
    text-align: center;
    display: inline-block;
    width: 200%;
    }

    /* Sponsorzy stragtegiczni klubu */

    #umdolny{
    background-image: url(“https://localhost/wks_new/wp-content/uploads/2017/04/umdolny-bw.png”);
    height: 70px;
    width: 221px;
    display: inline-block;
    padding: 20px;
    margin-right: 10px;
    }

    #umdolny:hover{
    background-image: url(“https://localhost/wks_new/wp-content/uploads/2017/04/umdolny-kolor.png”);
    height: 70px;
    width: 221px;
    display: inline-block;
    padding: 20px;
    }

    #umwroc{
    background-image: url(“https://localhost/wks_new/wp-content/uploads/2017/04/umwroclaw-bw.png”);
    height: 70px;
    width: 59px;
    display: inline-block;
    padding: 20px;
    margin-right: 10px;
    }

    #umwroc:hover{
    background-image: url(“https://localhost/wks_new/wp-content/uploads/2017/04/umwroclaw-kolor.png”);
    height: 70px;
    width: 59px;
    display: inline-block;
    padding: 20px;
    }

    Thread Starter jasio126

    (@jasio126)

    I only made changes to style.css and I know it would be easier to just use the css box. I’m doing it because I’m still learning and I want to know how child themes works and how to use them.

    Kevin

    (@jx-3p)

    I don’t see anything wrong within that CSS, but there may be something else in your child theme that’s causing the issue.

    Try downloading a fresh child theme from here, and add your CSS below the theme declaration without making any changes to the commented area:
    https://www.kadencethemes.com/child-themes/

    Let me know if the CSS works in the new CSS file.

    -Kevin

    Thread Starter jasio126

    (@jasio126)

    It still doesn’t work ??

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    Hey, So this has to do with css priority and specificity.
    Which basically means the if two css items have the exact same specificity the css added last in the html structure gets priority.

    So in the example of your h1 font. Theme options include styling options for the h1 font. (theme options > typography settings).

    Those output last in the <head> of your page because they are options you set and designed to take priority.

    Now the reason you see them take effect using the inspect tool in a browser is because that tool automatically loads the css last giving it priority over everything else.

    So if you want your child theme to override the theme options settings then you would need to give your css more specificity because it won’t have priority.

    So for example instead of this in your child theme:

    h1{
color: white;
font-family: Lato;
font-size: 38px;
font-style: normal;
font-weight: 400;
line-height: 40px;
}

    add this:

    #wrapper h1{
color: white;
font-family: Lato;
font-size: 38px;
font-style: normal;
font-weight: 400;
line-height: 40px;
}

    Since wrapper wraps all the content it will still apply to all the h1 tags but it will be used because it is more specific then css that has a higher priority.

    I hope that helps.

    Ben

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘style.css vs advanced settings’ is closed to new replies.