Suite Style - Avenger Blue Style by TheLastSuperman

Introducing Avenger Blue

A vBulletin 4.2.1/4.2.2 (Confirmed working on 4.2.3! *Simply select ignore style version when installing style) Suite style from www.innovationbyinstinct.com including some of these features:

• The forumbits, search and other areas have a mouseover hover effect.
• Custom statusicons for forum_new and forum_old.png along with custom pagination and other image replacements.
• Custom toplinks i.e. "Welcome, Username Notifications etc etc" location.
• Custom Login area w/ hover effects.
• Custom Sidebar collapse image replacements etc.
• CMS Widget and Forum & Blog Sidebar styles match 100%.
• CMS, Forum, Blog compatible this is a Suite style and can also be used on Forum Classic naturally.
• Fluid and Fixed Width available!
• Perfect style for resolutions up to 1920 x 1080 or larger!

Demo?
Sure! View Avenger Blue Fixed Width OR Fluid Width Demo.
*Please Note: The Demo site has a custom CMS Layout in place therefor normal CMS layout sites will see a CMS/Articles page resembling the screenshot.

Questions and Answers

Q. So what do we have here?
A. Well that's simple! It's a dark blue style for vBulletin 4.1.4 Suite (or Forum Classic).

Q. Anything in particular that I need to know about this style?
A. Simple - I don't advertise a lot, there are no advertisements shown when I make styles however I do know due to the centering of the logo, if you currently utilize the header ad locations you'll need to make changes if utilizing this style otherwise it will not display properly. *Fix planned for the 4.1.5 version and I'll patch this 4.1.4 version then as well, basically I'll be moving the header ad locations just above the normal below navbar locations to remedy this .

Q. This is 4.1.4 style why did you not release a 4.1.5 version and will you release and keep this updated unlike other styles on here?
A. Yes, unlike some other styles in the past I've released this is branded by our company and we do plan on supporting this style indefinitely.

Q. I see two different downloads available, which one do I use?
A. Simple:

- For vBulletin 4.1.4 through 4.1.7 use the file titled - Innovation_by_Instinct-Avenger_Blue-Compressed.zip
- For vBulletin 4.1.8 use the file titled - Innovation_by_Instinct-Avenger_Blue-vB4.1.8-Compressed.zip
- For vBulletin 4.2.1 and 4.2.2 use the file titled - Innovation_by_Instinct-Avenger_Blue-vB4.2.1-4.2.2-Compressed.zip

Q. I'm using a version for vBulletin 4.1.8 or up, why is the logo not clickable?
A. Well we have navtabs w/ a Home, Forum, and Blog button so why do we need more and more of the same links? Well I know some prefer it so here is a way to make it clickable:

You can utilize the transparent 1x1px transparent image to make the logo clickable again. *Please note this is not a default feature, to make the logo clickable you must edit template header and find:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
</div>

Remove the <comment> codes as shown in red:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
</div>

This is how the code should now look:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></a></div>
</div>

*If you use a different logo than the stock "Avenger Blue" and your making it clickable via the method above, please change the width="#" and height="#" to the correct values i.e. the same width and height as your new logo .

Q. Why is there a .zip inside the .zip?
A. Well the forums here have a max of 3.0MB file size limit on .zip files so I made it a .zip then added that one into another .zip, this reduced the file size from the 3.17MB down to 2.69MB! Now simply extract the main -Compressed .zip then extract the inside Innovation_by_Instinct-Avenger_Blue.zip and your ready to rock and roll!

Q. You have a link to your site in the footer, can I remove that?
A. You are not allowed to remove the link to our site i.e. "branding" unless you pay for a Branding Free Version. If I find someone running this without the copyright in place I will contact your host and file a DMCA complaint period the end. *Furthermore, we will not host discussions nor reply to any sort of inquiries on here in regards to paid or branding free versions so please do not bring up the subject of either in this thread.

*Click on the images below to view in a new tab/window, once in said window you can click the image again to zoom once more and see it clearer, providing a more accurate representation of the style .

Updated Forumhome screenshot for 4.1.8:

ForumHome:
http://www.innovationbyinstinct.com/..._ForumHome.png

ForumHome Mouseover effect:
http://www.innovationbyinstinct.com/..._MouseOver.png

CMS:
http://www.innovationbyinstinct.com/..._Fixed_CMS.png

Blogs:
http://www.innovationbyinstinct.com/...Fixed_Blog.png

ForumHome w/ Sidebar Active:
http://www.innovationbyinstinct.com/...ctive_Open.png

ForumHome w/ Sidebar Closed:
http://www.innovationbyinstinct.com/...ive_Closed.png

