Need help? Check out our Support site, then


New customization CSS editor

  1. After spending some time modifying some parts of the CSS I can’t be more disappointed with the new CSS editor. The way it is now, every single change (even a single letter if you stop typing a little bit) is instantly live previewed, but if you have a not fast connection this take quite a long time and makes introducing changes in the CSS a nightmare. Before, I was very much faster doing this than now.
    Furthermore, the editor's window is now much narrower and short than before the update, which makes more difficult to modify or write a new CSS.
    Is it only me who does not like this wordpress.com update?
    Regards
    Javier

  2. I like it precisely because you can see the result side by side with the CSS editor, but if you don't like it you don't have to use it: instead of Appearance > Customize > CSS, go to Appearance > Custom Design > CSS.

  3. Justpi thank you very much!
    I did not know that the former editor of the CSS was still there. Thank You!
    I like the new customization tool as well, except for those issues. Still, I think it could show the results of CSS changes, once you have finish the full sentence. For example, instead of trying to show what happens when you type
    "wid"
    it could simply wait to show the result once you complete the full sentence:
    "width: 100px;"
    it is quite annoying to wait till the page is updated with the changes, to complete the sentence. There is no obvious advantage for me on that.
    In addition, the CSS editing window is very small, it could be improved if it could be resized.
    In any case, thank you for your help. Now I know I can choose the old way when I need :-)
    Regards

  4. The new customization is aimed at allowing you to see CSS changes, and other changes, realtime. It is still very new, and I'm sure there will be tweaking going on for a while yet. I know during early testing I was seeing code changes right before my eyes almost. One minute this happened and the next it was fixed.

  5. Thanks for the feedback—it's helpful that you were specific and also proposed a solution! I will look into it. If you have time, may I ask a few questions to get a better idea of where you are coming from?

    if you have a not fast connection this take quite a long time and makes introducing changes in the CSS a nightmare

    How fast is your connection? You can find out by going to a site such as http://www.speedtest.net/ and then making a screenshot of the results:
    http://en.support.wordpress.com/make-a-screenshot/

    What OS and OS version are you using?

    Is your browser up to date? See http://browsehappy.com/

  6. One more question, do you have a lot of browser add-ons installed? If so, how many?

    Thanks so much for any additional info you can provide!

  7. It is still very new, and I'm sure there will be tweaking going on for a while yet.

    This is so true! We've already made a very nice update this week that helped custom fonts work faster—it's so cool when we can find and update stuff like that. :) All the feedback from you guys helps!

  8. shamillewharton
    Member

    Hi there! I've tried to get back to the old editor and to no avail ... I followed the directions on this thread - no change. The only reason I really even want to see the old version is to view the theme CSS ... Please assist! The blog I need help with is http://akitchensomewhere.com

  9. shamillewharton
    Member

    yes ... I've checked that out ... what I'm really trying to do is float my social icon bar which is currently done in a text widget... I need to either move the widget underneath my site title OR float it in the top right corner somehow ... any suggestions?

  10. ? You have already done this for the Nashville logo (#text-3). The easiest thing to do is copypaste the code of the social icons into the Nashville widget then delete the other Text widget.

  11. @shamillewharton, I don't see your social icons in your sidebar. I need to see that to give you the correct code, and which would you prefer? Right side or left under the site title?

    The problem with the CSS now is that with the new way WordPress.com is doing the CSS, there are several CSS files, not just one, so stuff is sort of scattered around. That was one of the reasons the link was removed from the CSS edit page, that and there were far too many people pasting the entire original CSS into the editor to just make a few minor changes and finding the images used in the theme itself went walkabout.

  12. By the way, shamillewharton, your social media widget includes some useless code: you don't need the text-align rule in the div, you don't need the image classes, you don't need the width and height indications, and you don't need the margin:0 (fourth icon). All you need is this:
    <div align="center"><a title="twitter" href="http://twitter.com/aktchnsomewhere" target="_blank"><img style="margin-right:10px;" alt="twitter" src="http://kitchensomewhere.files.wordpress.com/2013/03/twitter2.png" /></a><a title="facebook" href="http://facebook.com/akitchensomewhere" target="_blank"><img style="margin-right:10px;" alt="facebook" src="http://kitchensomewhere.files.wordpress.com/2013/03/facebook2.png" /></a><a title="rss feeder" href="http://akitchensomewhere.com/feed" target="_blank"><img style="margin-right:10px;" alt="rss" src="http://kitchensomewhere.files.wordpress.com/2013/03/rss1.png" /></a><a title="email me" href="mailto:shamille@akitchensomewhere.com" target="_blank"><img alt="mail" src="http://kitchensomewhere.files.wordpress.com/2013/03/mail.png" /></a></div>

  13. Hi designsimply
    Thanks a lot for your help and for attending my problems. Following your instructions and justpi I have been able to use the old CSS editor, which for me works better. Unfortunately, it seems that now it is not accesible anymore!!!
    I have made many changes in the CSS and I prefer to see as much as I can on the screen. I don't have a small screen (27"), but still, the new tool only allow me to see a few lines of code and short ones. I am sure it is just my particular case, and the tool is very helpful for just minor changes of the CSS (I think).
    I have just measured the speed of my conection. It is 22.84Mps (downloading) and 1.05 Mbps (uploading). I have made a screenshot , but I don't know how to send it! I am at Madrid. Spain. My browser has almost no add-ons installed (only Windows Media Player Extension for HTML5 is on) and it is up to date (Chrome version 26.0.1410.64 m). I am using Windows 7 64bit and running on a Intel [email redacted], 16MB RAM, 1x150GB SSD and 1x750GB HDD, although I think this is not very relevant.
    But, please, don't misunderstand me, I do like the new tool. It is just the CSS management what is not OK in my case. And I think there are some space for improving it without changing nothing of its current functionality. For example:

    1. It should be possible to resize the window. Both in width and height. In fact, in height there are much room below which is empty and could be better used with the CSS editor. If the window where I am writing this comment can be resized I am sure resizing the CSS window can't be dificult to add.

    2. Don't try to show me the changes without finishing the full sentence. It has no sense to do it as I type it just because the sentence has no sense :-).

    3. For the guys like me that has to make a lot of changes in the CSS, a button to switch on/off the live-view of the CSS changes would be very useful, and still will not affect the functionality of the tool.

    Thanks a lot and excuse me for the this extra long comment

  14. One more thing, with the old CSS editor I had access to different previous versions of my CSS. Now I can't. Why?
    Regards
    Javier

  15. That will show up again in the new customize page, but for now, add this to the end of your WordPress.com URL and you can still get to the old page.

    wp-admin/themes.php?page=editcss

  16. Thanks a lot, thesacredpath. I got back my beloved old CSS editor! ;-)

  17. You are welcome.

  18. shamillewharton
    Member

    Thank you all sooo very much! Think I got that issue resolved.

  19. You are welcome.

  20. shamillewharton
    Member

    One other question ... I'm trying to either make my main column width wider or move the main column over a bit to the right ... Any insight? I feel like I've tried everything and I haven't found anything for it in the forums so far.

    My blog is http://akitchensomewhere.com

  21. I don't have a small screen (27"), but still, the new tool only allow me to see a few lines of code and short ones.

    I believe what you're describing here is a bug. Does the CSS show up at only half the usable space? Here is an example: http://cl.ly/OJvG

    I've reported that issue to our developers. While we wait for a response, you should be able to get around it. Try opening another menu item and then click CSS again. In my testing, that made the CSS fill in the entire space it should be using but isn't in some cases.

    Note that I also found this particular issue to be limited to WebKit browsers like Chrome and Safari and the problem doesn't happen in Firefox, and you could get around the problem if you're able to switch to Firefox temporarily.

  22. I'm trying to either make my main column width wider or move the main column over a bit to the right ... Any insight?

    Here is an example to get you started. I increased the overall #wrapper max-width by 200 pixels and changed the #primary width from about 64% to 72%. You can change the numbers until you find a good combination you like.

    #wrapper {
    	max-width: 1154px;
    }
    #primary {
    	width: 72%;
    }

    If you have any additional questions, pelase create a separate, new help request for them.

  23. Thanks designsimply
    Yes I also found that behaviour. I could get around openning a new instance. Nevertheless, I would like to use even longer lines than the full width of the window. That's why I insist so much (too much? :-)) in a resizable window.
    Thanks for your efforts!

  24. Nevertheless, I would like to use even longer lines than the full width of the window. That's why I insist so much (too much? :-)) in a resizable window.

    It's not too much at all. :) It will be up to the developers whether to make a change to widen the CSS editor, but I think it will stay the current size and if they do decide to change it later, it won't be for a while.

    The feedback is really good to hear though! And I have passed along a lot of your feedback already to the team so we can keep it in mind going forward.

    Regarding CSS editing, maybe a good, temporary workaround that you would prefer would be to use a tool like the Live Stylesheets add-on for the Chrome browser. I used to use it extensively before the new CSS editor came out. Here's a link in case you want to check it out:
    https://chrome.google.com/webstore/detail/live-stylesheets/epfcdciapgkgjdjkmijgdekgfmocneid?hl=en

    I never used it to save local CSS (but I think you can), I just used it for previewing small, local CSS changes. When I got a set of CSS I liked, then I would paste it into the CSS editor. The "prettify" button in the add-on is a nice touch.

Topic Closed

This topic has been closed to new replies.

About this Topic