[Documentation] MyNewTheme for Noobs

422

This should get those started doing custom themes. Just download this zip file.

Unzip it.

Upload the folder intact to your vanilla forums > themes folder.

Goto dashboard. Select this theme.

Then you can start customizing it.

Have fun.

Download the Zip

422

I have created a sample forum here >> http://vanillaskins.com/sample/

At the moment the custom.css is blank. If you right click the forum, and view the custom.css you will see what we are doing as we customise it.

Feel free to steal the custom.css file ( I will try and add notes so you can keep up )

DO NOT ask for this that and the other, this is a general live tutorial, that you can dip into at any time. As I make major changes I will update this thread.

To start the tutorial >> download the Zip above in POST 1. and follow the instructions.

Please do not reply to this thread, instead just click LIKE that way I know people are using it, and I will continue to add custom css rules and explanations.

422

Lesson 1 , 2 , 3 , 4 , 5

/*lesson 1 - lets set the page scroll  y axis so that we dont get page resetting as we move from page to page */
html {
    overflow-y: scroll;
}

/*lesson 2 - change top header from blue to another color */

#Head { background: none repeat scroll 0 0 #f12b63; }

/*lesson 3 - lets make the forum 980px wide and centre ut */

body { width: 980px; margin:0px auto;

/*lesson 4 lets put a border around it so we can see what we are playing with */

    border:1px solid #212121;
/*lets give the forum bg a color*/
    background-color:#dedede;
    }
/*lesson 5 lets give the actual forum a background color of white */
    #Frame {background-color:#fff;}

whu606

Good idea!

Not pushing my own stuff, but a while ago I uploaded something similar, an annotated_css theme that marks out the typical changes users might want to make to their forum.

422

Lessons 6 , 7 , 8 , 9 , 10

/*lesson 6 lets style those bloody horrible blue BG's on the home page of the forum */
    .MessageForm, .Tabs, .Headings {
    background: none repeat scroll 0 0 #fff;
    border-bottom:1px solid #212121;
    }
/*lesson 7 lets sort out the background behind Test Discussion one */
    .Mine {
    background: none repeat scroll 0 0 #fff;
    }
/*lesson 8 change bottom border of Mine discussions */
    .DataList .Item {
    border-color: -moz-use-text-color -moz-use-text-color #f12b63;
    }
