How to use wordpress theme templates for skin?

N

Nanana

New Member
Hi, what I want to do is use my existing layout from my wordpress (header, sidebar, footer etc.) as the design for my vbulletin forum. I know the templates are pretty differently coded, so I wanted to know if there is any easy way to do this.

Thanks in advance.
 
I was playing around yesterday with a nice html/css template yesterday trying to convert/make it into a vB style, I dont know if WP has its own coding but it was simple enough to do, add the coding to the assosiated vB template and add the css to the addditional css area at the bottom of vB style manager :)
 
okay, it's turned out fine for the most part, however I have hit 2 problems so far.



The first thing I want to change is how the word "home" is positioned on that button. On my blog it's positioned like this:



If it's any help, here is my CSS
Code: 
/*  
Theme Name: Business Trend
Theme URI: http://www.solidthemes.com
Version: 1.0
Description: Business Trend is a Navy blue/White color, Widget Enabled, Adsense Ready, 2 Columns exclusive WordPress Theme. Brought to you by <a href="http://www.solidthemes.com/">SolidThemes.com</a> in association with <a href="http://www.inetzeal.com/">iNetZeal</a>.
Author: Tanbir
Author URI: http://www.solidthemes.com
*/


/* Body */


body { 

 font-family: "Trebuchet MS", Tahoma, Arial, Helvetica; font-size: 13px;
 background: #084971 url(images/bg.gif) repeat-x; 
 margin: 0;
 padding: 0;
 color: #3c3c3c;
 }

#box {
 background: #fff;
 width: 940px;
 margin: 0 auto;
 padding: 0 1px 0 1px; }

#top {
 width: 940px;
 background:#ffffff url(images/header/header.jpg) no-repeat;
 height: 220px;
 margin-top: 0px;
 }

a, a:link {
 text-decoration: none;
 color: blue;
 }

a:hover {
 text-decoration: underline;
 color: blue;
 }

hr {
 border: none;
 border-top: 1px solid #ccc;
 }

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

.hidden {
	display: none;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
/* End Various Tags & Classes*/



/* Captions */
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}


.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */


/* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
	It won't be a stylish marriage, I can't afford a carriage.
	But you'll look sweet upon the seat of a bicycle built for two." */



/* Header */


#header {
 float: left;
 width: 940px;
 margin: 90px 0 0 0px;
 padding: 0;
 }

#header h1 {
 font-family: "Trebuchet MS", Arial, Verdana, Helvetica;
 margin: 0;
 padding: 0;
 color: #f2f2f2;
 font-size: 39px;
 font-weight: normal;
 }

#header h1 a, #header h1 a:link {
 color: #ffffff;
 margin-left: 200px;

 }

#header h1 a:hover {
 color: #ffffff;
 text-decoration: none;
 }

#description {
 color: #ffffff;
 font-size: 14px;
 padding: 0 0 0 210px;
 }


/* Search */


#searchform {
 height: 25px;
 line-height: 20px;
 float: right;
 padding: 10px 18px 0 0;
 margin: 0;
 }

#searchform #s {
 font-size: 12pt;
 width: 160px;
 }

#searchform #submit {
 font-size: 8pt;
 }

input#s {
 font-family: Verdana, Arial;
 text-align: left;
 border: 1px solid #ccc;
 background: #fffffb;
 color:#2c455b;
 }


/* Menu */


#navbox {
 background: url(images/nav.jpg) repeat-x top center;
 height: 43px;
 margin: 0px auto; }

#nav {
 width: 700px;
 height: 28px;
 line-height: 28px;
 float: left;
 padding: 0;
 }

ul.nav {
 height: 28px;
 line-height: 28px;
 float: left;
 list-style: none;
 font-size: 12px;
 font-weight: bold;
 text-transform: uppercase;
 margin: 0;
 padding: 0;
 }

ul.nav li {
 float: left !important;
 list-style-type: none;
 margin: 0;
 padding: 0; 
 height: 35px;
 }

ul.nav li ul {
 float: left;
 margin: 0;
 padding: 0;
 }

ul.nav li a, ul.nav li a:link, ul.nav li a:visited {
 border-right: 1px solid #808080;
 color: #c8c7c7;
 float: left;
 display: block;
 text-decoration: none;
 padding: 7px 25px 0 26px;
 margin-top:1px;
 height: 35px;
 }

ul.nav li a:hover, ul.nav li a:active {
 background: url(images/nav-hover.png) repeat-x;
 color: #fffffd;
 text-decoration: none;
 height: 35px;
 padding: 7px 25px 0 26px;
 }

ul.nav li.current_page_item a {
 text-decoration: none;
 height: 35px;
 background: url(images/nav-hover.png) repeat-x;
 color: #fffffd;
 }


