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]

First I installed the previous version of the style. Then I uploaded the new Fixed xml file. That's when this error started showing up.

I don't want to publicly link to the site here, and cannot give login codes.

Sorry I'm unable to help you if you don't give any specific site to take a look and fix the code.

Regards,
Haothiencz

[alessai]

my friend i cant find the PSD file for the header where is it?

[haothiencz]

Reuploaded.

You should download it without any problem rite now.

Regards,
haothiencz

[alessai]

yeah, thanx (and for the super fast reply u get Excellent vote)

[hqlman]

By far the best theme ive used in a long time and quick support by the author, great stuff mate

[daveaite]

Nice looking skin. =)

[macc]

Hello ...nice skin!

one question.. have installed on my test site... how to get forum columns also in your style (mean sidebar columns on forumhome page or on blogs)?

you can also look on this picture http://i50.tinypic.com/25kij36.jpg and you can see on right side is still borders from default vb style.

hope you can help

regards

macc

[durdan1]

Hi I like this skin alot. I just have one problem, how do I change the white on the forum colors. I want to change these two to something darker. I have posted a screenshot extension. My website is www.raging-angels.com

[ximcix]

I LOVE YOU haothiencz!!!

I was really worried about vB4's custom skins & how they would look as most that i've seen look just like the default skin with color changes

[haothiencz]

We have on plan to release updated version of this skin and a new style tomorrow.

Also, anybody have any suggestion about the next update of this skin or another skin?

Most of your request has been completed in Revolution version.

Still working on some small details.

Let see what I can do

Thank you guys for your nice comment and support.

Also giving my big thanks to donators who support me to continues the free update for this style.


Regards,
Haothiencz