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

[haothiencz]

Ok, after quick test:

CMS style doesnt show it's not my mistake

just

edit your section with the pencil and change the style option there to the style you want it to be

I added a screenshot below:

[amjadz4]

To make it fluid or fixed go here:
https://vborg.vbsupport.ru/showthread.php?t=231671


Nice theme!

[buurman]

Looks good, looks very good!

Fist style I like for 4.0!

Is it possible to center the background instead of to the left?

On a big resolution it looks strange.....

[buurman]

The fixed 1022 is just a little to small for my taste, 1280 is more my thing.

But still, its looks great!!

[haothiencz]

Bg will be fixed soon for resolution more than 1440, dude

Thank you for ur support.

[cloferba]

Originally Posted by buurman

Looks good, looks very good!

Fist style I like for 4.0!

Is it possible to center the background instead of to the left?

On a big resolution it looks strange.....

yes please...and make a white background..

only a few logos can be applied on a black background

[kevin2008]

thank very much,

but i have problem with submenu autoreply when this sublist over-write any text or object, please have you solution ?

[LbR]

Okay, Frankly this is the wonderful thing I saw just now, In this entire section no one doesn't own such great Free Design, Its a good work, Indeed excellent work and shows how vBulletin 4 skin can be customized well, I won't be using it as my forum is bit Webmaster touch so it won't suit up, Though if i had something like Fashion or music community it would have been my first choice, Thanks for your hard work

[Crazyfruitbat]

I have just installed this theme and it is absolutely bloomin great! Quite possibly the only template that has actually been 'designed' so far!

I have two small things I have noticed
1. If you click on settings there is one set of boxes on the left that are still VB blue
2. PSD file that is attached is not at the right dimension, the width should be 1022

so only small things - otherwise a brilliant piece of work - I'm going to hold onto this for when my 4.0 site goes live.

Thank you very much!

[Crazyfruitbat]

I have one more for you, if you look at some Poll results you can't see the text on the top right of the box that says 'You have already voted on this poll'. At the moment it's in white so its almost unseeable