/* Posts */


.post {
 width: 640px;
 float: left;
 margin: 5px auto;
 padding: 10px 0 0 0;
 }

.post img {
 border: none;
 padding: 5px;
 }

h2 {
 font-size: 22px;
 font-weight: normal;
 padding: 0px;
 margin: 0px;
 color:#2c455b;
 }


#content {
 width: 495px;
 float: left;
 margin: 5px 0 0 10px;
 padding: 0;
 }

.notes {
 padding: 10px 0 0 0;
 font-size: 18px;
 color:#2c455b;
 text-align: center;
 line-height: 12px;
 font-weight: bold;
 }

.posthead {
 position: relative;
 clear: left;
 padding-bottom: 10px;
 }

.posthead h2 {
 font-size: 22px;
 font-weight: normal;
 padding: 0px 0px 0px 50px;
 margin: 0px;
 }

.posthead h2 a {
 color: #2c455b;
 }

.postauthor {
 padding: 0px 0px 0 50px;
 margin: 0px;
 font-size: 10px;
 color:#666;
 }

.postauthor a{
 color:#2c455b;
 text-decoration: none;
 border-bottom: 1px dotted #2c455b;
 }

.postdate {
 margin: 0px;
 position: absolute;
 top: 0px;
 left: 0px;
 text-align: center;
 padding: 0px 10px 6px 10px;
 background: url(images/date.gif) no-repeat;
 }

.postdate small {
 font-size: 9px;
 color:#fffffa;
 }

.postdate .month {
 display:block;
 text-transform: uppercase;
 font-size: 9px;
 padding-top: 1px;
 }

.postdate .day {
 display:block;
 font-size: 22px;
 letter-spacing: -1px;
 font-weight: normal;
 color:#fffffd;
 }

.postdate .year {
 display:block;
 }

.navigation {
 width: 510px;
 float: left;
 color: #666;
 padding: 5px 6px 10px;
 }

.navigation a{
 color: #162a3b;
 font-weight: bold;
 text-decoration: none;
 border-bottom: 1px dotted #162a3b;
 }

.navigation a:hover {
 border-bottom: 1px solid #162a3b;
 }

.relatedposts {
 width: 535px;
 float: left;
 color: #2c455b;
 margin: 0px auto;
 padding: 10px 5px 5px 0px;
 font-size: 12px;
 }

.relatedposts li a{
 border-bottom: 1px dotted #2c455b;
 line-height: 20px;
 margin-right: 10px;
 }

.relatedposts li a:hover{
 border-bottom: 1px solid #2c455b;
 text-decoration:none;
 }

h1, h2, h3 {
 padding: 0 10px 0 0;
 font-family: "Trebuchet MS", Arial, Verdana, Helvetica;
 text-transform: none;
 }

h3 {
 color: #2c455b;
 font-size: 16px;
 }

img.wp-smiley {
 border: 0;
 padding: 0;
 }

blockquote {
 color: #222222;
 font-weight: normal;
 padding-left: 10px;
 border-left: 1px dotted #2c455b;
 }


/* Sidebars */


#sidebar {
 width: 410px;
 float: right;
 margin-top: 0px;
 margin-right: 5px;
 padding: 0;
 }

#sidebar img, .lsidebar img {
 border: none;
 }

.alignright {
 float: right;
 margin-top: 10px;
 }

.alignleft {
 float: left;
 margin-top: 10px;
 }

.rsidebar {
 width: 205px;
 float: right;
 margin: 20px 10px 0 0;
 padding: 0 10px 5px;
 }

.rsidebar, .lsidebar img {
 border: none;
 }


.rsidebar h2 {
background: url(images/h2.jpg) repeat-x;
 font-size: 18px;
 margin: 0 0 0px;
 padding: 10px 0 10px 5px;
 height: 15px;
 width: 215px;
 color: #162a3b;
 border-bottom: 1px solid #2c455b;
 }
.rsidebar ul, .lsidebar ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

.rsidebar ul li{
 display: block;
 list-style-type: none;
 padding: 0 0 10px 0;

 }


.rsidebar ul li a, .lsidebar ul li a {
 font-size: 13px;
 color:#2c455b;
 margin: 10px 0 1px 0px;
padding: 0px 0 1px 15px;
 line-height: 1.8em;
 border-bottom: 1px dotted #2c455b;
background: url(images/bg1.gif) no-repeat; 
}


.rsidebar ul li a:hover, .lsidebar ul li a:hover {
 text-decoration:none;
 border-bottom: 1px solid #2c455b;

 }


.rsidebar ul li ul{
 list-style-type: none;
 margin: 0;
 padding: 5px 0 0 5px;
 }
.rsidebar ul li ul li, .lsidebar ul li ul li {
 list-style-type: none;
 margin: 0 0 0 10px;
 padding: 0 0 0 5px;
 }