Search Input default colors:
http://www.innovationbyinstinct.com/...nputColors.png

Search Input active/hover colors:
http://www.innovationbyinstinct.com/...olorsHover.png

Postbit colors:
http://www.innovationbyinstinct.com/..._PostStyle.png

New Post icons on forumhome, please note that forums with new posts show a white icon, the old post remains as a grey color:
http://www.innovationbyinstinct.com/...umNewvsOld.png

Login Area when logged out:
http://www.innovationbyinstinct.com/...eLoggedOut.png

Login Area when logged out Hover effect:
http://www.innovationbyinstinct.com/...edOutHover.png

Login Area when logged out Help/Register Hover effect:
http://www.innovationbyinstinct.com/...OtherHover.png

ForumHome New Appearance:
http://www.innovationbyinstinct.com/...rumHomeNew.png

ForumHome New Category Description Hover:
http://www.innovationbyinstinct.com/...ptionHover.png

ForumHome New Hover Effect:
http://www.innovationbyinstinct.com/...meNewHover.png




Donations from:

• Eurobeat2
• Kat-2
• -

Thanks for your support, it's certainly not required however I appreciate the sentiment .


Notes & Update Information can be found here: https://vborg.vbsupport.ru/showpost....82&postcount=2

Restrictions:
This style is not meant for use on http://www.carbonracecars.com otherwise have at it!

*IMPORTANT*

To install the style:

1) Upload the contents of the UPLOAD Folder.
2) If for example you want the Fixed style installed then import the file:
*Please note, if you do not use the vBulletin Suite and have the Forum Classic version you only need to install the file vbulletin-style_Avenger_Blue_Fixed-Forum.xml.
a) Import the vbulletin-style_Avenger_Blue_Fixed-Forum.xml file first.
b) Merge in the vbulletin-style_Avenger_Blue_Fixed-CMS.xml (Options when uploading a style allow you to merge into a existing style, choose to merge this into the new style you just created using the Forum.xml.
c) Merge in the vbulletin-style_Avenger_Blue_Fixed-Blog.xml into the style, this has now updated the style for all three major products and the installation is complete!
3) Enjoy!

[TheLastSuperman]

Updated on 8/28/2011
- New online/offline/invisible statusicons.
*If you prefer the original simply rename the copy files i.e. user-online - Copy.png to user-online.png and they will return to normal.
- Corrected Sticky thread stylevar, it was still the default white-ish color.

Updated on 8/29/2011
- Fluid width style released, included in the .zip are both Fixed & Fluid versions.
- Logo is now automatically centered in each version.

Updated on 8/30/2011
- Asset Manager (attachment upload window etc) css updated to match style.

Updated on 8/31/2011
- Deleted thread background color updated to a dark blue.
- Facebook Connect now has the same hover effect as the help/register links.
- Announcements now share the same background and border as notices.

Updated on 9/02/2011
- Deleted post background color updated to a dark blue.
- Blockrow background color updated - Thanks for the catch CharlieDelta!
- Sidebar and Widgets now match 100%, forum sidebar has separation between each sidebar block!

Updated on 9/03/2011
- Adjusted breadcrumb margin to remove the overlapping of toplinks.
- Updated CKE Editor CSS to match style and resolve some misc issues.
- Updated all textarea/drop-down borders to match.
- Forum Descriptions on Forumhome CSS adjusted and now includes hover effect.
- [S]Forumhome and Threadbit hover effects now have a light blue 1px border at the top, seems to pop[/S] Removed, please see update notes from 9/04/2011.
- CMS and Forum Sidebar (Not available on Blog) content borders now change to a lighter blue on hover.
- Cleaned up and organized CSS in additional.css.

Updated on 9/04/2011
- New ForumHome Category Description css, rounded corners w/ inset shadow effect.
- New ForumHome Category Description hover effect.
- Adjusted forumhome and threadbit hover effects, removing the 1px top border added on the last update.
- ForumHome New Appearance:
http://www.innovationbyinstinct.com/...rumHomeNew.png
- ForumHome New Category Description Hover:
http://www.innovationbyinstinct.com/...ptionHover.png
- ForumHome New Hover Effect:
http://www.innovationbyinstinct.com/...meNewHover.png

Updated on 9/06/2011
- Updated stylevars for document background as body css in additional.css was not being parsed correctly by all modifications.
- New CMS, Forum, and Blog Widget/Sidebar shadow effects on the inner content themselves.
- Other misc. updates to styling.

Updated on 11/05/2011
- Updated stylevars for profile sidebar blocks, default sidebar uses some css a little differently in the profile which caused the issue, furthermore the profile now has a simple bit of css hard coded into it only.
- Updated other stylevars to include the proper "dark blue" background.

