Suite Style - HiO Freeminium Edition by vBCreative - Update 04.03.10

HiO Freeminium REVOLUTION by Haothiencz

Brought to you by

Here you go the HiO Freeminium Edition

READ IT CAREFULLY BEFORE DOWNLOAD

I have re-coded this skin from blank new vb4.0.2 patch level 1 to make sure it work with the latest version.

If you are running a older version which downloaded before 04.03.2010, when upload it do not update your skin but creat a new one.

If you are not running vbulleitn 4.0.2 and above - do not update it.

Sorry for any trouble you should made but it could have me manage and update my skin easily.

The old navbar has been removed but don't worry I have made a nicely one for you guys and this navbar should run more smoothy with any update of vbulletin.

Download the attachment:freeminium 4.0.2 + without PSD and enjoy the fresh.

Hope you guys here enjoy it and support

Screenshot:


Live demo:
+ vbcreative.net (coming soon with premium styles, pre-made premium skin and custom style service)

About Skin:

- HiO Freeminium Edition :
- Freeminium = Free with quality of Premium lol
- CMS Support: Yes
- Forum Support: Yes
- Blog Support: Yes
- Banner PSD.

- I didn't make any watermark or st like that to skin. So please keep my copyright if you are using my skin. If you want to remove it. Please read file readme.txt in attachment.

1. Read F.A.Q Twice before use it



How to upgrade:
- Re-upload folder freeminium to your images/
- Re-Import .xml file

How to install:
- Upload folder freeminium to your images/
- Import .xml file

If you want the default navbar or just started with vbulletin and not familiar with it. I recommend you to go to
style manager/ edit template/
and revert navbar template.

after that you can start using the style.



For people, who want to play around with vbulletin style and having st new


Wanna have 2 column of forumhome:

Thank Lynne for the code

In your template

Forumbit.css:

replace all with

@charset "UTF-8";
/* CSS Document */

#forums {
    clear:both;
}

.forumhead {
    background: {vb:stylevar forumhead_background};
    _background-image: none;
    padding: 0;
    font:{vb:stylevar forumhead_font};
    color:{vb:stylevar forumhead_color};
    clear:both;
    margin-top: 8px;
    float: {vb:stylevar left};
    border: {vb:stylevar forumhead_border};
    width: {vb:stylevar forumhead_width};
    -moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
    -moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
    -webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
    -webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
}

#forums .L1 .forumhead a {
    font: {vb:stylevar forumhead_font};
}

#forums .L1 .forumhead .forumdescription {
    display:none;
}

#forums .L1 .L2 {
    display:block;
    clear: both;
}

#forums a.username {
    color: {vb:stylevar link_color};
}

#forums a.username:hover {
    color: {vb:stylevar linkhover_color};
}

.forumbit_post .forumrow, .forumbit_nopost .forumhead, .forumbit_nopost .forumrow, .forumbit_post .forumhead {
    -moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
    -webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
}

.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
    background: {vb:stylevar forumrow_firstentry_background};
    _background-image: none;
    border-top: 1px solid {vb:stylevar body_background.backgroundColor};
}

.forumrow + .childsubforum .forumrow, .forumhead + .childforum .L2:first-child .L2 .forumrow, .forumhead + .childforum .L2 .L2:first-child .forumrow {
    background: {vb:stylevar forumrow_background};
    _background-image: none;
}

.forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow {
    background: {vb:stylevar forumrow_background};
    _background-image: none;
    display:block;
    width: 100%;
    float: {vb:stylevar left};
    min-height: {vb:math {vb:stylevar forumicon_size}+{vb:stylevar padding}}; /* 48px is the icon size */
    position:relative;
    border-bottom: {vb:stylevar forumbits_border};
    border-{vb:stylevar left}: {vb:stylevar forumbits_border};
    border-{vb:stylevar right}: {vb:stylevar forumbits_border};
}

