css has stopped working

  • Author
    Posts
  • #1304928

    ctvr2013
    Member

    hi there
    as of this morning the css i have written into the customize panel has stopped working?
    when i am in the css panel and i make a change it works but wen i save and exit it just uses black back ground for the nav bar and black font for the h1 headers which i have set to different colors in the css. Also i have set the nav bar headings and sub headings to turn green when hovered over – this also has stopped working
    please help :(
    thanks jenny

    The blog I need help with is suemoss105.wordpress.com.

    #1305019

    ctvr2013
    Member

    it seem s thatwhen i go into the customize css panel and just even press the return key then (like its been activated) the propr css turns on then if i save and exit it goes away again?
    I dont have any plugins or anything like that that i just have a basic blog free hosting .. any help would be great as i am nearly finished- well i thought i was
    thanks jen

    #1305020

    ctvr2013
    Member

    The css is retaining in the widgets and footer areas but not the nav bar and headings
    jen

    #1305023

    for me too so i think we need to wait

    #1305028

    and its a little anoying because its almost third time like that

    #1305084

    jscwebmaster
    Member

    Custom CSS revisions stopped working today for me as well. Strangely it only affects about half of my revisions, specifically the ones pertaining to background and text colors.

    #1305122

    Hi guys, I looked into this for you.

    It seems that if you have colors set via the Colors panel in the Customizer, sometimes they will not be overwritten by Custom CSS.

    There may be a bug about colors changing for areas that are not explicitly changed – we’re looking into this.

    For the moment, adding “!important” to the end of the color lines may work for you.

    Like this:

    #header {
    	background-color: #FFF !important;
    	min-height: 180px;
    }

    Let me know if that helps!

    #1305126

    musicuratum
    Member

    I just noticed the change on my site as well (musicuratum.com) and I’d set up everything via custom CSS code, so evidently there is a bug somewhere. Hopefully the problem can be cleared up soon.

    #1305130

    It’s possible that for some things you will be required to use the !important designation now.

    Custom CSS used to load after the Custom Colors values. This has been changed so it now loads before – this means that some of your values may be overwritten by the Custom Color selections. So for these instances, you’ll have to add !important to your CSS lines.

    If you think that something else is going on with your particular CSS, let me know and I’ll look into it.

    #1305138

    hanswest
    Member

    I am using spectrum-theme
    As I purchased the Custom Design upgrade I immediately lost my background picture even though i uploaded it into the media
    I tweeked it with a body.custom-background change. And that HAS worded for a month or two…
    And even today it seems to work fine when, at the “customize your blog page”. When I change the CSS there, the picture appears in the background. Then I save it and view the site from any other view other as the “customize your blog page” and it’s gone.
    My solution has been up till now

    body.custom-background {
    background: url(‘http://kinkinfo.files.wordpress.com/2013/04/body9.jpg
    background-repeat: repeat-y;
    /* repeat scroll 0;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-color: #EEEEEE;}

    with this !important trick I managed to get things working again but it feels like tweeking a tweek…
    Could you provide me with a better one (that will work in the future) ;-)

    #1305139

    musicuratum
    Member

    Thank you for the tip, I’ll add the “!important” in the appropriate places in the CSS and see how it works — if it doesn’t, I’ll certainly let you know.

    #1305143

    I’ve tried adding the !important; but I have not seen any improvements. My blog: http://waynestohsartanddesign.com/

    thanks

    #1305145

    karentempler
    Member

    I’m having the same problem. Have always had a white background (Sundance) which I just initially set in the color picker. (Before the new Customizer came along). Yesterday, out of the blue, the #page container decided to have a grey background. I’ve put an explicit line in the CSS to set it to white. I’ve added and removed !important.

    As noted by others above, everything works in the Customizer/preview — any tweak (adding the line, toggling between white and fff, adding/removing important …) causes the background to turn white. But as soon as I hit save (and it says my changes were published) it goes right back to grey.

    Please help!

    Please help!

    #1305160

    taobaoindo
    Member

    I’ve tried sendingsignal’s solution and it works!

    #1305161

    karentempler
    Member

    I just did everything I can think of — again. Still no change. As always, it previews fine, says it saves, but I still have this wayward and very ugly grey background in #page.

    Please help me get my white background back. This is very distressing.

    #1305162

    bautawitch
    Member

    I had the same problem with my background color but with adding “important” it’s back to normal again! :)
    http://www.BautaWitch.se

    #1305165

    @karentempler, you were really close to the right solution! You just need to apply !important to “background” or “background-image” instead of to “background-color” like you were doing. Let’s go through an example.

    Here’s what I see in your latest custom CSS:

    body.custom-background.custom-background-image-empty #page {
    	background: none;
    	background-color: #FFF !important;
    }

    However, here’s how the Sundance theme sets the #page background:

    body.custom-colors #page, body.custom-background.custom-background-image-empty #page {
    	background: url(http://s0.wp.com/wp-content/themes/pub/sundance/images/bg.jpg) repeat 0 0;
    }

    See how it uses url()? And see how you didn’t have !important set on the exact same property? Background is a shorthand CSS property and url() is a background-image value—you were trying to set the color when you really needed to change the image.

    There a couple different ways to solve this in your case.

    (1) You could use background-image instead of background-color:

    #page {
        background-image: none !important;
    }

    (2) Or if you wanted to explicitly set the background for #page to white, you could add background-color:

    #page {
        background-image: none !important;
        background-color: #fff !important;
    }

    (3) If you wanted to use the shorthand property to get the same effect:

    #page {
    	background: #fff none !important;
    }

    Simplifying it to the following would work as well because “none” is a default background-image value inside background:

    #page {
    	background: #fff !important;
    }

    If you want to learn more about the background shorthand property itself, this is a good link:
    http://www.w3.org/TR/CSS2/colors.html#propdef-background I check it sometimes if I forget the accepted default values (i.e. “none” for background-image but “inherit” for background-color”).

    Aside: the part you mentioned about it working in the preview seems like an unwanted side effect of the code update from earlier. I will look into that.

    #1305166

    @waynestohsartanddesign wrote:

    I’ve tried adding the !important; but I have not seen any improvements.

    I checked http://waynestohsartanddesign.com/ and I see you’re using !important on several rules and those all seem to be working properly (note that I only checked the home page). Could you reply back here with an example of just the CSS block you’re trying to change that isn’t working for you?

    #1305167

    @sendingsignal wrote:

    with this !important trick I managed to get things working again but it feels like tweeking a tweek…

    Well, if you think about it, all CSS updates could be considered tweaks! I always like the analogy of pushing pixels around. :)

    If you’re asking if your solution is the right best one, it looks good to me but I suppose you could use the shorthand property to make it a little nicer:

    body.custom-background {
    	background: #eee url('http://kinkinfo.files.wordpress.com/2013/04/body9.jpg') top center fixed no-repeat !important;
    }

    Either one will work technically the same though.

    If you’re asking how to “future proof” CSS, I think what you’ve got now is solid. You also have to keep in mind that content changes, themes and other code will possibly get updated due to new features and sometimes bug fixes, and stylesheets cascade so they sometimes depend on the content around them to work just so. In general, I try to avoid giving the advice of using the !important tag unless it’s absolutely necessary. Based on the latest Custom Design update decision to make custom colors rules stronger than custom CSS rules, you now need !important in some of the cases like the one you’ve mentioned. It should work in the future, but changes like this can’t *always* be foreseen.

    Could you provide me with a better one (that will work in the future) ;-)

    What you’ve got looks good. :)

    #1305168

    @ctvr2013 wrote:

    it seem s thatwhen i go into the customize css panel and just even press the return key then (like its been activated) the propr css turns on then if i save and exit it goes away again?

    This sounds like an issue with the preview system. I will look into it and find out what’s happening.

    Also i have set the nav bar headings and sub headings to turn green when hovered over – this also has stopped working
    please help :(

    I did check http://suemoss105.wordpress.com/ and it looks like you were able to fix this.

The topic ‘css has stopped working’ is closed to new replies.