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!

[pityocamptes]

OK, updated the template. Thanks. However, now my blogs and articles tabs are giving me 404 errors.... not sure why...

OK, not the template fault, looks like a dbseo issue, contacted them...

-->>>OH, the reason the table td/tr issue was present is that I wanted the site logo to auto shrink with no matter how big the user makes the screen. Now, using the suggestion above, it no longer does that. Anyway to work around that??? Thanks.

[sat-extreme]

Hello I am looking for style vbulletin 4.2.3 beta suggestions please

[pityocamptes]

Originally Posted by pityocamptes

OK, updated the template. Thanks. However, now my blogs and articles tabs are giving me 404 errors.... not sure why...


OK, not the template fault, looks like a dbseo issue, contacted them...



-->>>OH, the reason the table td/tr issue was present is that I wanted the site logo to auto shrink with no matter how big the user makes the screen. Now, using the suggestion above, it no longer does that. Anyway to work around that??? Thanks.

BUMP

[albibak]

I'll test it, thanks

[TheLastSuperman]

Originally Posted by pityocamptes

OK, updated the template. Thanks. However, now my blogs and articles tabs are giving me 404 errors.... not sure why...


OK, not the template fault, looks like a dbseo issue, contacted them...



-->>>OH, the reason the table td/tr issue was present is that I wanted the site logo to auto shrink with no matter how big the user makes the screen. Now, using the suggestion above, it no longer does that. Anyway to work around that??? Thanks.

Originally Posted by pityocamptes

BUMP

The css for the logo is located in additional.css near the top, there's two for this area one is the actual background and the other serves as a "cover" i.e. a transparent image that covers the logo to prevent straight -right-click save image etc.