.forumbit_nopost .forumbit_nopost .forumrow .forumicon {
    position: absolute;
    {vb:stylevar left}: {vb:stylevar padding};
    top: {vb:math {vb:stylevar padding}/2};
    width: {vb:stylevar forumicon_size};
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata {
    display: inline-block;
    width:100%;
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata .datacontainer {
    margin-{vb:stylevar left}: {vb:math {vb:stylevar forumicon_size} + {vb:math {vb:stylevar padding}*2}};
}

.forumbit_nopost .forumbit_post .forumrow .forumdata .datacontainer {
    margin-{vb:stylevar left}: 0;
}

/* forumbit nopost */
/* forumbit nopost -> forumhead */
.forumbit_nopost .forumhead .forumtitle, .forumbit_nopost .forumhead span, .forumbit_nopost .forumhead .collapse, .forumbit_post .forumhead h2 span {
    display:block;
    float: {vb:stylevar left};
    clear: {vb:stylevar right};
    font: {vb:stylevar forumhead_font};
    padding: {vb:math {vb:stylevar padding}/2-1} 0;
    color: {vb:stylevar forumbits_aForum};
}

.forumbit_nopost .forumhead h2, .forumbit_post .forumhead h2 {
    /*border-top: 1px solid {vb:stylevar body_background.backgroundColor};*/
    margin-{vb:stylevar left}: 3px;
    margin-{vb:stylevar right}: 3px;
}
.forumbit_nopost {
    clear:{vb:stylevar left};
}
.forumbit_nopost .forumrowdata {
    clear:both;
    display:block;
    width: 100%;
}

.forumbit_nopost .subforumdescription {
    padding: {vb:math {vb:stylevar padding}/2-1} {vb:stylevar padding};
    font-weight: normal;
    color: {vb:stylevar blocksubhead_color};
    background: {vb:stylevar blocksubhead_background};
    _background-image: none;
}

.forumbit_post .foruminfo .forumdata {
    padding: {vb:math {vb:stylevar padding}/2-1} 0;
    font-size: {vb:math {vb:stylevar font.fontSize}-1}px;
}

.forumbit_nopost .forumhead .forumtitle {
    font-size: {vb:math {vb:stylevar font.fontSize}-1}px;
    min-width: 76%;
}

.forumbit_nopost .forumhead .forumtitle a {
    color: {vb:stylevar forumbits_aForum};
    margin-{vb:stylevar left}: {vb:stylevar padding};
}

.forumbit_nopost .forumhead span, .forumbit_post .forumhead span {
    font-size: {vb:math {vb:stylevar font.fontSize}-1}px;
}

.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {
    width: 21%;
}

.forumbit_nopost .forumhead a.collapse img {
/* values are based on the image */
    position:absolute;
    top: -15px;
    {vb:stylevar right}: -6px;
    display:block;
    width:13px;
    height:13px;
    overflow:hidden;
    background:transparent url({vb:stylevar imgdir_button}/collapse_collapsed_40b.png) no-repeat;
    float: {vb:stylevar right};
    clear: {vb:stylevar left};
}

.forumbit_nopost:hover .forumhead  a.collapsegadget {
    visibility:visible;
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata, .forumbit_post .forumrow .forumdata  {
    padding: {vb:math {vb:stylevar padding}/2} {vb:stylevar padding};
    padding-{vb:stylevar left}: 0;
    font-size: {vb:stylevar small_fontSize};
}

.forumbit_nopost .forumbit_nopost .foruminfo .subforums {
    margin-{vb:stylevar left}: {vb:stylevar padding};
    position: relative;
    top: -{vb:stylevar padding};
}

/* forumbit post */
.forumbit_post {
    float: {vb:stylevar left};
    position:relative;
    width: 100%;
    display:block;
}

.forumbit_post .forumhead span {
    padding: 0;
}

.forumbit_post .forumhead .forumlastpost {
    top: 0;
    margin-top: 0;
}

.forumbit_post .foruminfo, .forumbit_post .forumlastpost, .forumbit_post .forumactionlinks, .forumbit_post .forumstats, .forumbit_post .forumstats_2{
    padding: {vb:math {vb:stylevar padding}/2} 0;
}

/* commenting this out for the time being as it is included for test
.forumbit_post .forumstats {
    background: #f2f6f8;
margin: 0;
padding-bottom: 15px;
overflow:hidden;
}
*/
.forumbit_post .forumhead .forumtitle {
    width: 76%;
}

.forumbit_post .forumhead .forumtitle span {
padding: 0;
padding-{vb:stylevar left}: {vb:stylevar padding};
}

.forumbit_post .foruminfo {
    width: 57%;
    min-width: 30%;
    float: {vb:stylevar left};
    clear: {vb:stylevar right};
    min-height: {vb:stylevar forumicon_size}; 
}

.forumbit_post .foruminfo .forumicon{
    position: absolute;
    {vb:stylevar left}: {vb:stylevar padding};
    width: {vb:stylevar forumicon_size};
}

.forumbit_post .foruminfo .forumdata, .forumbit_post .foruminfo .forumtitle, .forumbit_post .foruminfo .viewing {
    float: {vb:stylevar left};
    clear: {vb:stylevar right};
    color: {vb:stylevar forumbits_text_color};
}

.forumbit_post .foruminfo .viewing {
        white-space:nowrap;
}

.forumbit_post .foruminfo .forumdata {
    padding: 0;
    width: 100%;
}

.forumbit_post .foruminfo .forumdata .datacontainer {
    float: {vb:stylevar left};
    width: 88%;
    padding-{vb:stylevar left}: {vb:math {vb:stylevar forumicon_size} + {vb:math {vb:stylevar padding}*2}};
}

.forumbit_post .foruminfo .forumdata .forumtitle, .forumbit_nopost .forumbit_nopost .forumrow .forumtitle {
    font-size: {vb:math {vb:stylevar font.fontSize}+1}px;
    margin-{vb:stylevar right}: {vb:stylevar padding};
}

.forumbit_post .foruminfo .forumdata .forumtitle a, .forumbit_nopost .forumbit_nopost .forumrow .forumtitle a {
    font-weight:bold;
}

.childsubforum .forumbit_post .foruminfo .forumdata .datacontainer .forumtitle a {
        padding-{vb:stylevar left}:1.8em;
        background:url('{vb:stylevar imgdir_misc}/child_forum.png') top {vb:stylevar left} no-repeat;
}

.forumbit_post .foruminfo .forumdata .viewing {
    font-style: italic;
    margin-{vb:stylevar right}:{vb:stylevar padding};
    margin-top: 3px;
    font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
}

.forumbit_post .forumactionlinks {
    width: 5%;
    display:block;
    float:{vb:stylevar left};
    clear:{vb:stylevar right};
}

.forumbit_post .forumactionlinks li {
    display: inline;
}

.forumbit_post .forumactionlink {
/* values based on icon size */
    display:block;
    width:18px;
    height:12px;
    overflow:hidden;
    float: {vb:stylevar right};
    clear: {vb:stylevar left};
    background:transparent none no-repeat;
    position: relative;
    margin: 3px {vb:stylevar padding} 0 0;
}

.forumactionlink a {
/* values based on icon size */
    display:block;
    padding-{vb:stylevar left}:18px;
}

.forumactionlinks .rsslink {
    background-image:url({vb:stylevar imgdir_misc}/rss_40b.png);
}

.forumactionlinks .subslink {
    background-image:url({vb:stylevar imgdir_misc}/subscribed_40b.png);
}
.forumactionlinks .unsubslink {
    background-image:url({vb:stylevar imgdir_misc}/unsubscribed_40b.png);
}
.forumbit_post .forumdescription {
    display:block;
    clear:both;
    padding-{vb:stylevar right}: {vb:stylevar padding};
}

.forumbit_post .unsubscribe {
    display:block;
    {vb:stylevar right}: 0;
    top: 2px;
}

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
    display: block;
    float: {vb:stylevar left};
    clear: {vb:stylevar right};
    width: 12%;
    margin-{vb:stylevar right}: 2%;
}

.forumbit_post .forumstats li, .forumbit_post .forumstats_2 li{
    font-size: {vb:stylevar mid_fontSize}{vb:stylevar font.units};
    text-align: {vb:stylevar right};
    padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
    display:block;
}


.forumbit_post .forumlastpost {
    display:block;
    float: {vb:stylevar left};
    clear: {vb:stylevar right};
}

.forumbit_post .forumrow .forumlastpost {
    width: 22%;
    font-size: {vb:stylevar mid_fontSize};
    padding-top: {vb:math {vb:stylevar padding}/2};
}

.forumbit_post .forumlastpost .lastpostdate {
    font-size: {vb:stylevar small_fontSize};
}

.lastpostlabel { 
    display: none; 
}

.moderators, .subforums {
    display: block;
    clear:both;
}

.moderators h4, .subforums h4 {
    font-weight: bold;
    padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}/2};
}

