PDA

View Full Version : Suite Style - VB4STYLE.com | VB4 4.0.3 PL1 Professional Style


darren1981
23 Apr 2010, 05:02
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:
https://www.vbulletin.org/forum/external/2010/04/12.png
FORUM:
https://www.vbulletin.org/forum/external/2010/04/32.jpg

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

Lionel
23 Apr 2010, 06:18
Hi,

You skipped facebook on that.

darren1981
23 Apr 2010, 06:42
Thanks.. forgot to move the "Facebook_Header" package is being re-uploaded.. problem is no sorted.

Thanks for the heads up

EDIT: New package is up.. now includes the facebook_header / facebook login section..

mr3oobqatar
23 Apr 2010, 11:49
You are professional designer Thank you

Juggernaut
23 Apr 2010, 12:59
Very nice skin, installed.

darren1981
23 Apr 2010, 18:30
You are professional designer Thank you
Appreciate your kind words :) Thank you very much.

Very nice skin, installed.
Thanks mate :) yes i actually really like this one, i think i turned out very well.

Enjoy guys

NAZIA
23 Apr 2010, 20:32
nice mate

darren1981
25 Apr 2010, 02:01
Welcome all,

Some people have asked how to move the body bg... just delete the image in stylevars / common / body_background <--- delete the image field to remove the little black / grey image used at the top of the body wrapper. hope that helps

2sly
25 Apr 2010, 06:41
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.

mitch84
25 Apr 2010, 07:07
installed, thank you

darren1981
26 Apr 2010, 03:20
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
29 Apr 2010, 11:31
wooooooooooooooooooow

darren1981
30 Apr 2010, 13:59
Welcome guys :)

More styles coming soon

kfrosty
30 Apr 2010, 20:18
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/showthread.php?827-Make-sure-your-wireless-network-is-password-protected.

kfrosty
02 May 2010, 02:35
Also, I just realized the Facebook icon associated with your account when you login via facebook doesn't show.

kfrosty
02 May 2010, 05:26
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
06 May 2010, 06:29
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
06 May 2010, 11:37
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
06 May 2010, 18:22
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
06 May 2010, 18:34
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.

grrlburn
07 May 2010, 05:03
Hello,

I have also installed this style and absolutely love it but I am getting this strange problem. Almost everyone using IE is not seeing the white background they are only seeing the brown/gray background which makes it hard to see the type. `The weird thing is when they log out they see the site fine with the white background when they login the white background goes away.

What could this be it seems strange to me. This does not happen in Firefox or Safari. I don't think it is a permissions issue as I and another person are in the Admin usergroup and I can see the white background but he cannot.

Please let me know as soon as you can we are stumped!

darren1981
07 May 2010, 06:35
Please let me know as soon as you can we are stumped!

Got me stumped also, it's displaying fine for me under IE, Chrome, FF and also Safari. Will try and force the error but so far i am not seeing what you are.

setishock
11 May 2010, 05:57
I'd install this if not for all the link junk in the footer.

grrlburn
11 May 2010, 20:35
Still having this issue with the white background not showing up so far on IE 8.0 and 7.0 can't seem to recreate it but there are enough people having this issue that there is obviously something going on.

darren1981
19 May 2010, 12:21
Guys ive looked into this over and over and still can not force the problem to occur, also someone PM'd me saying the same thing... they haven't seen the problem either, but one of the old IE users took a screenshot of this error.. so i can see what is happening, but am no closer to finding out what is causing this issue.

Will keep looking into it.

darren1981
25 May 2010, 12:38
To resolve this issue just remove the center image from the breadcrumbs sections. this sorts out the issue IE users were experiencing.

ENJOY

tspasev
26 May 2010, 09:07
Hi to all ...
This is awesome template and I use it but there is a little problem in login form. Title User I (and others) have to delete than to write username and the password. For password it works fine ... but in username not. Here is the code of navbar (just the input field) template.


<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">

ToniTest
26 May 2010, 16:49
Very nice style.

But my style is all blue?
How can I change the menues back to red?

Fungsten
27 May 2010, 18:35
Possible issue in "Threaded View". I have threaded view where all the posts are shown in the "viewer", that is there is no scroll bar on the side so all the posts all showing. Now, I have your style as a child of the default style and It seems that your style did not inherit that configuration from the parent style. Is there any reason for this?

Yes I did try reverting the templates, etc. TIA.

lubbie
28 May 2010, 15:29
Would be nice if the threadstarter could set a link to the Style, not only to the board. There are quit a lot of sytles on the side

Brandon Sheley
28 May 2010, 16:43
looks like a nice 4.0 style, will bookmark this for future use :)

quitsmoking
01 Aug 2010, 11:11
Very nice looking theme. Thank you.

NoVAmike
03 Aug 2010, 17:14
How come uploading new styles always says its merging?

I don't want any styles to merge with my default style

I did this and it just keeps showing my default style...then I create a new style, then upload into that and it makes my default style present a blank page when refreshing the site...

130319
04 Aug 2010, 23:32
Will this work with the 4.0.5 version?

GameFreak2009
18 Aug 2010, 10:30
@NoVAmito:
Be sure to select 'Create New Style' when importing.

@130319:
Yes it will. It should be fully compatible with vB4.0.5

glen290
03 Oct 2010, 09:53
Really like this style, have installed it but would like to make a few changes,but no sure how.
Firstly how can i center the logo when i put my own on and secondly would like to change the header background colour to something darker, any ideas ?

RedDevil
06 May 2011, 13:51
Any plans to update this, not 100% on 4.1.2+

K!nG
07 May 2011, 00:10
Like ythe style .... will bookmark it if gets update to work with 4.1.3 :)