/*lesson 9 lets change the style of the category pane in right hand side menu*/
    .Box {
    background: none repeat scroll 0 0 #4bc1ca;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    }
/*lesson 10 lets change the Box h4 color */
    .Box h4 a{
    color:#fff;
    }
    /*add hover effect for this as it is a link*/
    .Box h4 a:hover{
    text-decoration:underline;
    }

jungica

Useful! Thanks. Waitin for jquery technics...

Homebrew_Korea

Great idea!

422

Lesson 11 , 12 , 13 , 14 , 15

/*lesson 11 need to sort the UL within the category ( sidebar ) */
    .PanelInfo .Active {
    margin-bottom:2px;
    border-bottom:1px solid #212121;
    }
    .PanelInfo li {
    background: none repeat scroll 0 0 #f0f0f0;
    border-bottom:1px solid #212121;
    }
    .PanelInfo li a {
    color:#212121;
    }
    .PanelInfo li a:hover {
    text-decoration:underline;
    }
/*lesson 12 lets style all discussions and my discussions buttons */
    .TabLink, .TabLink:link, .TabLink:hover, .TabLink:active, .TabLink:visited {
    border:1px solid #212121;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    }
/*lesson 13 lets sort the bg colours of tablinks and hovers*/
    .TabLink, .TabLink:visited, .TabLink:active {
    background: none repeat scroll 0 0 #fff;
    }
    .TabLink:hover {
    background: none repeat scroll 0 0 #dedede;
    }
/*lesson 14 lets make notification bubbles round and style them  this is very very BASIC you may need to tweak to suit*/
    .Tabs li a span {
    background: none repeat scroll 0 0 #f12b63;
    border-radius:14px;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    -o-border-radius:14px;
    color:#fff;
    padding:3px 6px;
    }
    .Tabs li a span:hover {
    background: none repeat scroll 0 0 #4bc1ca;
    }
/*lesson 15 lets do the same to the count bubbles */
    .Count {
    background: none repeat scroll 0 0 #f12b63;
    border-radius:14px;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    -o-border-radius:14px;
    }

422

Please dont fire off questions to me. I will not answer them, if you cannot read post 1 and 2. Then really customisation is the least of your worries. Anyhoo, check out the custom.css on the demo forum. You will see I have coded background-image so you can see how this is done.

I will continue customisation and tutorials.

422

Lesson 16 , 17 , 18 , 19

/*lesson 16 Howdy Doody Stranger */
     .Box h4 {
     color:#fff;
     }
     .Box p {
     color:#000;
     }
/*the colors above are just so you can see what happens this isnt a tutorial for colorscapes and UI and UX merely a tut */
/*lesson 17 the popup login doodah*/
    div.Popup h1, div.Popup h2 {
    background: none repeat scroll 0 0 #f12b63;
    border-bottom:3px solid #212121;
    }
    
/*lesson 18 lets change popup border color and style*/
    .Border {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);/*0.5 sets opacity*/
    border-radius: 0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    }
/*lets change the pesky X style on the popup */
    a.Close {color:#fff;}
    a.Close:hover {color:#000;}

/*lesson 19 lets change the YELLOW new post to something else*/
    .DataList .Meta strong {
    background: none repeat scroll 0 0 #f12b63;
    color:#fff;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:1px;
    }

422

Just so you know, each post is handcoded as we go. As with all things, final versions will differ. So keep referencing the custom.css file on the demo forum.

422

Lesson 20 , 21 , 22 , 23

/*lets start styling some of the buttons these may need tweaking from Chrome , FF and Internet Explorer*/
/*lesson 20 Lets start with buttons that aint buttons , these chnages now over ride any tablink changes we have made previously*/

    .TabLink,.TabLink:link,.TabLink:hover,.TabLink:active,.TabLink:visited {
   margin: 0;
   border: 1px solid #212121;
   border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
   background: #efefef;
   display: inline;
   font-weight: normal;
   color: #212121;
   text-decoration: none;
   padding: 5px 10px;
    line-height: 2.6;
    white-space: nowrap;
    text-shadow: 0 1px 0 #FFFFFF;
    }
    .TabLink:hover {
       background: #dedede;
       text-shadow: 0 1px 0 #FFFFFF;
    }
    .Active .TabLink {
       background: #fff;
       color: #f12b63;
       text-shadow: 0 1px 0 #FFFFFF;
    }
/*lesson 21 the big button */
    a.BigButton {
   text-align: center;
   display: block;
   cursor: pointer;
   margin: 0 0 10px;
   font-size: 15px;
   font-weight: bold;
   padding: 8px 0;
    background: #dedede;
    background:-webkit-gradient(linear, center bottom, center top, from(#dedede), to(#dedede));
    background:-moz-linear-gradient(top, #dedede, #dedede);
    -pie-background:linear-gradient(top, #dedede, #dedede);
    background:linear-gradient(top, #dedede, #dedede);
   color: #212121;
    text-shadow: 0 1px 0 #fff;
   border: 1px solid #212121;
   border-radius: 0px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  
   }
    a.BigButton:hover {
   color: #fff;
   background: #f12b63;
   border: 1px solid #f12b63;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; 
    text-shadow:none;
    }
    a.BigButton:focus {
   background: #4bc1ca;
   border: 1px solid #4bc1ca;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  
    }
/*so what we have done, is get rid of border radii, and box shadows. Set the gradients to have no range */

/*lesson 21 lets change font family*/
    body {
    font-family: tahoma,sans-serif;
    }
/*lesson 22 the Start a new discussion buttons */
    a.Button,
    .Button {
    cursor: pointer;
    margin: 0;
    font-size: 11px;
    padding: 4px;
    background: #dedede;
    background:-webkit-gradient(linear, center bottom, center top, from(#dedede), to(#dedede));
    background:-moz-linear-gradient(top, #dedede, #dedede);
    -pie-background:linear-gradient(top, #dedede, #dedede);
    background:linear-gradient(top, #dedede, #dedede);
    color: #212121;
    text-shadow: 0 1px 0 #fff;
    border: 1px solid #212121;
    border-radius: 0px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none; 
    white-space: nowrap;
    }
    .Button:hover {
       color: #f12b63;
       border: 1px solid #f12b63;
    }
    .Button:focus {
       background: #fff;
       color:#4bc1ca;
    }
/*what we have done is match these to BigButton styling */
/*lesson 23 lets get these labels tidied up on discussion page ( new post ) and the form itself*/
    #DiscussionForm label {
    color: #212121;
    }
    #DiscussionForm form {
   border-radius: 0px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   -o-border-radius: 0px;
   background: #fff none repeat scroll 0 0;
   border: 1px solid #aaaaaa;
   margin: 0;
   padding: 20px;
}

422

Last Lesson of very basic custom.css Lesson 24

/* eww the profile bit looks dreadful, lets sort it out*/
/*lesson 24 profile customisation*/

/*we can prefix styles in here with the page ID but be careful, however doing this means we can style on the fly across multiple profile pages*/

    #dashboard_profile_index .Box,#dashboard_profile_activity .Box,#dashboard_profile_discussions .Box,#dashboard_profile_comments .Box, #dashboard_profile_notifications .Box{
    background: none repeat scroll 0 0 #fff;
    border:1px solid #212121;
    color:#212121;
    }
    #dashboard_profile_index .PanelInfo li,#dashboard_profile_activity .PanelInfo li,#dashboard_profile_discussions .PanelInfo li,#dashboard_profile_comments .PanelInfo li, #dashboard_profile_notifications .PanelInfo li{
    background: none repeat scroll 0 0 #fff;
    }
    #dashboard_profile_index .PanelInfo,#dashboard_profile_activity .PanelInfo,#dashboard_profile_discussions .PanelInfo,#dashboard_profile_comments .PanelInfo, #dashboard_profile_notifications .PanelInfo{
    border-bottom: 1px dashed #212121;
    border-top: 1px solid #fff;
    }

Ok now I have real work to do, to earn a crust. If you would like specific information on any parts of this custom.css tutorial ONLY then ask away, glad to help.

In reply to @whu606 this thread is merely to help otehrs as they go, this doesnt detract from your tut. Hopefully, it may enhance certain aspects.

422

Following on from conversation here Custom Icons for categories. This code handles the css.

Someone else will need to do the core changes so that category name becomes icon type.

Here you go anyway, very basic code.

/*custom icon for categories */
.DataList .ItemContent {
position:relative;/* set so we can position category icon in exact position*/
}
.DataList a.Title {
margin:0px 0px 0px 44px;
}
.DataList .Meta {
margin:0px 0px 0px 44px;
}
.Meta span .Category {
position:absolute;
left: 0px;
}
.Category {
background: url('http://placehold.it/32/fff')no-repeat scroll 0 0 transparent !important;
width:32px;
height:32px;
position:absolute;
top:6px;
border:1px solid #212121;
}

422

Probably a more graceful fix is:

#vanilla_discussions_index .DataList .Meta {
margin:0px 0px 0px 44px;
}
#vanilla_discussions_index .DataList .ItemContent {
margin:0px 0px 0px 44px;
}
#vanilla_discussions_index .Meta span .Category {
position:absolute;
left: 0px;
}
#vanilla_discussions_index .Category {
background: url('http://placehold.it/32/fff')no-repeat scroll 0 0 transparent !important;
width:32px;
height:32px;
position:absolute;
top:6px;
border:1px solid #212121;
}

DanielSchulzJackson

You were writing this post on my wife's and my one year anniversary! (Feb 26) Cheers! It appears very useful.

peregrine

He's omniscent! and prescient.

422

Nearly 25 years married here ......less for murder !

DanielSchulzJackson

Less for murder? S:-|