CSS not loading

  • Resolved pod51

    (@pod51)


    5 years, 3 months ago

    Hi,

    Firstly I have to admit I am a little bit of a learner so bear with me. Created a site for a friend’s small business and he requested a Testimonial section. after trying several plugins yours seems to be the closest to what he’s asked me to include.

    He’s asked me to style to match his colour & text requirements but I am struggling to get the CSS to load properly as it seems to default to the themes settings rather than the added css settings !!

    Any pointers on how to get the css loading properly ? For now I have adjusted the themes settings directly but it throws the styling of other items out.

    Additional CSS added to theme that’s partially loading

    .glsr-review-author {
    display: inline-block;
    vertical-align: top;
    color: white;
    text-shadow: 2px 2px #01274f;
    font-family: oswald;
    font-size: 12pt;
}

.glsr-default .glsr-review-content p {
    line-height: 1.5;
    color: white;
    text-shadow: 2px 2px #01274f;
    font-size: 12pt;
}

 .glsr-review-date {
    display: inline-block;
    white-space: nowrap;
    color: white;
    text-shadow: 2px 2px #01274f;
}

.glsr-default .glsr-star {
    background-size: 30px;
    height: 40px;
    width: 40px;
}

.glsr-read-more {
    white-space: nowrap;
    color: white;
    text-shadow: 2px 2px #01274f;
}

.glsr-read-more {
    white-space: nowrap;
    color: white;
    text-shadow: 2px 2px #01274f;
    font-size: 14pt;
    font-family: oswald;
}

 .glsr-review-title {
color: white;
    text-shadow: 2px 2px #01274f;
    font-size: 24pt;
}

.glsr-shortcode-title {
    color: white;
    text-shadow: 2px 2px #01274f;
    font-size: 24pt;
    font-family: oswald;
}

    https://photos.app.goo.gl/PNDH3PYg6nKWjNKf9
    https://photos.app.goo.gl/jvtMihxpdiW8MDVYA

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Gemini Labs

    (@geminilabs)

    It looks like you already figured it out.

    To override theme styles, you need to be aware of CSS specificity.

    For example, if your theme has this:

    .main_color h3 {
   color: #000;
}

    Then this will not work as the previous rule has a higher specificity:

    .glsr-review-title {
   color: #fff;
}

    Instead, to override it you should do this:

    .glsr-review-title h3 {
   color: #fff;
}

    However, if the theme CSS is loaded on the page after the above rule, then it will not work as they both have the same specificity and so in that case the last one will always take precedence.

    So, to be extra sure, you can do this:

    .glsr-review .glsr-review-title h3 {
   color: #fff;
}

    Learn more about CSS specificity:

    https://qnimate.com/dive-into-css-specificity/
    https://htmldog.com/guides/css/intermediate/specificity/

    Thread Starter pod51

    (@pod51)

    Thanks for the help and it looks like I have a lot more reading to do. The things you commit to do as a freebie for a friend.

    I have just a couple more things I can hope you can guide me with.

    https://photos.app.goo.gl/Mh7q5h2UoJ8eMH2fA
    Feedback Form Page

    I feel I am so close to getting that right.

    And one more thing is the read more/read less on the testimonials page
    https://photos.app.goo.gl/WicMn9aWZsGLAzT99

    These are the only elements I need to change so if you could help that would be great and I will read the links you posted above.

    Many thanks for our help so far.

    Plugin Author Gemini Labs

    (@geminilabs)

    As shown in the links I provided above, ID selectors have one of the highest specificity in CSS. So to override, you will either need to use the !important declaration (which is the highest), or write it like this:

    #top label.glsr-select-label {
    font-size: 20px;
}

    And for the links, add the type selector with the class:

    a.glsr-read-more {
    fontcolor: #fff;
}
    Thread Starter pod51

    (@pod51)

    Thanks again, I guess it’s the selectors I am struggling with overall bit thanks for the pointers and I will have a go at your suggestions.

    Thread Starter pod51

    (@pod51)

    I took onboard you’re very helpful advice and finished of the page I was trying to create.

    https://purevisioncleaning.co.uk/testimonials

    Many thanks for your help and you can consider this post closed.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS not loading’ is closed to new replies.