I've almost completed the conversion of the WordPress Fluid-Blue theme to Drupal. Here are the remaining problems;

I want the "search" module to appear on the right...not left

something has taken two "bites" out of my right sidebar

The blue bottom should extend all the way across...like the top blue header.

Here's links to two jpeg screenshots that show all.

http://www.asianproav.com/images/Fluid_Blue_Top.jpg

http://www.asianproav.com/images/Fluid_Blue_Bottom.jpg

When finished I'd like to contribute this theme to the community.

Thank you.

Here's the contents of my page.tpl.php file;

<!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" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

<body>

<div id="page">
<div id="header">
 <?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
      <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>

	<div id="headertitle">
		<h1></h1>
		<p></p>
	</div> 
	 <?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>		
</div>
<div id="navbar">
<ul id="nav">
<?php print theme('links', $primary_links); ?>
</div>
<div id="wrapper">
<div id="content">

			 <?php print $breadcrumb; ?>
<?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>

<div id="content">
<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<?php if ($show_messages): print $messages; endif; ?>
<?php print $help; ?>

<?php print $content; ?>
		
	
	</div>
	<div id="sidebar">
		<?php print $right; ?>

</div> <!-- wrapper -->
<div id="footer">
	
		<!-- 20 queries. 0.645 seconds. -->
	


<?php if ($footer_message || $footer) : ?>
<div id="footer-message">
    <?php print $footer_message . $footer;?>
    <br>
</div>
<?php endif; ?>
</div> <!-- page -->
</body>
</html>

Comments

tomaja’s picture

You should go to your style.css (or any_name.css you have as default css file) and change #block block-theme to fit search box on the right side. Similar goes for footer.

Linux4life

ckleiman’s picture

I couldn't find the class in the css. I could try to make one and call it block block-theme and give it some parameters unless you have a better idea, hopefully? Here's the css below;

/*
Theme Name: Fluid Blue
Theme URI: http://srinig.com/wordpress/themes/fluid-blue/
Description: A simple two column fluid width theme. Right sidebar supports widgets. Tags and gravatars supported. Valid XHTML and CSS.
Version: 1.7.2
Author: Srini G
Author URI: http://srinig.com/wordpress
Tags: blue, light, two-columns, flexible-width, right-sidebar, threaded-comments

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

body {
	margin:0;
	background:#fff;
	color:#444;
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align:center;
}

a { 
	color:#258;
	text-decoration:none;
}

a:hover {
	text-decoration:underline; 
}

h1, h1 a, h2, h2 a, h3, h4, h5, h6 {
	margin-bottom:0;
	color:#27a;
	text-align:left;
}

h1 {font-size:2.6em;}
h2 {font-size:2em;}
h3 {font-size:1.6em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:0.8em;}


img {
	border:0;
}

input {
	font-size:1.2em;
}

input[type=text], textarea{
	background:#fff;
	border:1px inset #aaa;
}
input[type=submit] {
	background:#eee;
	border:1px outset #aaa;
}

textarea {
	font-size:12px;
}

pre {
	font-size:12px;
	overflow:auto;
}
code {
	font-size:12px;
	background-color:#f8f8f8;
	color:#111;
}

/* Layout */
#page {
	min-width:760px;
	margin:0 auto;
	text-align:left;
}

#wrapper {
	margin:0 5%;
	padding-right:230px;
}

#content{
	float:left;
	width:96%;
	border-right:230px solid #eee;
	margin-right:-230px;
	padding:20px 4% 20px 0;
}

#sidebar{
	float:left;
	width:190px;
	margin:0 -230px 0 0;
	padding:20px;
	background:#eee;
}

#footer {
	clear:both;
	padding:10px;
	border-top:0.2em solid #555;
}

/* Header */

#header {
	margin:0;
	padding:2em 0;
	height:4.8em;
	background:#237ab2;
}

#headertitle {
	float:left;
	position:absolute;
	top:2.4em;
	left:5%;
}
#headertitle h1 {
	margin:0;
}
#headertitle h1 a {
	background:transparent;
	color:#fff;
}
#headertitle h1 a:hover {
	text-decoration:none;
}

#headertitle p {
	margin:0;
	background:transparent;
	color:#fff;
	font-size:1.1em;
}

.search {
	float:right;
	padding:1.5em 5% 0 0;
}
.search form {
	margin:0;
	padding:0;
}
.search input {
	display:inline;
	width:218px;
	border:1px solid #69b;
	margin:0;
	padding:0.2em 5px;
	background:#38b;
	color:#ddd;
	font-size:1.1em;
}


