Need help? Check out our Support site, then


want to try CSS but not able to get CSS previews to save

  1. I know absolutely nothing about CSS but might like to learn, particularly because there's an effect I want to add to my site and would like to know if it's even possible with CSS.

    When I go to Custom Design I'm not able to get the free preview of CSS to work. In firefox sometimes the "welcome to custom css" box where you replace the code is blank, and sometimes it's ok. In iexplorer it always shows up - but in either browser whenever I replace the welcome message with the CSS I am trying to experiment with, it says 'saving changes...' for a very long time and never gets past that.

    What I am trying to do in particular is to create some kind of hover/mouseover effect over images. I would like the images to be links to other pages, and ideally I would like to have the image change to another image, but I would settle for it even greying out or highlighting or some other way for the viewer to know it is a link. Some of your forums say that this can't be done at wordpress because that's a java function, but many, many tutorials out on the web say that it can be done completely in CSS without java. I'd really like to try to play around with it first and get a sense of whether or not I feel capable of learning CSS, before purchasing the upgrade.

    Any information you can give me about the CSS preview, and whether or not I would be able to accomplish any kind of mouseover effect with an image that is also a link, would be greatly appreciated!

  2. First, please make sure that your browser is up to date by visiting http://whatbrowser.org/

    If it is not, please try updating your browser or switching to a different browser.

    If it is, please do these four things:

    1. Try clearing your browser's cache and cookies: http://en.support.wordpress.com/browser-issues/

    2. Make sure that you have third-party cookies enabled: http://en.support.wordpress.com/third-party-cookies/

    3. Try with all browser extensions or add-ons temporarily disabled.

    4. Try enabling HTTPS: http://en.support.wordpress.com/https/

    Please let us know how each step goes for you, and which browser (and version of) you're using if you're still having trouble.

  3. Hi -
    I am working with firefox 20. I also tried in Internet Explorer 20 when Firefox wouldn't work.

    I did all the steps you listed above. After that, the design tools wouldn't load at all. My site just looked blank white, and the bar on the right said "loading design tools..." for a very long time and stayed there. I tried re-enabling the plug-ins one by one to see if that had any effect but I got the same results.

    So I am still not able to get the free preview of CSS to work and would like to accomplish this.

    Also I would like my original second question answered: "What I am trying to do in particular is to create some kind of hover/mouseover effect over images. I would like the images to be links to other pages, and ideally I would like to have the image change to another image, but I would settle for it even greying out or highlighting or some other way for the viewer to know it is a link. Some of your forums say that this can't be done at wordpress because that's a java function, but many, many tutorials out on the web say that it can be done completely in CSS without java. I'd really like to try to play around with it first and get a sense of whether or not I feel capable of learning CSS, before purchasing the upgrade.

    Any information you can give me about the CSS preview, and whether or not I would be able to accomplish any kind of mouseover effect with an image that is also a link, would be greatly appreciated! "

    Thank you.

  4. Sorry, make that Firefox 20 but Internet Explorer 9.

  5. In my experience, the hover effect you're describing can't be done, but you might want to ask the more experienced CSS gurus over at http://en.forums.wordpress.com/forum/css-customization

    As for the glitch, we're looking into this.

  6. So, the glitch appears to have magically fixed itself after I looked, or at least it's working now.

    Would you please check?

  7. After that, the design tools wouldn't load at all. My site just looked blank white, and the bar on the right said "loading design tools..." for a very long time and stayed there. I tried re-enabling the plug-ins one by one to see if that had any effect but I got the same results.

    So I am still not able to get the free preview of CSS to work and would like to accomplish this.

    This happens in multiple browsers on the same computer for you then? By any chance do you have the option to try it from a different computer in a different location to rule out a setting on your local computer or network as the source of the problem?

    I did just test the CSS editor again both with Chrome 26 and Firefox 20 on a Mac, and I didn't have any trouble previewing or saving changes using the try-before-buy option.

  8. What I am trying to do in particular is to create some kind of hover/mouseover effect over images. I would like the images to be links to other pages, and ideally I would like to have the image change to another image, but I would settle for it even greying out or highlighting or some other way for the viewer to know it is a link.

    You cannot add HTML or links using CSS only, but if you can add the HTML needed in some other way, then you can swap out the background image for an element on hover. I think more details are needed, and this is also a totally separate issue from the preview one (which I want to make sure isn't caused by something we are able to fix on our side). So would you mind please posting the CSS question separately at http://en.forums.wordpress.com/forum/css-customization/#postform ? Make sure to include an example link to your site as well as a link to one of the tutorials you read that says it can be done completely in CSS if you think that would be helpful!

  9. Oops. Earlier today I thought I posted in this forum but I really just responded to the email so it's not here at all. Not enough sleep.

    Anyway, it is somewhat better for me – I am able to open the design tools, and I can paste into the css box. It saves and says “your design is published” but then when I hover over the image nothing happens. So either I didn’t write the code correctly, or it isn’t responding. If I actually click on the image, it goes quite berserk and starts opening duplicate page after page after page with the design tools over to the right.

    Right now as you suggest I think I should do one thing at a time, and really that should be just to try to understand css and see if I can get a handle on it. I have found some very simple code on other sites just to try to change one aspect of my site - the background color for example - I put those in the trial and nothing happens. So I think I'm just not getting it right...

  10. It will probably help to look at a specific example. Could you reply here with the background color CSS you tried before and verify the link for the blog you are working on?

  11. then when I hover over the image nothing happens

    I'm not sure what you tried to change or what to hover over to test this. Can you post the CSS, an example link, and describe which image to click?

    If I actually click on the image, it goes quite berserk and starts opening duplicate page after page after page with the design tools over to the right.

    This sounds pretty strange. I'd like to try to test that. What are you clicking on exactly?

    I have found some very simple code on other sites just to try to change one aspect of my site - the background color for example - I put those in the trial and nothing happens.

    CSS is theme specific, so unless the examples you found match up with the HTML in the theme you are currently using, they won't work. To learn CSS well enough to be able to tell which examples will work, you should know a little bit about HTML as well. Here are some great starting out tutorials that I would recommend:
    http://www.htmldog.com/guides/htmlbeginner/
    http://www.htmldog.com/guides/cssbeginner/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags