Suite Style - VB4STYLE.com | VB4 4.0.3 PL1 Professional Style

Hi all,

As we have received many requests to release another free vBulletin 4.0.3 style our team @ http://vb4style.com has put this together for you. This is a premium style and has been sponsored by a 3rd party (this means you receive a Premium Style for Free) Please note Footer links are not to be removed, this is the only condition.

CMS:

FORUM:


DEMO: http://vb4style.com (a demo will be up in a few hours, however this is a re-make of our Unique VB4STYLE.com default style, so you can get a rough idea of the design / layout)

This has been tested on the latest vBulletin 4.0.3 PL1 (you may need to tick the "IGNORE STYLE VERSION") however this causes no issues at all and is deemed 100% compatible by our team.

Enjoy

[darren1981]

just curious, how hard would it be to change the red to a dark blue? Was thinking about trying it but haven't looked at vb4 at all yet as far as styles go.

Not that hard at all... just change the "LINK COLOR" and overlay the red images in Photoshop to Blue and it's as simple as that.

[as7apcool]

wooooooooooooooooooow

[darren1981]

Welcome guys

More styles coming soon

[kfrosty]

Very nice, marked as install.

2 slight issues.
1) The facebook connect, Welcome, Notifications section shows up under the tab headers and breadcrumb. How can I get that moved back up into the top right hand corner fo the page.

2) If you click on a user and go to their profile page, the red and grey aren't really legible. The page I'm talking about shows up with a tab section with tabs labeled.
Visitor Messages, About Me, Friends, Infractions. Again to get to it go to forums and click on Last registered user or a user link in a forum link to go to their profile page.

But great job, this is a really nice style.

P.S. I just found another slight issue. If your in a forum and you have subforums etc or a long title name to where the Breadcrumb reaches to the middle of the screen, you have an issue with the gray image in the middle of the screen.

Example of what i'm speaking of.
http://www.wickcommunity.com/showthr...word-protected.

[kfrosty]

Also, I just realized the Facebook icon associated with your account when you login via facebook doesn't show.

[kfrosty]

Ok, I decided to try and fix a couple of things myself.

Moving the login info to the top right of the page which is standard for most templates.

First I went to the header template and added the following code. (Note I commented out some of the problem areas in case you don't want to move the login info.)

Find the last </div> and paste the following code.

<div style="position: absolute; top:10px; right: 2%; width: 500px">

<table width=100% border="0" >
  <tr>
    <td>&nbsp;</td>
    <td align="right"></td>
    <td align="right">

<td align="right"><div id="toplinks" class="toplinks">
<vb:if condition="$show['facebookuser']">
	<a id="fb_link" href="{vb:raw profileurl}">
		<img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />

<!-- Causes a blank image when logged in to facebook
		<img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />

-->
	</a>
<vb:else />
<!--  This causes a duplicate facebook connect button
	<fb:login-button size="medium" onlogin="vBfb.handle_fbLogin()"></fb:login-button>

-->
</vb:if>

		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
					</ul>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
            {vb:raw template_hook.header_userinfo}
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
				<li>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails" class="logindetails">
					<div>
						<div>
					<input type="text" class="textbox" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
					<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
					<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
					<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>
			<script type="text/javascript">
			YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
			YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
			YAHOO.util.Dom.setStyle('navbar_username', "color", "#828282");
			vB_XHTML_Ready.subscribe(function()
			{
			//
				YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
				YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
				YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
				YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
			});
			
			function navbar_username_focus(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
				{
				//
					textbox.value='';
					textbox.style.color='black';
				}
			}

			function navbar_username_blur(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '')
				{
				//
					textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
					textbox.style.color='#828282';
				}
			}
			
			function navbar_password_hint(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
				YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
				YAHOO.util.Dom.get('navbar_password').focus();
			}

			function navbar_password(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				if (textbox.value == '')
				{
					YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
					YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
				}
			}
			</script>
				</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
		</vb:if>
	</div>


	</td>
  </tr>
</table>


</div>

If you are making this change, you'll want to remove this same code from the navbar template.

Recommendation, I would search for toplinks. Then delecte the table and contents it's contained in

<table width=100% border="0" >
<tr>
<td>&nbsp;</td>
<td align="right"></td>
<td align="right">

<td align="right"><div id="toplinks" class="toplinks">

(You'll need to delete down to the closing </table> tag.)

This fixes 3 issues. There aren't duplicate facebook connect buttons displayed in certain situations. Also, there isn't a unresolved image posted to the left of your facebook avatar.)

Then it moves the login info back to the top right of the page saving space unlike what the style does by default.

The forum bread crumb issue still exists.

[darren1981]

Let me know if your still having problems... and i'll put the top links back in the "standard" position..

I just liked the uniqueness of the login positioning, most feed back has been very positive.

Hope you guys enjoy it, do let me know if you want the top links back in the default section.

[kfrosty]

The style still has problems if the bread crumb for the titles of the section you are in reaches towards the middle of the screen. They override the brown image that runs across and dips in the middle.

[darren1981]

Ohh ok, this can be sorted out with padding...

I am off to bed now, i will re-upload this tomorrow with the fixes, thanks for letting me know

[kfrosty]

Many thanks. I love the style. If you repost, could you please list the changes because I don't want to uninstall what I have and then install what you post later and have it break the login stuff.

I use a mod that displays a users unread threads like used in this forum. Also, as I mentioned in the area you were displaying the info, if you were logged in with a facebook account, your facebook avatar was showing up as an unresolved image.

Also, when I moved everything, there were 2 facebook connect images showing up and I had to remove a line of code from your style to fix the problem.

I'd like to have the style installed without any of my changes but I prefer not to have to go back through the changes if at all possible.

Thanks again, my favorite style out so far.