Updated on 11/21/2011
- Updated for compatibility with vBulletin 4.1.8, if you use 4.1.8 please download and install the .zip labeled vB4.1.8 otherwise for vBulletin 4.1.4 through 4.1.7 please use the .zip w/ the vB4.1.8 in the filename .
- Corrected "Array" template issue, required revision of template FORUMHOME.
- Corrected white background in member profiles, required revision of MEMBERINFO.

Updated on 11/28/2011
- Updated for 4.1.8, fixing double comma issues.
- Corrected CMS and Blog styling issues, style now requires a three part install of .xml files, one for the Forum, one for CMS, and Blog.

Updated on 12/5/2011
- Changed Forum Description to rgb(205, 205, 205) instead of the same "Orange" as the forum titles on forumhome.
- Moved Thread and post counts under forum description on forumhome, colored as rgb(205, 205, 205) and included a shrunken version of the stats image in front, followed by the wording "# threads containing # posts"
- Corrected Blog comment background issues.
- Added in transparent 1x1px transparent image and new <div> to make the logo clickable again. *Please note this is not a default feature, to make the logo clickable you must edit template header and find:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
</div>

Remove the <comment> codes as shown in red:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
</div>

This is how the code should now look:

                    <div class="ablogo" align="center">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></a></div>
</div>

*If you use a different logo than the stock "Avenger Blue" and your making it clickable via the method above, please change the width="#" and height="#" to the correct values i.e. the same width and height as your new logo .

Updated on 01/19/2013
- Updated for 4.2.1 and 4.2.2.
- Various misc. adjustments.

Updated on 01/27/2013
- Fixed scrollbar issue in both fixed and fluid width, scrollbar now displays properly and does not appear until window is resized (smaller).

*IMPORTANT*

To install the 4.1.8 Version:

1) Upload the contents of the UPLOAD Folder.
2) If for example you want the Fixed style installed then import the file:
*Please note, if you do not use the vBulletin Suite and have the Forum Classic version you only need to install the file vbulletin-style_Avenger_Blue_Fixed-Forum.xml.
a) Import the vbulletin-style_Avenger_Blue_Fixed-Forum.xml file first.
b) Merge in the vbulletin-style_Avenger_Blue_Fixed-CMS.xml (Options when uploading a style allow you to merge into a existing style, choose to merge this into the new style you just created using the Forum.xml.
c) Merge in the vbulletin-style_Avenger_Blue_Fixed-Blog.xml into the style, this has now updated the style for all three major products and the installation is complete!
3) Enjoy!
____________________

Please Note:

Some mods for example iBProArcade has css made for light/white styles, it will require updating said css as it does not use the vBulletin stylevars within the css so sometimes, for some mods you use, a css fix will be required when using dark styles such as this one. *If you post a link to the page in question or the CSS of said modifications I will do my best to help resolve those styling issues in my spare time or in the least, lead you in the right direction so you can sort it yourself .

////////////\\\\\\\\\\\\

Using [DBTech] vBNavTabs v1 (vB4) for a secondary navbar? Is it not showing correctly? If not do the following:

1) Edit template additional.css and find:

.navbar_wrapper {
        margin-top:-1px;
        border-left: 1px solid #707070;
        border-bottom: 1px solid #707070;
        border-right: 1px solid #707070;
	-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
	-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	-moz-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	-webkit-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
}

Replace with:

.navbar_wrapper {
        margin-top:-1px;
        min-height:{vb:math {vb:stylevar navbar_tab_size.height} + {vb:stylevar navbar_tab_size.height}}px;
        border-left: 1px solid #707070;
        border-bottom: 1px solid #707070;
        border-right: 1px solid #707070;
	-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
	-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
	-moz-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	-webkit-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
}

2) In the same template i.e. additional.css also find:

.body_wrapper {
        margin-top: -104px;
	padding: {vb:stylevar body_padding};
	background: {vb:stylevar body_background};
        border: 1px solid #707070;
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
	-moz-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	-webkit-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
}

Replace with:

.body_wrapper {
        margin-top:{vb:math {vb:stylevar navbar_tab_size.height} + {vb:stylevar navbar_tab_size.height} - 104}px;
	padding: {vb:stylevar body_padding};
	background: {vb:stylevar body_background};
        border: 1px solid #707070;
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
	-moz-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	-webkit-box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
	box-shadow: -3px 3px 3px {vb:stylevar shadow_color} !important;
}

3) Edit template vbulletin-chrome.css and find:

