WordPress.org

Ready to get started?Download WordPress

Forums

Preference Lite
[resolved] Child CSS not always applying rules (17 posts)

  1. rabble
    Member
    Posted 1 year ago #

    I am using the preference lite child theme style.css to make modifications but finding that some rules have no effect? For example unable to change the h1 font-size value, and the modline-inner and outer colors.

    Thanks. Love the theme and easy customizations.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Most of these issues are due to unspecific CSS selectors
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  3. rabble
    Member
    Posted 1 year ago #

    OK thanks. Still, any advice as to how I can make the color change to the modline element using the child theme?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is the CSS you're using for the modline that isn't working?

  5. rabble
    Member
    Posted 1 year ago #

    /* Module style 1 */
    .modline-outer {
    	height:2px;
    	border-top:1px solid #78a5b6;
    	border-bottom:1px solid #78a5b6;
    	margin-bottom:18px;
    }
    .modline-inner {
    	width:25%;
    	height:2px;
    	background-color:#78a5b6;
    }

    Just trying to change the color

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which page element is the modline? Sorry, I don't know what a modline is.

  7. rabble
    Member
    Posted 1 year ago #

    It is the line that appears below sidebar and widget titles.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can't see a sidebar on the theme's demo website.

    Can you provide a link to a webpage with it?

  9. rabble
    Member
    Posted 1 year ago #

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try using these selectors for the modline outer;

    .module.amber .modline-outer

    As well as the ones you are using;

    .modline-outer
  11. rabble
    Member
    Posted 1 year ago #

    Still does not work...
    I tried changing all too:

    /* Module style 1 */
    .modline-outer {
    	height:2px;
    	border-top:1px solid #0d6e9b;
    	border-bottom:1px solid #0d6e9b;
    	margin-bottom:18px;
    }
    .modline-inner {
    	width:25%;
    	height:2px;
    	background-color:#0d6e9b;
    }
    .module.red .modline-outer {
    	border-color:#0d6e9b;
    }
    .module.red .modline-inner {
    	background-color:#0d6e9b;
    }
    .module.grey .modline-outer {
    	border-color:#0d6e9b;
    }
    .module.grey .modline-inner {
    	background-color:#0d6e9b;
    }
    .module.amber .modline-outer {
    	border-color:#0d6e9b;
    }
    .module.amber .modline-inner {
    	background-color:#0d6e9b;
    }
    .module.purple .modline-outer {
    	border-color:#0d6e9b;
    }
    .module.purple .modline-inner {
    	background-color:#0d6e9b;
    }
    .module.mycustom .modline-outer {
    	border-color:#0d6e9b;
    }
    .module.mycustom .modline-inner {
    	background-color:#0d6e9b;
    }
  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is your website online, can you provide a link to the webpage that doesn't apply your CSS?

  13. rabble
    Member
    Posted 1 year ago #

    Sure, I am turning off the 'under construction' plugin briefly.. Frankie Blue.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Resolve your syntax error;

    #showcase p {
    	margin:0;
    {
  15. rabble
    Member
    Posted 1 year ago #

    Oops! Well that explains everything.
    Thanks a million Andrew!

  16. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    Glad to see you found a solution... I wanted to note that the link to the demo site with the Quick Gallery is actually the Pro version of Preference. Regarding the issue of not being able to change the size of the H1 font size, are you still having that issue or is everything ok?

    (Andrew) for a better demo site, the theme home page is linked to the actual one here: http://demo.styledthemes.com/preference-free/ I never did like the WP Previews, but not sure how many people realize the "Theme Homepage" takes the person to my version of the demo...perhaps the WP team could consider putting a demo button to the developer's own demo site on the theme item description pages :)

    Anyway, I was curious about this #showcase p {margin: 0;} syntax error that seems to helped at the end here because this has nothing to do with the widget styling that was posted? Did I miss something here?

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    this has nothing to do with the widget styling that was posted?

    Correct.

    A syntax error will break all subsequent CSS.
    E.g if he tried this;

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

    The body style would not have worked. The broken widget styling was just a symptom of the syntax error. It was not the originating problem.

    I have noted your demo website and will refer to that in future :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.