Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
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.
Tagged:
0
Best Answer
-
422 MVP
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.
There was an error rendering this rich post.
0
Answers
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.
There was an error rendering this rich post.
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.
You could give this tut a bash.
http://vanillaforums.org/discussion/comment/154930/
There was an error rendering this rich post.
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.
It really is very very easy to customise Vanilla.
Good Luck
There was an error rendering this rich post.
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.
@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:
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.
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.
For general info on css and html htmldog has good books.
grep is your friend.
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.
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?
@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.
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?
One other question...in working with your annotated css sheet...how do I remove the border around the all discussions box and around inbox?
@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.
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.
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.
grep is your friend.
Found it using Chrome...and found it in the css sheet actually...the comment about the shading is on the end of the line.
besides if you are using custom.css you are overriding. style.css, and others.
grep is your friend.
Thanks for the bit of knowledge x00
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?