/* Top navigation */
#navbar {
	border-top:0.1em solid #555;
	border-bottom:0.1em solid #555;
	background:#165279;
	height: 2.3em;
	margin: 0px;
	padding: 0px ;
}


	
#nav {
	margin:0 5%;
	padding: 0;
	list-style: none;
	}
	
#nav ul {
	padding:0.1em 0 0 0;
	margin:0;
	list-style: none;
	background:transparent;
	}

#nav a {
	color:#c6c8c9;
	display: block;
    font-weight: bold;
	padding: 0.5em;
	}
	
#nav a:hover {
	background: #237ab2;
	color: #fff;
	display: block;
	text-decoration: none;
	padding: 0.5em;
}

#nav li {
	float: left;
	margin: 0;
	text-transform:uppercase;
	padding: 0 2em 0 0;
}
	
#nav li li {
	float: left;
	margin: 0;
	padding: 0;
	width: 14em;
	}
	
#nav li li a, #nav li li a:link, #nav li li a:visited {
	background: #165279;
	color: #c6c8c9;
	width: 14em;
	float: none;
	margin: 0;
	padding: 0.5em ;
	border-bottom: 1px solid #aaa;
	}
	
#nav li li a:hover, #nav li li a:active {
	background: #237ab2;
	color: #fff;
	}

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	}

#nav li:hover ul {
	left: auto;
	display: block;
	}
	
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	}


/* Sidebar */


#sidebar ul {
	padding:0;
	margin:0;
	list-style: none;
	font-size:1.1em;
}
#sidebar ul ul {
	font-size:1em;
}

#sidebar ul li {
	margin:0 0 2em 0;
}

#sidebar ul ul {
	margin:0;
	padding:0;
}

#sidebar li li {
	margin:0.1em 0;
}

#sidebar li li li {
	padding-left:10px;
}

#sidebar ul h2 {
	margin:0;
	padding:0;
	color:#4588c4;
	font-size:1.2em;
	text-transform:uppercase;
}


/* Footer */
#footer { 
	text-align:center;
	font-size:1em;
	background:#165279;
	color:#eee;
}

#footer a {
	color:#aac;
}

/* Post */
.post {
	margin:0 0 4em 0;
	clear:both;
}

.post p, .post ol li, .post ul li{
	margin-top:0;
	font-size:1.2em;
	line-height:1.5em;
	text-align:justify;
}
.post li li {
	font-size:1em;
}
.post blockquote {
	padding:0 0 0 2em;
	border-left:0.4em solid #ccc;
	font-size:0.9em;
}
.post blockquote blockquote {
	margin-left:0;
	font-size:1em;
}

.postentry a {
	border-bottom:1px solid #ddd;
}
.postentry a:hover {
	border-bottom:1px solid #258;
	text-decoration:none;
}

.postmetadata {
	clear:both;
	margin:1em 0;
	font-size:1.1em;
	color:#888;
	text-align:justify;
}

div.navigation {
	font-size:1.1em;
}

.postentry table {
	border-width:0 1px 1px 0;
	border-style:solid;
	border-color:#ccc;
	font-size:0.9em;
}


.postentry table tr td {
	padding:5px 10px;
	border-width:1px 0 0 1px;
	border-style:solid;
	border-color:#ccc;

}

.postentry table tr th {
	border-width:1px 0 0 1px;
	border-style:solid;
	border-color:#ccc;
	padding:5px 10px;
	background:#f4f4f4;
	color:#666;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}

/* Comments */

#comments {
	font-size:1.2em;
}

.commentlist {
	margin:20px 0;
	padding:0;
	border-width:0 0.1em 0.1em 0;
	border-color:#eee;
	border-style:solid;
}

.commentlist li {
	list-style:none;
	margin:0;
	padding:0;
	border-width:0.1em 0 0 0.1em;
	border-color:#eee;
	border-style:solid;
}

li.comment div, li.pingback div {
	padding:20px;
	overflow:auto;
}

li.comment div div, li.pingback div div {
	padding:0;
	overflow:visible;
}

.commentlist li.even {
	background-color:#fafafa;
}

.commentlist li.odd {
	background-color:#f6f6f6;
}

ul.children li {
	list-style:none;
}

img.avatar {
	float:right;
	border:1px solid #eee;
	padding:2px;
	margin:0;
	background:#fff;
}

.comment-meta, .reply {
	margin:0;
	padding:0;
	font-size:0.8em;
}

.comment-author cite {
	font-style:normal;
	font-weight:bold;
	font-size:1.2em;
}


textarea#comment {
	width:100%;

}

#comments div.navigation {
	font-size:0.9em;
}

/* Comment ends */


