Change the color in the header of wp theme

  • alexwebnorway

    (@alexwebnorway)


    8 years, 6 months ago

    Hi working on a site but can not change the text color in the header for the theme. Its kallayas theme. And I tried to change the css for the elements in the header, in firefox inspector I manage to change it but when I copy the css and use it in the custom css for the theme nothing happens.

    link to the page is http://www.klinikkree.no

    Its the second heading in the slider Iwant to change from light grey to yellow

Viewing 4 replies - 1 through 4 (of 4 total)
  • Dave

    (@dvaer)

    8 years, 6 months ago

    If you’re managing to change it in Firefox’ element inspector, but copying it to your theme’s custom CSS section doesn’t work, then it could be that the custom CSS section of your theme doesn’t load properly.

    Looking at your site’s source code I don’t see a custom CSS section being loaded (although there is an options css section and custom css could be added there).

    So you could check if the CSS you’re adding is indeed being loaded. I would expect it in this file http://klinikkree.no/wp-content/themes/kallyas/css/options.css or otherwise in a file called something like custom.css (but I didn’t see this in the source). If not, you’d best contact the theme author and ask them to look into it.

    What is the custom CSS you are adding?

    Thread Starter alexwebnorway

    (@alexwebnorway)

    8 years, 6 months ago

    I have tried to add the neww css to the custom css that comes with jetpack, also to the custom css that comes with the theme, and also to the child theme css but nothing happens allthough the change of the css can be viewed in firefox inspector.

    element {

    right: 0px;
    opacity: 1;

    }
    body .iosSlider .item .caption.style2.fromright .title_big, body .iosSlider .item .caption.style2.fromright .title_small {

    border-right: 5px solid #9E2387;

    }
    .iosSlider .item .caption.style2.fromright .title_big, .iosSlider .item .caption.style2.fromright .title_small {

    float: right;
    border-right: 5px solid #CD2122;
    border-left: 0px none;
    left: auto;
    right: -100px;

    }
    body .iosSlider .item .caption.style2 .title_big, body .iosSlider .item .caption.style2 .title_small {

    border-left: 5px solid #9E2387;

    }
    .iosSlider .item .caption.style2 .title_small {

    font-size: 16px;
    font-weight: 500;
    clear: both;
    padding: 10px 15px;

    }
    .iosSlider .item .caption.style2 .title_big, .iosSlider .item .caption.style2 .title_small {

    line-height: 1.3;
    color: rgb(218, 216, 101);
    position: relative;
    opacity: 0;
    margin: 0px;
    float: left;
    border-left: 5px solid #CD2122;
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0% 0%;
    left: -100px;

    }
    h4 {

    font-family: Open Sans;
    font-size: 18px;
    line-height: 20px;

    }
    h1, h2, h3, h4, h5, h6, div.pp_kalypso .ppt {

    font-family: “Open Sans”,”Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-weight: 700;

    }
    h4 {

    font-size: 17.5px;

    }
    h1, h2, h3, h4, h5, h6 {

    margin: 10px 0px;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
    text-rendering: optimizelegibility;

    }
    element {

    cursor: move;

    }
    body {

    font-family: Open Sans;
    font-size: 16px;
    line-height: 19px;

    }
    body {

    font-family: “Open Sans”,”Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 19px;
    color: #535353;

    }
    body {

    font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;

    }
    html {

    font-size: 100%;

    }

    This is the css with chenged colors in firefox inspector. If I add this css to the custom css norhing happens

    stephencottontail

    (@stephencottontail)

    8 years, 6 months ago

    For some reason, your theme loads the stylesheet for the slider plugin you’re using in the footer. Because that stylesheet is loaded after your custom CSS plugin, the rules from that stylesheet take precedence. A quick fix would be to add an additional selector to your custom CSS plugin so those rules would have a higher specificity:

    body .iosSlider .item .caption.style2 .title_big,
body .iosSlider .item .caption.style2 .title_small {
    line-height: 1.3;
    color: #dad865;
    position: relative;
    opacity: 0;
    margin: 0;
    float: left;
    border-left: 5px solid #CD2122;
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
    left: -100px
}
    Thread Starter alexwebnorway

    (@alexwebnorway)

    8 years, 6 months ago

    Thx It worked perfect 🙂

    Regards

    Alex

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change the color in the header of wp theme’ is closed to new replies.