How to change the colors of my theme

dae · January 2012

Also, is vanillaskins.com your site, 422?

I feel like Im hijacking my own thread O_O

RedTwentyFour · January 2012

be happy, you apparently hijacked it back from us ;)

422 · January 2012

Yes it is :)

But vanillaskins is merely a custom paint job for a feature packed car ;)

dae · January 2012

Well, I said I didnt know what I would change but..

Im not sure I want to use the embed plugin...Here I'll show you: http://battleshout.net/ is the site Im working on (I know, none of the links work) I'm mainly making it for practice...But I could probably make the forum header look like the header on my homepage Im guessing? If I did that, I could link to the forums from my homepage, and it would still be pretty streamlined

Thoughts? You guys are a lot more CSS savvy than I am

dae · January 2012

422, I love it! My ultimate goal in life is to set up a site like that...I'm a long way off I think, again Im not very CSS savvy..I can write static html pages all day long, and I can hold my own with photoshop..but tying that all together into..something..like..THAT..whew, I dont know if I can yet. Step one, I guess I need to learn how to make themes first LOL

dae · January 2012

feature packed car? Wordpress with a theme made by yours truly?

dae · January 2012

er, not yours truly..well, you know what I mean ><

422 · January 2012

Feature packed car = vanilla

RedTwentyFour · January 2012

its not even high on gas!

whu606 · January 2012

dae

I'm in a similar position to yourself - I'm a hobbyist rather than a professional.

I've been fiddling with a theme for my form based on the Clean theme, and have been annotating the changes in the css file to show what lines change what parts of the pages, with the aim of helping out people in our position who might like to try creating a theme but aren't sure where to start.

I'm hoping to have it finished today, so will upload it later as annotated css theme.

dae · January 2012

vanilla can do all that? O_O

...wow, ok, now Im sold! and Whu606, Im looking forward to seeing your work!

422 · January 2012

Add an @ before username sends that user a mention.

@whu606 goodonya thats a lot of work. :)

dae · January 2012

@422 (see? I tried it!) is there a way to plug an image into my header? Ive looked through the files, and I cant find where it would go...I know I sound like I'm slow, I'm just not that familiar with Vanilla >< I could insert it as a background image in CSS couldnt I? or a different way?

422 · January 2012

Use css. The div id/class is #Header from recollection. On ipad so cant help anymore tonight is very late

dae · January 2012

Im gonna have to hire @422 as my personal mentor or something. I'll get your paper every morning and make coffee! LOL

422 · January 2012

Lots of good ppl on here with bags more experience with vanilla than me, we are all in it to help :)

whu606 · January 2012

@dae I've uploaded the theme here: http://vanillaforums.org/addon/annotated_css-theme-1

As far as possible, I tried to note in the css file what changes I made and why/what happened.

Still a couple of glitches, but it works.

Hope it helps.

dae · January 2012

Right on! I've uploaded that to my server; Im going to dig in and see if I can copy some colors from diablo fans! I'll cross my fingers and let you know how great it is here soon

dae · January 2012

ok, slight issue - which should be easy....I'm trying to use a background image, but I dont see any changes....I'll show what I did...

I uploaded my image to the images folder....and I added this code above everything else...

body {background: url('images/diablo_bg.jpg') no-repeat center center fixed;

And nothing happens...am I getting the path wrong or something else?

422 · January 2012

You may want to read this too.

http://vanillaforums.org/docs/themeguide/design

422 · January 2012

@dae

Ok your issues are quite easy to solve.

DO NOT edit the style.css file that comes bundled with vanilla.

Instead in your themes directory, create a new theme and lets call it diablo.

Create a new folder called design

in that new folder create a blank file called custom.css

.....

Now in the theme folder ( diablo ) create a file called about.php Put this code in it.

<?php if (!defined('APPLICATION')) exit();
/*
Copyright 2008, 2009 Vanilla Forums Inc.
This file is part of Garden.
Garden is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Garden is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with Garden.  If not, see <http://www.gnu.org/licenses/>.
Contact Vanilla Forums Inc. at support [at] vanillaforums [dot] com
*/

/**
 * An associative array of information about this application.
 */
$ThemeInfo['diablo'] = array(
   'Name' => 'diablo',
   'Description' => "Diablo Theme.",
   'Version' => '1',
   'Author' => "Dae",
   'AuthorEmail' => 'youremail@email.com',
   'AuthorUrl' => 'http://yourwebsite.com'
);

Now begin editing custom.css

In dashboard > change theme to Diablo

now using firefox get the firebug plugin and view your forum with new theme. Right click any element and select INSPECT ELEMENT and begin customising custom.css accordingly

So in your new theme folder called diablo you should have...

a folder called design and about.php file

now you can begin adding other stuff, and folders. ALWAYS work on your custom theme folder. The file structure within your theme replicates that and in some cases supercedes the file structure of vanilla, so you always have a fallback position.

Easiest thing to do, is copy default folder to localhost, rename it diablo and do the above edits and upload to themes directory

dae · January 2012

Heh, already there! well, almost - I'm doing just what that page tells me to do (got the theme installed, about.php changed, digging into the css file now)

422 · January 2012

have changed stuff since you replied to above post, good luck

dae · January 2012

@422, if you're REALLY bored and have some free time, can you peek at code on my forums? just for the banner....I feel like I've coded it properly, but I don't see anything ><

I can assure the Vanilla gods that once I get started, I'll be okay...Im not always high maintenance lol

422 · January 2012

Gimme five mins

dae · January 2012

I promise you, all of my stupid questions will pay off, I'll be a vanilla dev soon enough ^_^

422 · January 2012

ok.

.Banner {
    height: 100px;
    padding: 10px;
    position: relative;
    text-align: left;
    width: 968px;
    background-color: #000;/*so you can see the bugger*/
    margin: 0 auto;/*centers the div*/
}

you can also add: background:url('images/mybanner.jpg') blah blah blah

be back on later, I have a site to create !

422 · January 2012

lose padding:10px above or change to: padding:10px 0px 10px 0px; shortcuts to padding:10px 0px;

dae · January 2012

done! padding fixed

whu606 · January 2012

dae - realised that the theme I put up, whilst annotated, was horribly confusing.

I've redone it, with just the css needed to make the basic changes to the default theme.

Howdy, Stranger!

Categories

In this Discussion

How to change the colors of my theme

Answers

body {background: url('images/diablo_bg.jpg') no-repeat center center fixed;