.moderators h4, .moderators .commalist, .subforums h4, .subforms .commalist {
    float:{vb:stylevar left};
    clear:{vb:stylevar right};
}

/* Project Tools Forum Display */
.forumstats dt {
    display: inline;
    margin-{vb:stylevar right}: 0;
}

.forumstats dl {
    color: {vb:stylevar body_color};
    font-size: {vb:stylevar mid_fontSize};
    display: block;
    text-align: {vb:stylevar right};
}

.forumstats dd {
    display: inline-block;
    padding-{vb:stylevar left}: {vb:stylevar padding};
    padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
}

.forumstats dt:after {
    content:":";
}

.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
  border-top: 0;
}
.forumrow .table {
  height: 100px;
}
ol.childforum {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.childforum li.forumbit_post {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
#forums .L1 .L2 {
  clear:none;
}
.forumbit_post .forumrow .forumlastpost {
  clear:both;
  width:95%;
}
.forumbit_post .forumlastpost .lastpostby {
  display: block;
  float: left;
  margin: 5px;
}
.forumbit_post .forumlastpost .lastpostdate {
  display: block;
  float: right;
}
.forumbit_post .forumlastpost .lastposttitle {
  display: block;
  float: left;
}
.forumbit_post .foruminfo {
  clear:right;
  float:left;
  min-width:50%;
  width:70%;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
  width:20%;
}

in your template forumhome_lastpostby

replace all with

<vb:if condition="$show['lastpostinfo']">
    <p class="lastposttitle">
    <vb:if condition="$show['icon']"><img src="{vb:raw icon.iconpath}" alt="{vb:raw icon.title}" border="0" /></vb:if>
    <vb:if condition="$lastpostinfo['prefix']">{vb:raw lastpostinfo.prefix}</vb:if>
    <a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_newpost}}#post{vb:raw lastpostinfo.lastpostid}" class="threadtitle" title="{vb:rawphrase go_first_unread_in_thread_x, {vb:raw lastpostinfo.lastthread}}">{vb:raw lastpostinfo.trimthread}</a>
    <a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_newpost}}#post{vb:raw lastpostinfo.lastpostid}"><img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" /></a>
    </p>
    <div class="lastpostby">
    <vb:if condition="$lastpostinfo['lastposterid']">
        {vb:rawphrase by_x_memberaction, {vb:raw memberaction_dropdown}}
    <vb:else />
        {vb:rawphrase by_x_guest, {vb:raw lastpostinfo.lastposter}}
    </vb:if>

