Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


How to change the colors of my theme

2

Answers

  • Also, is vanillaskins.com your site, 422?

    I feel like Im hijacking my own thread O_O

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

  • 422422 Developer MVP
    edited January 2012

    Yes it is :)

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

    422 Real Estate Australia , now open Check it out

  • 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

  • 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

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

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

  • 422422 Developer MVP

    Feature packed car = vanilla

    422 Real Estate Australia , now open Check it out

  • its not even high on gas!

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

    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.

    RedTwentyFour
  • vanilla can do all that? O_O

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

  • 422422 Developer MVP

    Add an @ before username sends that user a mention.

    @whu606 goodonya thats a lot of work. :)

    422 Real Estate Australia , now open Check it out

  • @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?

  • 422422 Developer MVP
    edited January 2012

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

    422 Real Estate Australia , now open Check it out

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

    422
  • 422422 Developer MVP

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

    422 Real Estate Australia , now open Check it out

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

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

  • 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

  • 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?

  • 422422 Developer MVP

    You may want to read this too.

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

    422 Real Estate Australia , now open Check it out

  • 422422 Developer MVP
    edited 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

    422 Real Estate Australia , now open Check it out

  • 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)

  • 422422 Developer MVP

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

    422 Real Estate Australia , now open Check it out

  • daedae
    edited 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

  • 422422 Developer MVP

    Gimme five mins

    422 Real Estate Australia , now open Check it out

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

  • 422422 Developer MVP
    edited 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 Real Estate Australia , now open Check it out

  • 422422 Developer MVP
    edited January 2012

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

    422 Real Estate Australia , now open Check it out

  • daedae
    edited January 2012

    done! padding fixed

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

    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.

2
Sign In or Register to comment.