Need help? Check out our Support site, then


css has stopped working

  1. 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.

  2. 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

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

  4. for me too so i think we need to wait

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

  6. 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.

  7. 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!

  8. 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.

  9. 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.

  10. 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) ;-)

  11. 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.

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

    thanks

  13. 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!

  14. I've tried sendingsignal's solution and it works!

  15. 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.

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

  17. @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.

  18. @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?

  19. @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. :)

  20. @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.

  21. Thank you, @designsimply. It's magically fixed this morning (hooray!) so whether it's the result of whatever was causing the preview bug having been cleared up, or who knows what, I'm leaving well enough alone.

    So happy it's unbroken. I hope you guys will keep this in mind when making changes to how CSS loads in the future. That's a pretty hazardous thing to change, especially without notice, given that the sudden resulting ugliness is publicly viewable and all ...

    Regardless, thank you for your help.

  22. It's magically fixed this morning (hooray!)

    We reverted the change! The intention behind the change was good—we wanted to help users who mistakenly copy the entire theme stylesheet into the custom CSS editor which has the potential to confuse beginners since they don't do the right modifications after copying and they also don't understand how the custom CSS affects custom colors (and that sometimes leads them to thinking things are broken when they aren't).

    In practice, the update caused too many existing rules users had added in the past to break for the benefit to outweigh the cost. It's also good to keep in mind that updates like this move us forward and help us figure out the best possible solutions for Custom Design owners as a whole. We're more interested in updating and continuously learning and improving rather than letting things get stagnant. We are always here to listen to feedback and help (like we did here) after any updates like this though!

    As you've already noticed, CSS editing should be back to normal now, and you no longer need to add any extra !important tags that weren't there before.

  23. I now have a serious problem in that the several painstaking and very frustrating hours spent to find out how to put a white background on my welcome page has now proved to be completely wasted as it has turned back again to shaded and I have long forgotten how it was ever made white in the first place.

    I am presently struggling to create a new blog with the new and complicated Oxygen theme and quite honestly this is more than I can cope with.

    I simply do not understand most of the above, where it is supposed to go or anything????

    This is NOT user-friendly for those who do not know what they are doing LIKE ME. Not everyone has a degree in WordPress.com-speak or the mental capacity to understand it anyway.

    Unfortunately there are only 24 hours in a day and along with everything else I do need to get on with the new blog which has been proving to be extremely hardgoing and now this!

    Can someone please help me as this is really stressing me out!

    One would hope WordPress could have afforded a member of staff to advise people when they are getting really stressed due to the sometimes extreme difficulty there is in finding out how to do some things.

    Thanks.

  24. This is NOT user-friendly for those who do not know what they are doing LIKE ME.

    If you are trying to work with the CSS editor, keep in mind CSS is a markup language that takes some time to learn. It's not a beginner tool, but it's fun to learn if you're interested! And this forum is for helping people learn, not providing design consultation. Editing any site in any platform with CSS probably won't be intuitive to someone who doesn't know HTML first. If you're not interested in taking time to learn about those things, the first thing you should try is the colors tool in the Appearance → Themes → Customize → Colors panel. It's designed to be fast and work without coding knowledge! It has pre-selected sets of colors that work well together and it's a very fast way to change all of the colors for a WordPress.com theme. To get fine-grained control, that's where the

    If you want to get more technical (which would be awesome!), then I would recommend starting with a good, basic CSS tutorial like this one:
    http://www.htmldog.com/guides/cssbeginner/

    If you just want someone to change the design for you, hiring a consultant is your best option:
    http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    WordPress.com also has some support documents that should help you. Here's one about editing CSS:
    http://en.support.wordpress.com/custom-design/editing-css/

    Don't get too stressed! When asking questions in the forum, you should start your own separate thread, and make sure to post a simple, clear question—preferably with an example link. In your reply above on this thread, you said:

    how to put a white background on my welcome page

    The first thing to note is that CSS is theme-specific. That means that if you change themes, the same CSS won't work and you need to re-add new rules that are specific to your theme.

    For the shaded background issue, many themes have a shaded color for sticky posts—and your "Welcome" post is a sticky post. If you changed that sticky setting recently, that's where the shading came from. If you'd like to turn it off in the by adding the following CSS to your Appearance → Themes → Customize → CSS panel:

    .home .sticky {
    	background-color: inherit;
    }

    Don't forget that if you change themes again in the future, you'll need to make a new rule depending on the new theme's design.

  25. Thank you for the helpful advice.

    The colours system is quite easy and I have used it without a problem. I have used html but quite frankly I find the CSS language a different kettle of fish and I don't want or need to go there.

    It seems to have worked except it's printed the text out on the front page of my blog. It's bound to be something I've done wrong as when it comes to this I don't know what the heck I'm doing.

    Running a PC and a laptop and blogs is enough as it is and I've had Bill Gates driving me up the wall all day and this might sound horrible but if I see a dartboard at a boot sale this summer I'm going to buy it and put a picture of his face on it. I hope I don't get arrested for saying that. MS have been planting fails into their legitimate software and they can take hours or even days to resolve.

    I'd like at least to get this resolved so I can then resolve the problem with my WD passport which has refused to work for several days so I can then get on to the Oxygen theme on my new blog.

    The other things I need to get on with will have to wait for now.

  26. Actually no it is not working. I just didn't hang around long enough to see it flip back again.

    I didn't change anything, the post has always been sticky.

    The template got changed accidentally while I was fiddling around with Oxygen on the new blog.

    I really don't care if anyone thinks I am stupid but I do need an answer that I can understand that is in plain English because this is the same problem I had last time and that's why it took me days to get a resolution.

    Now because it is months down the line, I've forgotten what the resolution was and I'm having to go through the extremely long-winded and annoying process of finding out what the solution is again when I have a whole pile of other things to resolve, software, hardware and otherwise.

    Thanks.

  27. The template got changed accidentally while I was fiddling around with Oxygen on the new blog.

    What is the URL of the blog you are referring to?

  28. Sorry I thought it came out on the post. It used to.

    Oh dear, that's something else that needs to be sort out.

    It's truthinreality.com.

  29. The template got changed accidentally while I was fiddling around with Oxygen on the new blog.

    When you change themes, the CSS resets. In your case, I would recommend only using the "live preview" links below themes on the Appearance -> Themes page to look at other themes and then only switch if you're absolutely sure you want to change the theme.

    To remove the shading, just add it back again:

    Go to https://endtimesinformation.wordpress.com/wp-admin/customize.php#css

    Enter this:

    .home .sticky {
    	background-color: inherit;
    }

    And save changes.

  30. Sorry I thought it came out on the post. It used to.

    You get the option to select a blog for a forum thread if you were the original poster. In this thread, you are commenting on a question someone else started.

Topic Closed

This topic has been closed to new replies.

About this Topic