<br />
    <p class="lastpostdate">{vb:raw lastpostinfo.lastpostdate} <br /><vb:if condition="!$show['detailedtime']">{vb:raw lastpostinfo.lastposttime}</vb:if></p>
<vb:else />
    <span class="lastpostdate">{vb:raw lastpostinfo.lastpostdate} <vb:if condition="!$show['detailedtime']">{vb:raw lastpostinfo.lastposttime}</vb:if></span>

    </div>


    <a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_newpost}}#post{vb:raw lastpostinfo.lastpostid}"><img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" /></a>

</vb:if>

BONUS:

Lastest thread: as you see in the screenshot

How to install:
+ import product: I edited a little bit to make it work with my style. So if you install the Mod already, uninstall it first.

product-desihearts_latest_posts.xml c? trong folder Add-On

Thanks to Punjabi Munda

Ok, now you have a nice-looking navbar, until we have some update from another advanced topX.


How to edit navbar :-?

If you still want to have the navbar in screenshot,
I made it using css and jquery.

So follow the below steps to edit links:



How to add a button with a link:

<li><a href=" your link">Menu name</a></li>

How to add a menu with dropdown:

<li><a href=" your link">Menu name</a>
<ul class="subnav">  
<li><a href=" your link">Sub Menu 1</a></li> 
<li><a href=" your link">Sub Menu 2</a></li>
</ul>  
</li>