/* Calendar */
#wp-calendar caption {
	text-transform:uppercase;
	font-weight:bold;
	color:#aaa;
	text-align:left;
}
#wp-calendar thead th {
	font-weight:normal;
	color:#27a;
	text-align:center;
}
#wp-calendar tbody td {
	text-align:center;
}
#wp-calendar tbody td a {
	font-weight:bold;
}
#wp-calendar tbody td.pad {
	border:none;
}
/* Calendar ends */

abbr {
	cursor:help;
	border-bottom: 0.1em dotted;
}

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
   margin: 5px 5px 5px 0;
}

.alignright {
   float: right;
   margin: 5px 0 5px 5px;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

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

	margin-left:auto;
	margin-right:auto;
	
}

.specificationd {
	
	
	margin-left:auto;
	margin-right:auto;
}

.spec1 {
	background:#FFFFFF;
}
.spec2 {
	background:#EEEEEE;
}
.spec1 td,.spec2 td {
	padding:5px;
	border-top:1px solid #FFFFFF;
	color:#000000;
	font-size:12px;
	
}
.spec1 td a,.spec2 td a {
	text-decoration:none;
}
.imgleft {
	float:left;
	border:1px solid #B0BABF;
	background:#EBEDEF;
	padding:4px;
	margin:0 10px 0 0;
}
.imgright {
	float:right;
	border:1px solid #B0BABF;
	background:#EBEDEF;
	padding:4px;
	margin:0 0 10px 10px;
}

.imgleft2 {
	float:left;
	border:1px solid #B0BABF;
	background:#EBEDEF;
	padding:8px;
	margin:0 10px 0 0;
}

.imgright2 {
    float:right;
    border:1px solid #B0BABF;
    background:#EBEDEF;
    line-height: 0;
    padding:8px;
    margin:0 0 10px 10px;
}

}

.imgright2A {
	float:right;
	/* border:1px solid #B0BABF; */
	background:#EBEDEF;
	/*padding:8px;
	margin:0 0 10px 10px; */
}

.imgleft2 img, .imgright2 img, .imgmultiple img {
	border:none;
}

ul.img {
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.img li {
	float:left;
	background:none!important;
	padding:0!important;
	margin-bottom:15px;
}

.imgmultiple {
	float:center;
	border:1px solid #B0BABF;
	background:#EBEDEF;
	padding:8px;
    line-height: 0;
    text-align:center;
	
}


/* table header */
.sectiontableheader {
	background:#6699CC;
	color:#FFFFFF;
	padding:5px;
	font-size:12px;
}



#gsFooter {
display: none;
}
tomaja’s picture

I see that setting for search box for former WP theme are correct

.search {
float:right;
padding:1.5em 5% 0 0;
}
.search form {
margin:0;
padding:0;
}
.search input {
display:inline;
width:218px;
border:1px solid #69b;
margin:0;
padding:0.2em 5px;
background:#38b;
color:#ddd;
font-size:1.1em;
}

Replace search in css to correspond new search class in page.tpl.php and it should work right

Linux4life

ckleiman’s picture

I've been able to make some progress by fixing the right sidebar and the footer. I have two remaining issues. The first happens when Drupal puts the primary links into the sidebar. It puts triple space between each link. The admin links are single spaced correctly.

See photo; http://www.asianproav.com/images/Fluid_Blue_Menu_Spacing_Problem.jpg

The second is the size of the search box. I made it smaller by changing the width in one of the css, however, now, for the life of me I can't find where I changed that value and want to restore it to the regular width. The reason I made it smaller in the first place was because the text was wrapping. This went away when I closed and reopened the browser.

See photo; http://www.asianproav.com/images/Search_Box_Width.jpg

BTW, here's the updated code for my page.tpl.php (I haven't changed the style.css)

<!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" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <link href="sites/all/themes/fluid-blue/style.css" rel="stylesheet" type="text/css">

 
</head>

<body>

<div id="page">
<div id="header">
 <?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
      <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>

	<div id="headertitle">
		<h1></h1>
		<p></p>
	</div> 
	 
	
<div id="navbar">
<ul id="nav">
<?php print theme('links', $primary_links); ?>

</div>

<div id="wrapper">
<div id="content">
<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<?php if ($show_messages): print $messages; endif; ?>
<?php print $help; ?>

<?php print $content; ?>
</div>
	<div id="sidebar">
	<?php print $right; ?>	
	<?php if ($search_box): ?><?php print $search_box ?></div><?php endif; ?>		
	
	


</div> <!-- wrapper -->

<div id="footer">

	
		<!-- 20 queries. 0.645 seconds. -->
	



<?php if ($footer_message || $footer) : ?>
<div id="footer-message">
    <?php print $footer_message . $footer;?>


<?php endif; ?> 
</div>
<!-- page -->
<?php print $closure; ?>
</body>
</html>
vm’s picture

if you changed it with css, firebug should easily point out where you changed it be inspecting the search element.