.rsidebar p, .lsidebar p {
 padding: 0 5px;
 }


/* Footer */


#footer {
 width: 940px;
 background: url(images/footer.jpg) repeat-x;
 height: 54px;
 clear: both;
 color: #c3c2c2;
 font-size: 12px;
 margin-bottom: 10px;
 text-align: right;
 }

#footer a {
 color: #fffffa;
 border-bottom: 1px dotted #c3c2c2;
 }

#footer a:hover {
 border-bottom: 1px solid #c3c2c2;
 text-decoration: none;
 }

#footer p {
 padding: 3px 10px 10px 0;
 }

.left {
 float: left;
 padding: 19px 0 0 20px;
 }

.right {
 float: right;
 padding: 19px 20px 0 0;
 }

/* Comments */


.commentsbox {
 width: 520px;
 float: left;
 margin: 5px auto;
 }

.commentsbox p {
 margin: 0;
 padding: 0;
 }

.commentsbox img {
 border: 1px solid #666;
 margin: 3px;
 }

#commentlist ol {
 margin: 0;
 padding: 0;
 }

#commentlist li {
 list-style-position: outside;
 list-style-type: decimal;
 padding: 10px;
 }

.alt {
 background-image: none !important;
 }

#commentlist li:hover {
 }

.comment-title {
 margin: 0 0 0 0px;
 font-size: 12px;
 color: #2c455b;
 font-weight: bold;
 }

.comment-title2 {
 margin: 0 0 0 0px;
 font-size: 10px;
 color: #2c455b;
 }

.comment-text {
 margin-top: 10px;
 }

h2.postcomment {
 margin: 0;
 font-size: 20px;
 font-weight: normal;
 color: #2c455b;
 }

.postcomment {
 clear: both;
 margin: 20px 0 0 0;
 padding: 0px;
 }

.postcomment input, .postcomment textarea {
 border: 1px solid #aaa;
 }

.postcomment input:hover, .postcomment textarea:hover {
 background: #eeeeee;
 }

.postcomment input#author, .postcomment input#email, .postcomment input#url {
 width: 40% !important;
 width: 156px; /* IE hack */
 height: 18px;
 }

.postcomment textarea#comment {
 width: 80% !important; /* IE hack */
 height: 200px;
 }

.postcomment input#submit {
 width: auto;
 height: 25px;
 padding: 2px 10px 3px 10px;
 margin-top: 10px;
 }
	


/* Bottom */


#bottom {
 clear: both;
 float: left;
 width: 940px;
 height: 100%;
 margin: 0 0 0 0;
 padding: 0;
 background: #fafafa url(images/bot.jpg) no-repeat top center;
 text-align: left;
 font-size: 12px;
 }

#bottom-divs {
 float: left;
 clear: both;
 margin: 0;
 padding: 20px;
 }

#bottom-left {
 width: 30%;
 padding: 15px 0 15px 20px;
 float: left;
 }

#bottom-mid, #bottom-right {
 width: 30%;
 padding: 15px 0 15px 30px;
 float: left;
 }

#bottom h2 {
 margin: 0 0 10px 0;
 padding: 0 8px;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 border-bottom: 1px solid #192e40;
 }

#bottom h3 {
 margin: 0;
 padding: 10px 10px;
 font-size: 12px;
 color: #999;
 text-align: center;
 }

#bottom h3:hover {
 color: #f2f2f2;
 }

#bottom ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }

#bottom ul li {
 line-height: 20px;
 border-bottom: 1px dotted #2c455b;
 }

#bottom ul li a {
 display: block;
 padding: 0 10px;
 color: #2c455b;
 }

#bottom-sep {
 clear: both;
 }

#bottom p {
 text-align: justify;
 }

Any coding help with that is appreciated :)

Next problem is the search bar in the first image. The current coding for it applies to wordpress, so I want to know how to change it to work for search.php

Here is the header template from my blog, the search box part is near the bottom:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if (is_single() || is_page() || is_archive()) { ?><?php wp_title('',true); ?> | <?php } ?><?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?><?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="box">
<div id="top">
<div id="header"><h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1></div>
<div id="description"><?php bloginfo('description'); ?></div>
</div> <!-- end top -->

<div id="navbox">

<div id="nav">
<ul class="nav">
<li class="<?php if ( is_home() ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div> <!-- end nav -->

<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/" ><input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" size="18" maxlength="50" name="s" id="s" />
</form>

</div> <!-- end navbox -->

If anyone can help I'd greatly appreciate it :)
 
scrap that, the coding is way too different and ends up breaking the post system. I guess I need to find a way of embedding the forum into the wordpress theme.
 
You must log in or register to reply here.
Back
Top