WordPress › Support » Easy CSS Editor for Mac

micadz
Member
Posted 2 years ago #

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.
ClaytonJames
Member
Posted 2 years ago #

You need only a text editor. If you don't want to use the one that is native in OSX,

text editor for osx
krembo99
Member
Posted 2 years ago #

I am not on the mac, but you can use FIREBUG or WEBDEVELOPER (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 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)
micadz
Member
Posted 2 years ago #

Thanks Krembo. The review is very helpful. I will try out the xylescope.
micadz
Member
Posted 2 years ago #

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.
ClaytonJames
Member
Posted 2 years ago #

( @ 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

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

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?

:-)
ClaytonJames
Member
Posted 2 years ago #

@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.
micadz
Member
Posted 2 years ago #
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.
ClaytonJames
Member
Posted 2 years ago #

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.
micadz
Member
Posted 2 years ago #

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.
ClaytonJames
Member
Posted 2 years ago #

Glad you got it headed in the right direction.

Best wishes.
micadz
Member
Posted 2 years ago #

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/
krembo99
Member
Posted 2 years ago #
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;
micadz
Member
Posted 2 years ago #

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.
ClaytonJames
Member
Posted 2 years ago #

:-) 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!

:-)

</incredible waste of time on non-issue>
micadz
Member
Posted 2 years ago #

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.
ClaytonJames
Member
Posted 2 years ago #

Not a problem... you are in the right place... don't feel that way at all.
It's just semantics, and everything has a learning curve.

Just whatever you do.. DON'T GIVE UP! It gets easier!! And more fun, too.

:-)
krembo99
Member
Posted 2 years ago #
for the sake of this thread, and because this

it was really not my intention to start this.

and especially this

</incredible waste of time on non-issue>

is also true on my part I will ignore cheap sarcasm

(Sigh). I feel so... validated..

and all the rest,and go on with micaz.

so , what is going on on your css right now, is that (although the poster´s opinion) a non valid css WILL make trouble.
Especially when the errors are syntax...
In order to get things right, you must follow what I wrote before .
Right now your css does not look the same like I told you.
(I will try explain your errors ..)
right now ,your #branding look like this :

{ width: 960px; left top;height: 80px; margin: 0 auto; }

if you look carefully, you will see that left top is a property with no rule attached...
it should have a rule, like background-position in front of it.
(it would not happen with a visual editor)
and also, you left the background properties on the #header, so of course it would not be positioned right.

you left the properties on header, which should be moved.

your #header should look like so :
```
#header
{
	background: #FFFFFF;
}
```
and your #branding like so:
```
#branding
{
	background-image: url(http://zine.commonpeople.sg/zine/wp-content/uploads/2009/08/commonpeoplelogo0309.jpg);
	background-repeat: no-repeat;
	background-position: center left;
	width: 960px;
	margin: 0 auto;
	height: 80px;
}
```
or even better
```
#branding
{
	background: url(http://zine.commonpeople.sg/zine/wp-content/uploads/2009/08/commonpeoplelogo0309.jpg) no-repeat center left;
	width: 960px;
	margin: 0 auto;
	height: 80px;
}
```
if you will do that, it would work.

further more, you MUST fix the error on line 156 on default.css

from:
```
#nav-content
{ margin: 0 auto; width: 958px; repeat-x #CCC; height: 30px; border: 1px solid #cccccc; }
```
to:
#nav-content
```
{
	margin: 0 auto;
	width: 958px;
	border: 1px solid #CCCCCC;
	height: 30px;
}
```
you see, you have again a problem of a property with no rule.

repeat-x #CCC

was left behind from some background-property, and now it causes errors.

(BTW - your SF menu was not working at the time of inspection..)
micadz
Member
Posted 2 years ago #

Wah it's looking great. Thank you very much!

Sorry for my ignorance krembo, but I only started using wordpress not so long ago. I have never used css before and am basically working off forums. The mistakes you highlighted are codes which I copied in from forums. Since I don't fully understand css at this stage, it's a lot of trial and error.

As I mentioned I do use firebug to try out changes ... but I only found out about Firebug a couple of days ago so I am still trying to get the hang of it.

There are still a couple of 'major' changes i need to make but you have helped me a lot already and I don't want to take up more of your time. Thanks again for the valuable explanations. I am learning a lot from that.

Enjoy your Sunday.
krembo99
Member
Posted 2 years ago #

Sorry for my ignorance krembo
there is no need to be sorry for anything, nobody is born with the gift of knowing how to css :-) we all have to learn, and also my own learning process was not so different from yours.

... but I only found out about Firebug a couple of days ago so I am still trying to get the hang of it.

firebug is much more complicated than only css, and can be frightening.. it is also ued to find errors in scripts, and general de-bugging.
if you want ,Try also the other add-on I wrote at the first post, it helped me a lot at the Beginning.

I must emphasize though , that my own learning curve just went sky-high when I started to use
<bold>visual css-editors</bold>
. with the aid of those, you can do LIVE changes, see them live on the web page as visual reference, adjust change everything really quickly, and LEARN at the process, because you SEE what is happening each time.
FOr example, to find your errors took me exactly half a minute, and to fix them another one minute. and mind you - I am no css guru. Just using the right tools.
With those tools , I am able to construct entire templates in virtually minutes, thing that with a text editor would take me hours if not days.

There are still a couple of 'major' changes i need to make but you have helped me a lot already and I don't want to take up more of your time.

No problem at all, if you want to make those changes you can post them here and I will see if I can manage to help you...
That is after all why all the forum volunteers are here , trying to help people on the forums with various problems.
micadz
Member
Posted 2 years ago #

Yeah, I downloaded Xyle Scope and that one looks dope. Right now I manage to inspect fields in firebug and make changes and then do the same in css ... but finding errors, I still have to use it a bit more. But I like the concept that I can visualize the changes with firebug before I actually implement them.

The other thing I would like to change is the slideshow feature. I would like to make it the full width of the template, pushing the second column down. Something like this layout: http://designmind.frogdesign.com/blog/

Not sure if that can be done.
krembo99
Member
Posted 2 years ago #

well.. that will require a bit more ..
Your theme is configured in such a way that the featured gallery and the sidebar positioned at the same level, meaning they do not share divs
The feature is inside content and the sidebar is in primary.
to do what you want, one of them must move.
there are many ways to achieve that, but IMHO , the best one would be to take out the feature and put it above the content area in it´s own div, OR take the primary sidebar and locate it BELOW the featured, giving thus the featured 100% width (and all it´s descendents)
Mind that those changes could change a lot on your page, because of the "C" in CSS (cascading properties)
micadz
Member
Posted 2 years ago #

Yeah that's what I thought. I am pretty happy with the layout the way it is ... my editor wanted what I described above. I will just need to talk him out of it .... especially cuz of my limited (and his non existent ) coding skills. Haha. Thanks again.

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Easy CSS Editor for Mac (23 posts)

Topic Closed

About this Topic

Tags

Code is Poetry