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

jmonroejmonroe New Orleans
edited May 2012 in Vanilla 2.0 - 2.8

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.

Best Answer

  • 422422 Developer MVP
    Answer ✓

    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.

«1

Answers

  • 422422 Developer MVP
    Answer ✓

    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.

  • jmonroejmonroe New Orleans

    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.

  • 422422 Developer MVP

    You could give this tut a bash.

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

    There was an error rendering this rich post.

  • jmonroejmonroe New Orleans

    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.

  • 422422 Developer MVP

    It really is very very easy to customise Vanilla.

    Good Luck

    There was an error rendering this rich post.

  • jmonroejmonroe New Orleans

    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.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

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

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

    grep is your friend.

  • jmonroejmonroe New Orleans

    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.

  • jmonroejmonroe New Orleans

    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?

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

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

  • jmonroejmonroe New Orleans

    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?

  • jmonroejmonroe New Orleans

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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

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

  • jmonroejmonroe New Orleans

    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.

  • x00x00 MVP
    edited May 2012

    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.

  • jmonroejmonroe New Orleans

    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*/
    
  • besides if you are using custom.css you are overriding. style.css, and others.

    grep is your friend.

  • jmonroejmonroe New Orleans

    Thanks for the bit of knowledge x00

  • jmonroejmonroe New Orleans

    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?

Sign In or Register to comment.