.toplinks {
        min-width:600px;
	position:absolute;
	{vb:stylevar right}:{vb:math {vb:stylevar padding}*2};
        top: 61px;
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};
}

Replace with:

.toplinks {
        min-width:600px;
	position:absolute;
	{vb:stylevar right}:{vb:math {vb:stylevar padding}*2};
        top:{vb:math {vb:stylevar navbar_tab_size.height} + {vb:stylevar navbar_tab_size.height} + 61}px;
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};
}

4) Now edit template navbar and find:

</div>
</div><!-- Closing div for navbar_wrapper -->
</div><!-- Closing div for above_body -->

Add as shown in blue:

</div>
<!-- start navbar2 -->
    <vb:if condition="$vboptions['dbtech_vbnavtabs_navbar2']">
        <div id="navbar2" class="navbar" style="margin-top:0px;z-index:99999 !important;">
            <ul id="navtabs" class="navtabs floatcontainer" style="border-bottom:{vb:stylevar navbar_tab_border};">
                                    {vb:raw template_hook.navtab_two}
            </ul>
        </div>
    </vb:if>
<!-- end navbar2 -->
</div><!-- Closing div for navbar_wrapper -->
</div><!-- Closing div for above_body -->

*Please note I have added the following to the style= code:

z-index:99999 !important;

^ Due to the fact the drop-down/popupmenu items of the top navbar we showing below the secondary.

And now your secondary navbar by DBTech shows .

____________________

Issue with [OzzModz] Style & Language Selector In NavBar?

Originally Posted by mitch84

conflict with this hack(ozzy), if activated menu disappears

Ok so in the mod options ensure you have this set to no:

Auto Deploy
Setting this to "Yes" will make the style & language selectors show in the navbar.

Set this to "No" to be able to use the variable, {vb:raw show.ozzmodz_style_lang_chooser} in your templates, to make it show where you want.

Then edit template ozzmodz_style_lang_chooser and find:

    <div style="margin-bottom:35px;">

Replace with:

    <div class="avbozzystyle">

Now in additional.css add this just below the .abimage css definition:

.avbozzystyle {
        float:right;
        clear:left;
        height:25px !important;
        background:transparent;
        margin-top:-25px !important;
        margin-right:45% !important;
}

Now in template header find:

                    <div class="ablogo">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
</div>

Replace with:

                    <div class="ablogo">
<div class="abimage"><a name="top" href="{vb:link forumhome}"><vb:comment><img src="images/avenger_blue/misc/home.png" width="960px" height="150px" alt="{vb:raw vboptions.bbtitle}" /></vb:comment></a></div>
{vb:raw show.ozzmodz_style_lang_chooser}
</div>

That should sort it .

________________

Enjoy!

[Juggernaut]

That's a beautiful style, but too dark for my forum.

[TheLastSuperman]

Originally Posted by Juggernaut

That's a beautiful style, but too dark for my forum.

TY TY - I was hoping it would help some who just don't settle well w/ black themes... meaning that it's still dark just a blue instead of grey/black-ish per say. The beautiful thing about vBulletin? You can install many styles so always bear in mind that some of your users may in fact love a style you dislike and well vice-versa as well .

[Juggernaut]

So true, will download and install later.

[K4GAP]

Really nice... thanks

[mitch84]

downloaded and installed! I wait for the comments of my members

[mitch84]

what is the style variable to change the color of the border with the same color on the other arrow?, it's hard to see through

and I find that the buttons on / offline are too small
thx

[K4GAP]

Now that I've installed and played around with this style. I like it even more. The only thing I altered was increasing the width of the style to better accommodate my custom header image.

Great style!
Thanks again.

[TheLastSuperman]

Originally Posted by mitch84

what is the style variable to change the color of the border with the same color on the other arrow?, it's hard to see through

and I find that the buttons on / offline are too small
thx

Add this to additional.css:

.primary, textbox, full {
	border: 1px solid {vb:stylevar link_color};
}

You specifically asked for the orange color, anyone else may want a silver/grey so in the next revision it will be this:

.primary, textbox, full {
	border: 1px solid rgb(153, 153, 153);
}

I felt the light blue I used around forum descriptions was too light but still debating that however feel free to use either or include your own color using RGB or hex etc example:

.primary, textbox, full {
	border: 1px solid #ffffff;
}

^ Would make it a white border .

Now for the online/offline... what did you mean by that, the users online/offline little images?

Originally Posted by GaryT

Now that I've installed and played around with this style. I like it even more. The only thing I altered was increasing the width of the style to better accommodate my custom header image.

Great style!
Thanks again.

Glad to hear you like it Gary, enjoy!