Corporate Blue

Here is a business style I designed. I used allot of the default vB colors and graphics, but in the end I think it all worked out. I have added some rollover buttons on the left side of the forum.

DEMO

1. Open your ftp client to your server. Go to your forum's images folder, open it, and create a styles folder.
2. Next, upload the "corporateblue" folder via FTP to your server, into your forum's styles folder, so that your image path is images/styles/corporateblue/buttons, for example.
3. After you've uploaded the folder, open your admin control panel on your forum, and import the xml file, by going to Styles & Templates > Download / Upload styles > Import Style XML File.
4. Click on the Browse button, locate the corporate-blue.xml file, and double-click it so it loads in that box, then hit the Import button.

Now open the folder labeled "Upload to forum root" and upload the file in that folder to your forum root.

That's it!

How to edit your buttons in the side column.

1. Go into adminCP | Styles & Templates | Style Manager | Edit Templates | Forum Home Templates | Forumhome.
2. Now below the $navbar you will see the following:

PHP Code:

<div id="menu2">
                        <ul>
                                <!-- CSS Tabs -->
<li><a id="current" href="http://www.YOURSITE.com">YOUR SITE</a></li>
<li><a href="Link 2">Button 2</a></li>
<li><a href="Link 3">Button 3</a></li>
<li><a href="Link 4">Button 4</a></li>
<li><a href="Link 5">Button 5</a></li>
<li><a href="Link 6">Button 6</a></li>

                        </ul>
                </div> 


This is where you edit your buttons. I have a sample one done for you to see how to do it.


To add a new button just add this line above the </ul> tag:

PHP Code:

<li><a href="Link 2">Button 2</a></li> 


I hope you enjoy this style.

Thanks
Chris

[mac27]

Originally Posted by StreetTriple

thanks a lot!
Can you give me a .psd files of a "button" images (Forum, usercp, memberlist, calendar...etc) ?
I want to translate it in a italian lenguage!


Another question:
How i can center links in a left box in forumhome?
When i have modified the standard links, the new links are align to right... and i can't move it in any mode...

There is no PSD. The buttons in the navbar are css designed. So the text should show up in your language.

As far a aligning the links in the sidecolumn look in the Main CSS area of the style. Then scroll to the very bottom and you will see the settings for doing that in the CSS.

Originally Posted by Player-63

Very nice style, Installed

Thanks!

[StreetTriple]

Originally Posted by mac27

There is no PSD. The buttons in the navbar are css designed. So the text should show up in your language.

Are you shure?
In the MISC folder, there are all buttons presents in the navbar....
How i can (or where) change it?

[mac27]

I apologize. I was confused with another one of my styles. DOH!

I do not have a PSD file for those buttons. I am leaving on vacation in a few hours, but when I get back I will upload a blank button for you so you can create your own buttons. Please hang tight with me.

[StreetTriple]

ok thank you! i wait your answer!

[mac27]

OK try this button and see how it works for you.

[Hache]

the image in the left boxes doesnt seem to work

http://www.fsfootball.com/forums/index.php?styleid=2

i uploaded it to forum root, but no luck!

[mac27]

Originally Posted by Hache

the image in the left boxes doesnt seem to work

http://www.fsfootball.com/forums/index.php?styleid=2

i uploaded it to forum root, but no luck!

That is because the CSS code is setup for forums located at www.yoursite.com/forum and your forum is at www.yoursite.com/forums

Do this and it will get it fixed for you.

Goto into adminCP > Styles and Templates> Style Manager> Corporate Blue> Edit Main CSS

Now scroll to the very bottom of the page and look at the bottom box located in the box labeled Additional CSS Definitions.

In the bottom box replace all the code with this:

PHP Code:

/* ***** Postbit Legacy layout ***** */
.pbit {
padding-left: 1px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 2px;
background-color: #F4F3FE;
border-top: 1px solid #3B5485;
border-right: 0px solid #F4F3FE;
border-left: 0px solid #F4F3FE;
border-bottom: 1px solid #3B5485;
margin-bottom: 5px;
}

/* ***** Sidecolumn ***** */


ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

img {
    border: none;
}



#menu2 {
        width: 200px;
        margin: 0px;
        border-style: solid solid none solid;
        border-color: #395384;
        border-size: 1px;
        border-width: 1px;
        }

#menu2 li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu2 li a:link, #menu2 li a:visited {
        color: #3688BA;
        display: block;
        background:  url(forums/menu2.gif);
        padding: 8px 0 0 40px;
        }

#menu2 li a:hover, #menu2 li #current {
        color: #3688BA;
        background:  url(forums/menu2.gif) 0 -32px;
        padding: 8px 0 0 42px;
        } 


Just click save and all should be good.

[Hache]

thanks for your help. I did that but it doesnt seem to have worked

[mac27]

I will look more into this as to why your site is not showing the buttons. Look for an answer tomorrow night.

[Pete C]

I've finally got this working properly on my test board. I too had problems making the graphics appear for the left side boxes. Since I also use the directory forums (not forum) I edited the Main CSS as suggested, but still to no avail. I eventually got the graphics to display by using their absolute URL rather than the relative URL shown in the update.
Maybe this will work for anyone else who's still having problems:

/* ***** Postbit Legacy layout ***** */
.pbit {
padding-left: 1px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 2px;
background-color: #F4F3FE;
border-top: 1px solid #3B5485;
border-right: 0px solid #F4F3FE;
border-left: 0px solid #F4F3FE;
border-bottom: 1px solid #3B5485;
margin-bottom: 5px;
}

/* ***** Sidecolumn ***** */


ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

img {
    border: none;
}



#menu2 {
        width: 200px;
        margin: 0px;
        border-style: solid solid none solid;
        border-color: #395384;
        border-size: 1px;
        border-width: 1px;
        }

#menu2 li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu2 li a:link, #menu2 li a:visited {
        color: #3688BA;
        display: block;
        background:  url (http://yourdomain.com/forums/menu2.gif);
        padding: 8px 0 0 40px;
        }

#menu2 li a:hover, #menu2 li #current {
        color: #3688BA;
        background:  url (http://yourdomain.com/forums/menu2.gif) 0 -32px;
        padding: 8px 0 0 42px;
        }

Simply change the text in red to the full URL where menu2.gif is located.