IPB (Invision) CSS Fix Guide

by Placehold on November 15th 2008, 8:00 am

Recently Forumtion released a new forum version called "Invision", Also known as IPB however ..... This new forum being so new does have a couple of bugs that are currently being rectified, In the meantime there is a temporary fix for most of these bugs, Below is instructions and a list of issues the fix rectifies.

The Fix Rectifies:

On Main Forum

On main Forum - Gap between forum titles and threads
Larger Time and Footer
The removal of the empty box next to the "Forum Text"

In the Profile

Levels "Watched Topics" tab with other tabs
Pulls up "Information Section" inline with the tabs

Posts (These Are Adjustable)

Aligns Post profile tab icons
Aligns msn,icq,yahoo and aol icons
Enlarges post profile tab avatar
Removes lines from post profile tab
Aligns lists in previews

FAQ

Aligns answers in FAQ

1. Log into your forum and navigate to

Admin Panel\Display\Colors\CSS Stylesheet

2. Add the following code and press "Submit" to save

***In some cases the following code "!important;" tags are not read in IPB and you may need to disable the basic forum CSS, Select to view the forum CSS, Add it to the CSS box and manually search and replace the following***

Spoiler:: dl.faq dd {
padding: 1.2em !important;
}
.ipbtable th.icon {
border-right: 0px !important;
}
#preview .content {
padding: 1.2em !important;
}
#gfooter {
font-size: 12px !important;
font-weight: bold !important;
}
.maintitle {
margin-bottom: -5px !important;
}
.box-content.profile {
margin-top: -3px !important;
}
div.maintitle {
min-height: 1.3em !important;
}
.maintitle.floated.dropped {
margin-bottom: -9px !important;
}
.popupmenu .avatar {
float: right !important;
margin: 3px !important;
width: 80px !important;
height: auto !important;
background: url('') no-repeat !important;
border: 0px !important;
}
.popupmenu .avatar img {
display: block !important;
width: 80px !important;
height: 120px !important;
border: 0px !important;
}
.profile-view .avatar img {
display: block !important;
margin: 5px auto !important;
border: 0px !important;
}
.popupmenu-item {
border: 0px !important;
}
.i_icon_msnm {
margin-left: -8px !important;
margin-bottom: -10px !important;
position: absolute !important;
min-width:24px !important;
}
.i_icon_aim {
margin-left: 6px !important;
margin-bottom: -10px !important;
position: absolute !important;
min-width:24px !important;
}
.i_icon_yim {
margin-left: 33px !important;
margin-bottom: -10px !important;
position: absolute !important;
min-width:24px !important;
}
.i_icon_skype {
display:none !important;
}
.i_icon_icq_add {
margin-left: 60px !important;
margin-bottom: -9px !important;
position: absolute !important;
min-width:24px !important;
}
.popupmenu li a.profile-icon {
display: block !important;
float: left !important;
width: 30px !important;
height: auto !important;
margin: 0 0 0 -8px !important;
text-align: center !important;
font-size: 9px !important;
}

3. Now navigate to

Admin Panel\General\Configuration

4. Add the following code to the "Site description * :" and press "Save"

Spoiler::

The second code will detect if the user if using Internet Explorer and use a second CSS that i have created which directly reflects the changes listed above.

If you are having issues with the above code please PM me with the issue as the Subject, Quick explanation and a link to your forum

Regards

Craig