In additional.css find (or similar, depending on if you're using fixed or fluid version):

.ablogo {
        min-width: 100% !important;
        min-height: 156px !important;
        background: transparent !important;
        overflow: hidden;
}

.abimage {
        background: url({vb:stylevar titleimage}) center center no-repeat !important; 
        height: 155px !important;
}

Change to:

.ablogo {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background: transparent !important;
        overflow: hidden;
}

.abimage {
        background: url({vb:stylevar titleimage}) center center no-repeat !important; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

So basically remove any references of width/height and add in:

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

*Not tested so let me know, might need to adjust/tinker to make it presentable .

[TheLastSuperman]

Originally Posted by sat-extreme

Hello I am looking for style vbulletin 4.2.3 beta suggestions please

I would offer suggestions except I'm not tracking/keeping up with any 4.2.3 Beta styles therefor suggestions, I'm all out of . Soon as 4.2.3 is official i.e. out of Beta this will be upgraded for use with but not before then as I do not fabricate styles for Beta versions.

[pityocamptes]

Thanks, will check on the auto size code tonight. As far as the advanced search pop up, previously mentioned, what should I do? Thanks again.

[TheLastSuperman]

Originally Posted by pityocamptes

Checking back on the popup .html box for advanced search issue... thanks

Originally Posted by TheLastSuperman

Check the files on your server, in the same folder your vbulletin is running from, is there an empty index.html file present? It looks like from the pages source code, that this is being called by a plugin or was edited into the style (not in the version uploaded here though so i.e. you might have been hacked at some point in time, that's the only reason to include an invisible iframe usually but why is it being directed to include a 1kb blank.html file ? very odd imho).

This is found when I view the source code for your forum:

PHP Code:

    <iframe id="yui-history-iframe" src="clientscript/yui/history/assets/blank.html"
            style="position:absolute;top:0; left:0;width:1px; height:1px;visibility:hidden;"></iframe>
    <input id="yui-history-field" type="hidden" /> 


Makes no sense to link to an iframe in a 1kb file like that unless it was compromised but then the file size if it contained mal code should be larger than the original file size, which is the same 1kb so odd all around I'd say, can't tell anything specific unless I had access and I'm booked for the night working now and its close to 11pm here so no time to check regardless and not trying to scare you one bit simply saying this seems very odd and that you need to look into it to be safe.

I would replace default vBulletin files to be safe, check in the admincp using suspect file versions under maintenance after replacing them and also check for spare admin accounts. If anything looks odd file-wise then make a new thread in the vB4 forums and ask for feedback/assistance w/ the file names before deleting. *As always make a backup of database and files before removing anything.

Edit: Who is pasting <table and <TR <TD codes all over the place? STOP DAT lol its just an old outdated way to design web pages... it still works but not the standard, only use when absolutely required i.e. you're pulling your hair out because you can't find a way to make something display properly so you cheat and use a table (try not to!). Just one of many examples explaining more in detail - http://www.itegritygroup.com/css-vs-tables/ AND here is an example of how to do a three part fluid header instead of using a table to do the same in vBulletin - https://vborg.vbsupport.ru/showthread.php?t=228319

Originally Posted by pityocamptes

Lynn over at vbulletin.com indicated this:

"If you do a Search In Templates for part of the code, like "<iframe id="yui-history-iframe", you will see that it is part of the search_common template."

So I assume it is part of the vbulletin files...

Originally Posted by pityocamptes

So if I delete the code above, am I going to have any issues?

Originally Posted by pityocamptes

Thanks, will check on the auto size code tonight. As far as the advanced search pop up, previously mentioned, what should I do? Thanks again.

My brain is broken today already, like a jello pudding cup so head my words of advice with a grain of salt per say lol. I see Lynne gave you some info and I'm not about to doubt that simply going to say that I can't recall what page I was on when I viewed your source code so if on search and that is supposed to show then so be it but I don't recall that iframe code at all from all the times I've worked on styles so we're gonna try this:

1. Open Notepad++ (Google + Download then use it to copy/paste/edit ALL code do not use Windows notepad/wordpad can cause issues depending on server type used).
2. Open the template in question.
3. Copy all the code, now paste into notepad++ in a new document, once pasted minimize notepad++
4. Now back in your browser within the vBulletin template remove the iframe code, save the template.
5. Check the style now, any issues still present regarding the popup?

By doing the above one of two things will happen and as such you should only act if its not fixed, if fixed then you're done, see below for outcomes.

- IF no issues are present, then that was it and its fixed.
- IF the issue is still present, delete all the code in the template and replace with the original template code you have sitting in notepad++ .

[pityocamptes]

Thanks will try it out late tonight. One more question. Is there a limit as to how many nav tabs you can have? I noticed on a mobile device that the tabs bunch up after the second row (nav tabs drop down to a second row on mobile device). Any way around this? Thanks.

[TheLastSuperman]

Originally Posted by pityocamptes

Thanks will try it out late tonight. One more question. Is there a limit as to how many nav tabs you can have? I noticed on a mobile device that the tabs bunch up after the second row (nav tabs drop down to a second row on mobile device). Any way around this? Thanks.

Not sure if this will work on mobile or not but when you said they were bunching up it did come to mind .

https://vborg.vbsupport.ru/showthread.php?t=274972

^ See post #2 here in the Avenger Blue thread for info on how to adjust this style with the Navtabs v1 its about half way down in post 2.

Edit: I wanted to edit my post and clarify something though so you would know and any others who happen across this post wondering the same thing - there is and is not a limit to how many navbar tabs you can have however unless you use a mod like above it may become crowded as you noticed. This also can come into play (too many tabs so they bunch up) depending on the type of style you have fluid or fixed - in a fixed style its a set width so only so many tabs will fit in a horizontal fashion since the width is specifically set. In a fluid style it then depends on the users monitor resolution so if the style is set to display 80% width with 10% margin on each side that = 100% but is the user running a 1024x768 resolution on their pc OR are they running 1920x1080 on a 40" LCD tv like me? <-- All of those factors can change how it appears - the only time it will not change is if its a fixed width as you know how many and what to fit in then, and no matter if on a 1024x768 or 1920x1080 resolution the site will always be the fixed width and this is also why sometimes we must scroll on certain sites to see content, they were coded in a set size and why the scroll-bars popup on certain sites and others they do not (responsive style/them etc).