Remember to make sure all your code must in the class below:

<ul class="topnav">  

........
.......
</ul>

I will update it soon as I have another idea for this style.

Thank you for using my style and support.

If you really like it, mark as installed for better support.

For donators, I can help you with custom header and custom icons for your site.

It's currently in beta stage until vbulletin release final version. If you found any error, please report it, i will fix it asap.

Thank you.

Regards,
Haothiencz

[RagedGamers]

Originally Posted by @ngel

Forget it guys! There's no support for this!
Find yourself another template as we all did!

This template is free, calm down. I am sure this designer has other priorities too.

[ellinofatsa]

any fix???

[Nyks_4EveR]

Hi !!!

Nice style and i installed it, but i have only one problem with the layout of the Topic/post. When i add new thread/topic i get my topic on the left side, not in the middle.

How can i fix this, anyone who can help me?

Here is a screenshot of my problem:
http://img535.imageshack.us/img535/8982/adszalq.jpg

Best Regards
Nyks4ever

[@ngel]

I think that this thread should be locked in order to save new people from trying this theme! There is no support!

[NikeFootball]

Internet Explorer Problem ?

Under the banner link in this picture, namely the Internet explorer 6 problem

http://i39.tinypic.com/11v4mxd.jpg

it's normal ie8 and firefox

http://i41.tinypic.com/5np6pg.jpg

[Jman423]

It appears that this coder has pretty much abandoned this template. It hasn't been updated lately, and the coder hasn't even bothered to respond to anyone's request for help. It seems clear that we are on our own here.

There is a problem that occurs when viewing via IE8 in compatibility mode (or earlier versions) where the login boxes/welcome message is displayed below the header (above the navbar) instead of at the very top of the header where it belongs, as shown in the last post. If anyone figures this out, please let us know as it seems like this is a bug in the template.

[ellinofatsa]

nice theme how can i make this skin foul with?
any help for that?

[TheTrust]

i hope you make fluid .... anyway haothiencz

[customcolor]

Originally Posted by NikeFootball

Internet Explorer Problem ?

Under the banner link in this picture, namely the Internet explorer 6 problem

http://i39.tinypic.com/11v4mxd.jpg

it's normal ie8 and firefox

http://i41.tinypic.com/5np6pg.jpg

i think the fix will be in the chrome.css template....

i was fooling around trying to get the log in to go some where else that i saw in another template and i only found one template that was differant...it was the chrome.css

its a start..??

[customcolor]

Originally Posted by ellinofatsa

nice theme how can i make this skin foul with?
any help for that?

go to styles and templates......style manager.....style vars......search for doc_width.......change setting to 100 % and not 1022 px


that should stretch it out wider but the header may repeat and not stretch doing it this y have to make a new header to streatch out better.