Theming with Photoshop

jmonroe

I am not the brightest apple on the tree when it comes to writing raw code. I typically have always used Dreamweaver or some sort of wyswyg program. I am wondering if I am able to create a template per say in photoshop...slice it up and use it as a vanilla theme. Has anyone done this before?

Thanks in advance.

422

I have always admired ppl that could do slicing. But I personally think its a little old hat nowadays.

The easiest method is to grab yourself a copy of Dummies Guide to CSS

And start there, as this is the fastest cleanest entry into theming.

jmonroe

I just so happen to have that book and am reading it. I was hoping that I could make it look like I wanted and then break it up but I guess regardless...it's really time to start using CSS more than I do now. Thanks 422.

422

You could give this tut a bash.

http://vanillaforums.org/discussion/comment/154930/

jmonroe

Thanks again 422! Time to get reading and practicing. Need to put the CSS Web Design Dummies book on my nook so I can read at night too.

422

It really is very very easy to customise Vanilla.

Good Luck

jmonroe

I can see that the steps to do so is very easy...my troubles is not knowing CSS and selectors. I really like the montrealtweetup.com page. Thats a nice layout.

whu606

@jmonroe

I was very much a newbie with regards to css before I installed Vanilla.

There are a couple of things I wish I had known from the start:

1. The custom.css file only needs to contain the css to make the specific changes you want.

If you only want to change the colour of the text, that would be the single rule in your custom.css file.

All other rules are drawn from the original Vanilla css file.

1. Firebug for Firefox, or a similar tool, is your best friend when it comes to learning what css rules affect different elements in Vanilla. You can make temporary changes to rules for a page in Firebug, and see immediately what would happen.

I made an annotated_css theme to show beginners a range of common elements that they might want to change in Vanilla.

http://vanillaforums.org/addon/annotated_css-theme

The css file contains annotations for each of the rules.

Between @422 's tutorial, and that theme, you should be able to get cracking quickly.

x00

For general info on css and html htmldog has good books.

jmonroe

WHU606...thanks for the demo. I am going to look over it now and try and learn something. I used to do a lot of programming back in the day but never stuck with it...I mainly dealt with hardware and servers, networking, VoIP systems, etc....I also gained a new hobby in the radio communications field and so programming got put on the back burner. I now regret it. At any rate...I have CSS Web Design for Dummies...as well as CSS The Missing Manual 2nd Edition to read too.

Thanks again.

jmonroe

Got another question for you WHU606...I am going over your custom.css sheet...are things such as .Datalist .Alt and .Item always what the sections called in the templates for Vanilla? or is that what the designer wishes them to be referred to as? Do I just make up my own? Or is there a common name that is used to refer to each section? And if I wanted to make something extreme like montrealtweetup.com site, do I just use CSS still or does that require something else?

whu606

@jmonroe

Those titles are what the original Vanilla designer(s) called them, so you need to use them if you want to change what Vanilla would normally do.

In theory they could be .apples, .oranges etc - it would make no difference.

If you want to change the html layout, you would need to make changes in the default.master.php file.

jmonroe

I have no problem with leaving them as they are...I just needed to make sure so I know. I am trying to learn and didn't know if they were standard or not. Do you know of a reference that would state what all of the titles are that are used in the Vanilla Forum design?

jmonroe

One other question...in working with your annotated css sheet...how do I remove the border around the all discussions box and around inbox?

whu606

@jmonroe

I don't think there is a list of all the elements, but if you use Firebug in Firefox you can easily find anything you are looking for.

Try using Firebug to find the answer to the 'border' question, just for the practice.

If you can't get it, let me know and I'll have a look later.

jmonroe

Sounds good. I notice that under the tab inbox...all the buttons have borders...and under discussions, the all discussions button has it. Also...the search box Go button and Share button for post have a shadow on the text. Driving me crazy. For you...I will open up the dreaded Firefox browser and use Firebug. I typically use Chrome and Inspect Elements but cannot seem to find what I am looking for. :-) I will report back with an update. Thanks.

x00

The problem with changing classes and other selectors, and even to an extent the hierarchy is you could break JavaScript library that uses these selectors.

So I wouldn't say it make no difference. You get a way with changign quite a bit, but knowing what you are doing help, it also helps the the js, is done is n a more agnostic way but that is not away possible, or desirable.

jmonroe

Found it using Chrome...and found it in the css sheet actually...the comment about the shading is on the end of the line.

.Tabs li, .SubTab   {  padding: 5px 8px; display: inline-block; border-radius:3px; background:#ddd;} /*Changes the shading around some of the boxes*/

x00

besides if you are using custom.css you are overriding. style.css, and others.

jmonroe

Thanks for the bit of knowledge x00

jmonroe

Alright...its coming along now. I am getting a better understand as what to change by using Inspect Element...I even added something to change the font that the style.css file controlled. It was bolding the word Share on the button...so I added this to custom.css

input.Button { font-size: 14px; font-weight: normal; }

I still need to know how to do really fancy stuff that will change the whole complete look of the site. Take a look at montrealtweetup.com That is a nice layout. Does css do all of that?

peregrine

There is nothing stopping you from inspecting with firebug or chrome montrealtweetup.com and looking at the .css and for that matter the .js or the html to see what is going on and how they do things. however, some things you might not find if it is done server side. Some things you can find more easily in chrome and some things you can find more easily in firebug, nothing wrong with using both tools.

jmonroe

Thanks for chiming in @peregrine. Much appreciated information.