PDA

View Full Version : Is It Possible to Create A Custom Header?


d0cpaul
17 Aug 2010, 15:22
I recently upgraded from VB 3.8.6 to 4.0.6 Patch Level 1 and I was wondering if it is possible to add my custom header from my old forum to my new forum? I know they removed the Main CSS feature and what not but I would like to know how I could include my custom header in my newly updated forum..

Here is my html that was included in the HTML:

<!--[START-LC]--><link rel='stylesheet' type='text/css' href='http://www.loansafe.org/blog/wp-includes/js/ls-big-nav-forum.css'/><!--[END-LC]-->



<style type="text/css">
img {
border: 0;
}
</style>

</head>

<body>

<script type="text/javascript" src="http://www.loansafe.org/forum/autolinker/autolinker.js"></script>

<div class="OuterWrapper">
<div class="topMain">
<div class="topWrapper">
<div class="topAdd">

<a href="http://www.youwalkaway.com/" rel="nofollow">
<img src="http://www.loansafe.org/blog/wp-content/uploads/2010/05/ls-YWA-banner-620x90-blue.gif" width="620" height="90" align="left" alt="YouWalkAway" border="0" /></a> </div>


<div class="googleSearch"><form action="http://www.google.com/cse" id="cse-search-box">
<input type="hidden" name="cx" value="partner-pub-9439165354589625:1vqs4u-1gc1" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="30" />
<input type="submit" name="sa" value="Search" />
</div>

</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>




</div>
</div>


<div>


<div class="loanWrapper">
<div class="logo"><a href="http://www.loansafe.org"><img src="http://www.loansafe.org/blog/wp-content/themes/LOANSAFE_WP-THEME/images/logo.jpg" alt="" /></a></div>
<div class="topColumns">

<div class="column">
<div class="columnImg">
<a href="http://www.loansafe.org/forum/register.php">
<img src="http://www.loansafe.org/blog/wp-content/themes/LOANSAFE_WP-THEME/images/columnImg1.jpg" width="60" height="53" alt="" />
</div>
<div class="columnText">Tell Your Story! Please join over 33,000 members in our forum
</a>
</div>
</div>

<div class="column">
<div class="columnImg">
<a href="http://www.loansafe.org/elizabeth-warren-%E2%80%93-wall-street%E2%80%99s-new-cop">
<img src="http://www.loansafe.org/blog/wp-content/uploads/2010/08/vid412.gif" width="60" height="53" alt="" />
</div>
<a href="http://www.loansafe.org/elizabeth-warren-%E2%80%93-wall-street%E2%80%99s-new-cop">
<div class="columnText">Elizabeth Warren – Wall Street’s new cop?...
</div>
</a>
</div>

<div class="column">
<div class="columnImg">
<a href="http://www.loansafe.org/federal-reserve-proposes-significant-changes-to-regulation-z-truth-in-lending-to-protect-consumers">
<img src="http://www.loansafe.org/blog/wp-content/uploads/2010/08/United_States_Federal_Reserve_Board_1917.jpg" width="60" height="53" alt="" />
</div>
<div class="columnText">Federal Reserve Proposes Significant Changes to Regulation Z...
</a>
</div>
</div>

</div>
</div>

<div class="topNav">
<div class="nav">




<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script><!--[END-QM0]-->
</div>

<!-- Begin PageBar -->
<div id="pagebar">

<div class="pagebar-left">

<script type="text/javascript"><!--
google_ad_client = "pub-9439165354589625";
/* 728x15, created 5/19/10 */
google_ad_slot = "2347718186";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>
<!-- End PageBar -->

</div>




</td>

</tr>

</table>

</td>

</tr>

</table>


And here is the CSS I used:

/* ***** Custom CSS for Header and Featured Articles ***** */

.OuterWrapper{
width:984px;
margin:0 auto;
overflow:hidden;
}
.topMain{
background:#fff;
width:980px;
float:left;
*padding-bottom:8px
}
.topWrapper{
width:984px;
float:left;
}
.topAdd{
float:left;
padding:5px 0 5px 5px;
}
.googleSearch{
float:right;
padding:5px 28px 72px 0;
}

.loanWrapper{
width:984px;
float:left;
background:url(http://www.loansafe.org/blog/images/blueBg.jpg) repeat-x;
height:92px;
}

.logo{
float:left;
padding:16px 0 0 12px;
}

.topColumns{
width:556px;
float:right;
padding:20px 9px 0 0;
}

.column{
width:185px;
float:left;
}

.columnImg{float:left;}

.columnText {
float:left;
width:110px;
padding:0 5px 0 10px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:13px;
}

.column a {
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:13px;
text-decoration: none;
}

.column a:visited {
color: #ffffff;
text-decoration: none;
}

.column a:hover {
color: #ffffff;
text-decoration: underline;
}


.topNav{
width:984px;
float:left;
}

.nav{
width:984px;
float:left;
background:url(http://www.loansafe.org/blog/wp-includes/images/navbar.gif) repeat-x;
height:26px;
}

#pagebar {

background: #527db0;
width: 980px;
height:15px;
color: #ffffff;
font-size: 11px;
font-family: Arial, san-serif;
margin: 0px auto 10px;
padding: 8px 10px 8px 10px;
overflow: hidden;
border-top: 1px solid #5B80FF;
}

.pagebar-left {
min-width: 450px;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}

#footer {
width: 960px; }

.postbottomBannerMain{ float:left; padding:30px 0 30px 0; background:url(images/bottom_bg.jpg) no-repeat center bottom; width:984px;height:200px;}
.bottomBannerMain{ float:left; padding:30px 0 30px 0; background:url(images/bottom_bg.jpg) no-repeat center bottom; width:984px;}
.bottomBanner{padding-left:180px;}
.bottomImg{padding-left:135px;}

.footerWrapper{width:970px; background-color:#d9e4f2; margin:0 auto; height:71px;}
.footerLinks{width:970px; margin:0 auto; padding-top:18px; color:#1a1a1a; line-height:18px;}
.footerLinks a{color:#1a1a1a; line-height:18px; text-decoration:underline; font-weight:normal;}
.footerLinks a:hover{color:#1a1a1a; line-height:18px; text-decoration:none;}

#graylinebox-repeater, #short-footer a {
color:#2C77BC;
text-decoration:none;
}

#graylinebox-repeater {
background:url("http://www.loansafe.org/blog/wp-content/uploads/2010/07/fat-footer-forum2.gif") no-repeat scroll left top transparent;
float:left;
height:250px;
margin:0 0 10px;
padding:0;
width:960px;
}

#graylinebox-repeater a {
color:#22229C;
line-height:17px;
text-decoration:none;
}

#graylinebox-repeater a:hover {
color:#22229C;
text-decoration:underline;
}


#graylinebox-repeater span {
color:#435040;
font-weight:bold;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
line-height:200%;
}

#graylinebox-repeater span a {
color:#435040;
font-weight:bold;
line-height:200%;
}

#graylinebox-repeater span a:hover {
color:#435040;
font-weight:bold;
line-height:200%;
text-decoration:underline;
}

#graylinebox-repeater p {
clear:both;
line-height:10px;
padding:0;
}

#graylinebox-repeater .column {
float:left;
margin:auto 20px;
width:200px;
}

#hpboxheader {
background:url("http://www.loansafe.org/blog/wp-content/uploads/2010/07/fat-footer-title-forum.gif") no-repeat scroll left top transparent;
color:#000000;
float:left;
font-size:138.5%;
font-weight:bold;
height:28px;
line-height:120%;
margin:5px 0 0 0x;
padding:5px 10px 0;
width:940px; }