Title: Easy CSS Editor for Mac Last modified: August 19, 2016 --- # Easy CSS Editor for Mac * [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/) * Typically I edit CSS in wordpress. But I am currently using the ARRAS template which does not allow that. Hence I need to use a CSS Editor. I have never used an editor before. Can somebody recommend me an easy tool for mac? Thank you. Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/easy-css-editor-for-mac/page/2/?output_format=md) [→](https://wordpress.org/support/topic/easy-css-editor-for-mac/page/2/?output_format=md) * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191387) * You need only a _text_ editor. If you don’t want to use the one that is native in OSX, * [text editor for osx](http://www.google.com/#hl=en&q=text+editor+for+osx&aq=f&aqi=g1&oq=&fp=5fd42ee1c422ad25) * [krembo99](https://wordpress.org/support/users/krembo99/) * (@krembo99) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191478) * I am not on the mac, but you can use [FIREBUG](https://addons.mozilla.org/en-US/firefox/addon/1843) or [WEBDEVELOPER](https://addons.mozilla.org/en-US/firefox/addon/60) (if you are using firefox). I heard the stylizer will come to mac soon, so you might check it . anyhow , you might find [these reviews](http://css-tricks.com/reviews-of-mac-css-editors/) helpful * ( @ ClaytonJames : I hope that you will not take that too hard, but I am sure that miacdz knew exactly what he is asking for.posting an answer must somehow, IMHO,have some kind of a solution to the problem, and not leaving it as it was before, which for micadz case ment – still dealing with a TXT with no visual reference) * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191523) * Thanks Krembo. The review is very helpful. I will try out the xylescope. * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191529) * One more question krembo. I am already using firebug …. but that only allows for previewing. I just downloaded xylescope and that is also for previewing. * My problem is that I always edit my templates within wordpress. The arras template however does not allow that. * So I was told to get a css editor, go to my ftp and drag out the css file, edit it and drag it back into ftp. So I downloaded the cSSEdit * This is what I do: – I open the with cSSEdit – I make a basic change (font color)– I save the file on my desktop, drag it back into the ftp – my entire website is messed up * So honestly, I am at wits end and maybe I should just try and find another magazine style template, since I don’t manage to sort this css editing stuff out. * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191536) * > ( @ ClaytonJames : > I hope that you will not take that too hard, but I am sure > that miacdz knew exactly what he/she is asking for..posting an answer must > somehow, IMHO,have some kind of a solution to the problem, and not leaving > it as it was before, which for micadz case ment – still dealing with a TXT > with no visual reference) * Naw.. not at all. Why would I? I’m sure micadz knew exactly what was needed as well. In fact I think the key word in the original question was _editor _. A plain old text editor to edit files. I don’t recall seeing any request for firefox plugins or developers tools in the OP’s issue. I think you just misinterpreted what micadz was asking based on your own experience. As for the visual reference, that would still be the actual website. You just aren’t using the built in WordPress text editor any more. * [@micadz](https://wordpress.org/support/users/micadz/) * Editing css or any file manually takes a little practice, and a little bit of knowledge about what you are changing. Just like notepad works fine for that purpose in windows, the native text editor in OS X works just fine for that as well. Someone with more experience may want an editor with more bells and whistles( hence the link to Google search revealing the large number of variants). I’m not sure why you were offered developers tools that are only capable of edits on the fly in your browser, ( I can’t really speak for stylizer, but hey, two out of three… ) and have absolutely no effect whatsoever on your files. * > So I was told to get a css editor, go to my ftp and drag out the css file, > edit it and drag it back into ftp. So I downloaded the cSSEdit > This is what I do: > – I open the with cSSEdit – I make a basic change (font > color) – I save the file on my desktop, drag it back into the ftp – my entire > website is messed up * You are on the right track. I am of course, assuming that you are in the learning phases, strictly because of the fact that you needed to ask this question at all, so no offense intended. Here is a link straight from the Codex that you may find helpful. * [http://codex.wordpress.org/Glossary#Text_editor](http://codex.wordpress.org/Glossary#Text_editor) * It is also often times possible to edit the files right from your ftp client “ live” and save them in place. That may prove a convenience for you as well if possible. Just make sure you have a good backup first, and you’ll get the hang of it. By the way, you will find a list of text editors for ‘Nix. Mac, and Windows in that link as well. A large number of them are open source and – or free. * Best wishes to you, and don’t give up! * How was that, krembo99? * 🙂 * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191538) * [@micadz](https://wordpress.org/support/users/micadz/) * I just installed ARRAS theme on one of my test servers out of curiosity. The theme has an options menu that may include the item(s) you want to change. It actually adds an “ARRAS Theme” menu in the left side of the dashboard on the bottom. The reason that the style sheets don’t all show in the WordPress theme editor is because they are located in additional directories in the theme folder structure… “css/styles/etc…”. That isn’t usually the case. * If you have not already seen them, take a look at these options in your dashboard before editing manually. * Arras Theme Options: * General * Categories * Navigation * Layout * Design * Reset * You may be able to adjust what you need from there. I think I like that theme. I may mess around with it for a while. * Good luck. * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191542) * Yes, you got that right. I managed to play around with the CSS in the wordpress editor but an external editor is new to me. I did notice the the Arras theme options but they do not serve my purpose. I am using the default mac texeditor now and just need to play around with it I guess. I changed a couple of things already. But when I try to change the background (to match my two other websites) and the font it messes up my entire template. So that is something I need to look into. * ``` /* globals */ body { background-color: #F0F0F0; color: #333; font: 12px 'Lucida Grande',Arial,Helvetica,sans-serif; height: 100%; min-height: 100%; } ``` * I changed it in the above field but strangely enough … that did not work. Ok, I will continue to play around with it. * Thanks for all the help. * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191546) * I managed to change the background color and body font color here: * /wp-content/themes/arras-theme/css/styles/**default.css** * /* globals */ body { background-color: **#F0F0F0**; color: **#333;** font: 12px‘ Lucida Grande’,Arial,Helvetica,sans-serif; height: 100%; min-height: 100%; } * Changing #F0F0F0 to #000 for testing changed the background color to black for me, no problem. Changing #333 to #FFF, also turned the font white in the the body area, on full posts. So, I think you are in the right spot. * If you look farther down around line 161 in default.css you will also find this: * .posts-default .entry-summary, .posts-quick .entry-summary { **color: #666;** overflow: hidden; } * Changing the #666 to the same color you want the fonts in the posts to be, will change the font color under the thumbnails/feature pics on the front page. I tested it and it worked for me. change only the color values, and make sure you refresh your browser after the change. It should work ok. * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191547) * Thanks a lot. In the meantime I have sorted out my problem. Working off the standard text editor seems to be good enough. Managed to do a couple of tweaks already. Now it is just a matter of browsing forums to find what I need. Like how to align the logo and have more white space above and below, etc Thanks again. * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191548) * Glad you got it headed in the right direction. * Best wishes. * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191550) * If you don’t mind …. I managed to put in the logo, but would like it to be more to the right to lign up with the line of the navbar Also, I would like more white space above and below.This is my site : [http://zine.commonpeople.sg/zine/](http://zine.commonpeople.sg/zine/) * [krembo99](https://wordpress.org/support/users/krembo99/) * (@krembo99) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191552) * > How was that, krembo99? > 🙂 * 🙂 Much better . I just sometimes do not like seeing threads with no direct answers 🙂 It causes the thread to be flagged (somehow) as “someone is dealing with it”, that at least for me, a lot of times causes to skip that thread. (same thing with not cahnging to RESOLVED) * As for the micadz problem, I still think a visual editor would be much better for someone who starts CSS.. In fact, His site contains now numerous problems caused by syntax typing errors. * (@ micadz – you should change those …) * for example : default.css * Line 134 `background-attachment:relative; /**-->>> this property can not be in that rule.**/` * Line 157 `margin: 0 auto; width: 958px; background: #FFFFFF repeat-x #CCC; height: 30px; border: 1px solid #cccccc; /**--->>> same problem here with the background**/` * user.css : `Line 2 font-family:'Helvetica,sans-serif; /**--> close the string constant **/` * to change the logo that you wanted : copy this part : * ``` /** START copy from #Header to #Branding **/ background-image: url(http://zine.commonpeople.sg/zine/wp-content/uploads/2009/08/commonpeoplelogo0309.jpg); background-repeat:no-repeat; background-position: left top; /** End copy from #Header to #Branding **/ ``` * from #header to# branding * then add this to branding: (has clearfix hack) `left top;height: 70px; /** Put height of image, or other value **/` * to fix the height by your image . (this will also resolve the space problem you wanted at the header.) * if you want to center the image at the vertical center of the div, (to have space above and below the image, just use * `background-position: center left;` instead of `background-position: left top;` * I would also adjust the clearfix and the header height, maybe using a spacer div and fix bigger height for the #branding height property. And dont forget to delete this : `background-attachment:relative;` * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191553) * Thank you Krembo. * I basically work off stuff I find on the forums … that is how I am trying to learn. So typically I copy/paste codes at this stage. I do use firebug … that is how I find what/where I need to change things. * I did (I hope) all of the above. So now my logo has the space I wanted. But it is still not aligned to the line of the nav bar and now my search is a bit out of place too. * [Clayton James](https://wordpress.org/support/users/claytonjames/) * (@claytonjames) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191555) * > 🙂 Much better . * (Sigh). I feel so… _validated_, now. Like a great weight has been lifted. Thank you. * > I still think a visual editor would be much better for someone who starts CSS.. * I think you are simply and un-necessarily insisting (for whatever reason) on blurring the lines of distinction between the creation of layout and the simple editing of files (which was what the OP asked for in the first place), for someone who only wishes to edit files, and probably does not yet grasp for the most part,- which I think you probably already realize full well- the syntax and structure of css, and the relationship between what “works” and what “works and validates”. * > …I just sometimes do not like seeing threads with no direct answers * A) you should probably get used to it. B) lets pick that apart for a minute. * **OP:** _” Typically I edit CSS in wordpress… …I have never used an editor before. Can somebody recommend me an easy tool for mac?” * **ME:** _“You need only a text editor. If you don’t want to use the one that is native in OSX,…”_ * I don’t see a whole lot of room for extrapolation there. That’s a pretty concise answer to a very direct question. * **Yes. I _can_ recommend one. There is a free one already on your Mac (that is what “native” means) **. If you want something more… …here is a Google link to dozens of editors for mac. * Who the heck (besides you) said anything about “visual editors” and “starting css”? Perhaps you should go back and actually read the original post again. * _“Typically I edit CSS in wordpress. But I am currently using the ARRAS template which does not allow that. Hence I need to use a CSS Editor. I have never used an editor before. Can somebody recommend me an easy tool for mac? Thank you” * The term “CSS” could have just as easily been “.html” “.php” or “.htaccess” and the meaning of the question would _still_ be the same. It just happened to be a style sheet that got mentioned. Make more sense? * Whatever… Have fun! * 🙂 * `` * Thread Starter [micadz](https://wordpress.org/support/users/micadz/) * (@micadz) * [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/#post-1191556) * sorry guys.. it was really not my intention to start this. I am a total rookie, so I am just trying to get some help. Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/easy-css-editor-for-mac/page/2/?output_format=md) [→](https://wordpress.org/support/topic/easy-css-editor-for-mac/page/2/?output_format=md) The topic ‘Easy CSS Editor for Mac’ is closed to new replies. ## Tags * [css editor](https://wordpress.org/support/topic-tag/css-editor/) * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/) * 22 replies * 3 participants * Last reply from: [micadz](https://wordpress.org/support/users/micadz/) * Last activity: [16 years, 9 months ago](https://wordpress.org/support/topic/easy-css-editor-for-mac/page/2/#post-1191566) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics