1

Topic: [1.4.3] Customising Your Theme

Here's a quick guide on how to customise your theme installation without losing any of them during upgrades.

Method #1: CSS Editing via WordPress Editor

You'll need a web browser with a certain web developers tool, for this guide I shall use Firefox 3.6 with Firebug.

I recommend that you have a basic understanding of Cascading Style Sheets (CSS) for this method. A good site to start is W3Schools.



Step 1: Ensure that Arras Theme is activated and working in your WordPress installation.
http://i44.tinypic.com/m7uozn.png


Step 2: Go to Appearance > Editor. You should see something like this:
http://i42.tinypic.com/r08kyq.png


Step 3: Under the Templates column on the right, select user.css (located at the bottom of the list). You should see something like this:
http://i43.tinypic.com/262r7lz.png


Step 4: Now, in a new tab/window, go to the page that you wish to edit. For this guide, I shall edit the home page:
http://i40.tinypic.com/51c4m9.png


Step 5: Next, click on the Firebug icon located at the bottom of your page. The Firebug tab should pop up.
http://i40.tinypic.com/2zjc19l.png


Step 6: Click on this button to start inspecting the area you wish to edit:
http://i39.tinypic.com/jhc2rt.png


Step 7: Hover your mouse to the area you wish to edit. When you have chosen your desired area, click on it. The border should disappear, and the values in the Firebug tab should change.
http://i44.tinypic.com/2n8mw5x.png


Step 8: You can play with the CSS properties at the Style tab on the right column. For example, I have changed the color of the header:
http://i39.tinypic.com/oh3a6u.png


Step 9: Once you are satisfied with the changes, copy the CSS code of the whole element and paste it in the Editor:
http://i44.tinypic.com/2qvavbc.png
http://i44.tinypic.com/1owwgn.png


Step 10: Save the changes, refresh the page and you have successfully customised your theme!

2

Re: [1.4.3] Customising Your Theme

[Reserved for Method #2]

3

Re: [1.4.3] Customising Your Theme

[Reserved for Advanced PHP Customisation]

Re: [1.4.3] Customising Your Theme

user.css is not on my Template list, all files there are .php.  There is a Style menu underneath but all it contains is style.css.

I am using version 1.4.2 and my website is www.volunteerhere.net.

Thanks

Thumbs up

Re: [1.4.3] Customising Your Theme

It's not in that list, you have to edit it outside WordPress. Either download it via ftp and edit it in a piece of software like notepad and upload it again or via the administration panel of your webhost.

Last edited by extatix (2010-04-12 17:11:09)

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

Thank you so much, I have now found it on my webhost, trouble is when I put code in there and save it everything is fine.  Then I upload it, fine.  The I open the user.css folder and what I put in is now all on the same line with the /* This CSS etc.  And it doesn't change my webpage.  Sorry if this is because of something new and simple, I'm new to this!  Thanks again.

Thumbs up

7

Re: [1.4.3] Customising Your Theme

Take note this guide is for Arras Theme 1.4.3. Older versions might require you to do some extra steps or will not work at all.  neutral

Re: [1.4.3] Customising Your Theme

sweet that's for the guide smile

Thumbs up

Re: [1.4.3] Customising Your Theme

What about a guide how to chage the layout?

Thumbs up

10

Re: [1.4.3] Customising Your Theme

There's already a theme option to change the layout. Why would you need a guide for that?

Re: [1.4.3] Customising Your Theme

And besides, if you want to change widths and placement within the theme you can also use firebug.

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

Nice job with this theme ! But...
... I must be mistaking somewhere...

-> If I want to customize the theme, the easiest way is (for me) to do it through WP admin
-> To do so, I've uploaded an empty user.css in "/www/wp/wp-content/themes/arras-theme"
-> I can then see it in the files list (on step 2)
-> Whatever I define in it, it's not seen as my site doesn't refer to THIS "user.css" but to the one located in "/www/wp/wp-content/themes/arras-theme/css", which is not seen  in the file list of Step 2....
-> So what must I do to get a user.css file that I can edit in WP admin, and that is seen by my pages ?

Many thanks wink

Thumbs up

Re: [1.4.3] Customising Your Theme

The user.css you uploaded isn't 'loaded'. If you want it to work you need to change template.php. Like I've said here: http://www.arrastheme.com/forums/post4885.html#p4885

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

Oh ! of couuuurse !
As we always say... RTFM (for me  wink )
Many thanks, fast answer, and of course it works perfectly...  big_smile

Thumbs up

Re: [1.4.3] Customising Your Theme

Oh, you couldn't know I wrote it there smile

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

Ok, my user.css does not load for some reason.  I have version1.4.3 (I just upgraded it from 1.4.2)  How do I fix it?  Also this code: http://www.arrastheme.com/forums/post4885.html#p4885 does not appear in my template.php.

Last edited by somecut8 (2010-04-30 19:31:35)

Thumbs up

Re: [1.4.3] Customising Your Theme

Your user.css has no rules in it.

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

somecut8 wrote:

Ok, my user.css does not load for some reason.  I have version1.4.3 (I just upgraded it from 1.4.2)  How do I fix it?  Also this code: http://www.arrastheme.com/forums/post4885.html#p4885 does not appear in my template.php.

exactly

i found this piece of code in styles.php under library folder. And it is commented...

Photos from Greece at www.travelphoto.gr

Re: [1.4.3] Customising Your Theme

Quick question, on the live demo on this theme, at the bottom there are two columns titled: "Latest Previews" and "Latest Reviews". I must be as blind as a bat, because I have been crawling around trying to find how you guys pulled off those columns down there. Anyone have any hinters?

Thumbs up

Re: [1.4.3] Customising Your Theme

Those are widgets.

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

Guys i have another problem concernig the editor.. I have chosen the file user.css and i have added some css code smile What i have noticed is that there is limit of characters hmm Why i think something like that ? At first when i was changing the style of my blog there was no problem since all changes worked.. But when i exceeded an unknown number of characters, the code that i added didn't work.. (For example if my code contains 200 caracters and the limit is 150 it won't recognize the 50 characters) What do you suggest me to do ???? hmm

Thumbs up

Re: [1.4.3] Customising Your Theme

Okay, should I be hacking the user.css that comes with Arras? Or should I copy it to a child theme and hack there? I'm confused about when to use a child theme and when not to. I've seen all sorts of advice on how to do a child theme. What exactly is the best way to customize Arras (I"m on WP 3.0.1 and Arras 1.5.0.1)?

Thumbs up

Re: [1.4.3] Customising Your Theme

It's your choice. If you only do css you can do with the user.css, when a new update for Arras gets released you simply copy the user.css and put it back in in the newer version. When you have a child theme you don't have to do anything. Child Themes are (far) better if you add php.

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.

Re: [1.4.3] Customising Your Theme

So you're advising doing a child theme? Should I put user.css there? Or should I just work on the child's style.css? And if I want to hack the php, do I copy them to the child folder? Again, I've seen all sorts of conflicting advice on how to do child themes. I'm sure I could just go for it and hack something together, but I'm trying to get a "best practice" thing going.... smile

Thumbs up

Re: [1.4.3] Customising Your Theme

You can use style.css, user.css isn't necessary.

And no, it's best not to copy php files from the main theme. This is the general idea behind a child theme: http://www.arrastheme.com/forums/topic1 … theme.html

My Arras themed & Arras related site: NullCore.
Please ask questions about Arras on forum, not through mail, thanks.