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.

How to change the colors of my theme

13

Answers

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

    There was an error rendering this rich post.

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

    There was an error rendering this rich post.

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

  • 422422 Developer MVP

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

    There was an error rendering this rich post.

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

    @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

    There was an error rendering this rich post.

  • 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

    There was an error rendering this rich post.

  • 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

    There was an error rendering this rich post.

  • 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

    There was an error rendering this rich post.

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

    There was an error rendering this rich post.

  • 422422 Developer MVP
    edited January 2012

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

    There was an error rendering this rich post.

  • daedae
    edited January 2012

    done! padding fixed

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

    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.

Sign In or Register to comment.