Decrease space in between header and content

  • jlsprinkelbug

    (@jlsprinkelbug)


    15 years, 11 months ago

    Hi all,

    So…warning: this is a newb question. I am trying to create a website for my small business and am running into two problems with the Belle theme.

    1. I moved up the header and nav bar already, but the rest of the page won’t move up. Tried decreasing the header heights and can’t seem to get it.
    2. I want to make the page headings align left and be in black text, smaller font.

    Help! What do I do? Here’s my CSS:

    /*
Theme Name: Belle
Theme URI: http://www.GetBelle.com/
Description: Simple, Light, clean XHTML web 2.0 WordPress Theme with Custom header and Theme options witch include a color scheme picker that allow you to pick from your choice of orange, red, blue, green, or yellow color schemes. You can also include custom social links like twitter or facebook.
Version: 1.7
Author: Grigoruta Adrian
Author URI: http://www.pixelstudio.ro/
Tags: blue, silver, custom-header, fixed-width, two-columns, theme-options, light, custom-colors
*/

/*--------------------General Classes---------------*/
body {
	background: #ffffff url("images/body.jpg") repeat-x top left;
	padding: 0px 0px 40px;
	margin: 0px;
       font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	font-size:12px;
	}
a {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a img{
        border:0px;
}
#page {
	margin: 0 auto;
	width: 760px;
}
h2 {
	font-size:22px;
	margin:0px;
	padding:0px;
}
.center{
	text-align: center;
	}

blockquote {
	margin: 20px 0;
	padding: 0 20px 0 50px;
	color: #333;
	background: url('images/quote.jpg') no-repeat 10px 0;
	border: none;
	}

.aligncenter,
.center{
	text-align: center;
	}

.entry .aligncenter,
img.center,
img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

.entry .alignright,
img[align="right"] {
	float: right;
	margin: 0 0 4px 8px;
	display: block;
	}

.entry .alignleft,
img[align="left"] {
	float: left;
	margin: 0 8px 4px 0;
	display: block;
	}

/*---------------------------------Header-----------------------------*/

#header{
		position: top;
		padding:0px;
		height:170px;
		}

#headerimg {
	position: relative;
	padding: 5px 0px 0px 7px;
	height: 100px;
}

#headerimg a, #headerimg a:visited{
	font-size:25px;
}
#headerimg .blog-title{
	float:left;
	margin-right:10px;
	margin-top:18px;
}
#headerimg .description{
	width:250px;
	border-left:1px solid #dcdcdc;
	float:left;
	font-size: 13px;
	height:30px;
	margin-top:18px;
	padding-left:10px;
	padding-bottom:3px;
}
#headerimg .link1{
	width:130px;
	border-left:1px solid #dcdcdc;
	float:right;
	height:30px;
	top:5px;
	padding-left:10px;
	padding-bottom:3px;
}
#headerimg .link1 a,.link1 a:visited{
   	font-size:1.2em;
}
#headerimg .link2{
	width:130px;
	border-left:1px solid #dcdcdc;
	float:right;
	height:30px;
	top:35px;
	padding-left:10px;
	padding-bottom:3px;
}
#headerimg .link2 a, .link2 a:visited{
	 font-size:1.2em;
}

#nav {
	padding-left:8px;
	list-style: none;
	margin: 0px;
	position: absolute;
	right: 0px;
	top:24px;
}
#nav li {
	float: left;
	margin-left: 1px;
	list-style:none;
}
#nav li a {
	color: #555555;
	text-decoration: none;
	background: #ffffff;
	padding: 5px 7px;
	display: block;
        opacity:.60;
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	-ms-filter: "alpha(opacity=60)";
	filter: alpha(opacity=60);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
#nav li a:visited {
	color: #555555;
	text-decoration: none;
}
#nav li a:hover {
       height:16px;
	color: #000000;
	background:#eaf6fb;
}
#nav li.current_page_item{
	background: #ffffff;
}
#nav li.current_page_item a:hover{
	background:#ffffff;
	border-bottom:0px;
	color: #555555;
}

/*---------------------------------Content----------------------------------*/
#content {
	padding: 10px 15px 20px 10px;
	float: left;
	width: 500px;
	overflow: hidden;
	margin:10px 0px 10px 0px;
	border-right:1px solid #dcdcdc;
}

.post {
	clear:both;
	padding-top: 10px;
}
.post-title {
	width: 100%;
	border-bottom:1px solid #dcdcdc;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-weight:lighter;
}
.post-tags{
   font-size: 75%;
	color: #999999;
}
.post-info {
	float:left;
	font-size: 75%;
	color: #999999;
}
.post-date {
	position:relative;
	width: 45px;
	height: 39px;
	float:right;
	margin-top:1px;
}
.post-month {
	font-size: 11px;
	text-transform: uppercase;
	color: #dcdcdc;
	text-align: center;
	display:block;
	line-height: 11px;
	padding-top: 2px;
	margin-left: -3px;
}
.post-day {
	font-size: 18px;
	text-align: center;
	display:block;
	line-height: 18px;
	padding-top: 2px;
	margin-left: -3px;
}

.entry {
	clear: both;
	padding-top: 0px;
	font-size: 1.1em;
	line-height: 1.8em;
	text-align: justify;
}
.entry-title, .entry-title a, .entry-title a:visited,
h2, h2 a, h2 a:visited,
h3, h3 a, h3 a:visited,
h4, h4 a, h4 a:visited {
	text-decoration:none;
	}
.navigation {
	clear: both;
	padding: 10px 0px;
}
.navigation a, .navigation a:visited {
	color: #999999;
}
.previous-entries {
	float: left;
	padding-left: 18px;
}
.next-entries {
	float: right;
	padding-right: 18px;
}

/*----------------------- Search Widget -----------------*/

#searchform {
	background: #f2f2f2;
	width: 177px;
	padding: 13px 13px 13px 13px;
	float:left;
	margin-bottom:15px;
}

#search-label { /* The 'Search for:' label */
	display: none;
	}

#search-label.overlabel-apply { /* Inline label for livesearch */
	display: block;
	position: absolute;
	color: #888;
	cursor: text;
	padding: 3px 5px;
	margin-top:2px;
	z-index: 1;
	background: white;
	}

#search-label.overlabel-apply.hide { /* Hide label when #s isn't empty */
	text-indent: -1000px;
	}

#s, #search-label.overlabel-apply { /* Style #s and label in same way */
	font-size: 1.1em;
	width: 164px;
	line-height: 15px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	}
#search-label.overlabel-apply.fade { /* Fade label when #s has focus */
	color: #ccc;
	}
#s { /* The actual search input field */
	position: relative;
	padding: 3px;
	border: 1px solid #d0d0d0;
	background: transparent;
	z-index: 2;
	}
.livesearch{
	position:relative;
}
.livesearch #s { /* The search input field w. livesearch enabled */
	padding-right: 20px;
	width: 150px;
	}

#searchreset, #searchload { /* Reset button & loading spinner */
	position: absolute;
	top: 2px;
	opacity: 0;
	right: 2px;
	height: 18px;
	width: 18px;
	}

#searchreset {
	z-index: 4;
	background: url('images/reset-fff.png') center center no-repeat;
	}

#searchload {
	z-index: 3;
	background: url('images/spinner.gif') center center no-repeat;
	}

/*------------------------ Side Bar ---------------------------*/
#sidebar {
	float: right;
	padding: 0px 10px 20px 15px;
	margin-top:15px;
	margin-bottom:15px;
	width: 200px;
}
#sidebar h3{
	font-size:18px;
	font-weight:normal;
}
.widgettitle{
	font-size: 120%;
	font-weight:normal;
}
#sidebar li{
	list-style: none;
}
.widget ul{
	list-style: none;
	margin:0px 0px 15px;
	padding:0px;
}

.widget li a, .widget li a:visited{
       color: #555555;
	text-decoration: none;
	padding:0 0 0 13px;
	background:transparent url("images/arrow.gif") no-repeat center left;
	border-bottom: 1px solid #dcdcdc;
}
.ul-cat {
	list-style: none;
	margin:0px 0px 15px;
	padding:0px;
}
.ul-cat li{
	margin: 0px;
	padding: 2px 0px 2px 5px;
}
.ul-cat li a, .ul-cat li a:visited{
	color: #555555;
	text-decoration: none;
	padding:0 0 0 13px;
	background:transparent url("images/arrow.gif") no-repeat center left;
	border-bottom: 1px solid #dcdcdc;
}
.ul-cat li a:hover{
	text-decoration: none;
}
.ul-archives {
	list-style: none;
	margin:0px 0px 15px;
	padding:0px;
}
.ul-archives li{
	margin: 0px;
	padding: 2px 0px 2px 5px;
	border-bottom: 1px solid #dcdcdc;
}
.ul-archives li a, .ul-archives li a:visited{
	color: #555555;
	text-decoration: none;
	padding:0 0 0 13px;
	background:transparent url("images/arrow.gif") no-repeat center left;
}
.ul-archives li a:hover{
	text-decoration: none;
}

/*----------------------Comment Form -------------------------------------*/
#commentform {
	margin-top: 10px;
	font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
	padding: 6px 0px;
	margin: 0px;
}
#commentform label{
	font-weight: bold;
	color: #666666;
	font-size: 100%;
}
#commentform input{
	width: 153px;
	background:#f2f2f2;
	border: 1px solid #d0d0d0;
	padding: 3px;
	margin-top: 3px;
}
#commentform textarea{
	width: 99%;
	height: 115px;
	background:#f2f2f2;
	border: 1px solid #d0d0d0;
	padding: 2px;
	margin-top: 3px;
}

#commentform #submit{
	font: bold 12px Arial, Helvetica, sans-serif;
	border: 1px solid #d0d0d0;
	float:left;
	width: 144px;
	height: 29px;
}

/*------------------- Comment List ------------------------*/
.comments {
	font-size: 1.5em;
	font-weight: normal;
}
.commentmetadata{
	font-size:smaller;
}
.commentlist {
	margin: 10px 0;
	position: relative;
	}

.commentlist .children {
	margin-left: 20px;
	}

.commentlist .children li {
	}

.commentlist li {
	margin: 10px 0 0;
	list-style: none;
	}

.commentlist .comment {
	padding: 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	}

.commentlist li.comment {
	padding: 0;
	}

.commentlist li .comment-content {
	font-size: 1.2em;
	line-height: 1.8em;
	}

.comment-content p,
.comment-content ul,
.comment-content ol,
.comment-content div,
.comment-content blockquote {
	margin: 13px 0;
	}

.commentlist li .comment-meta {
	padding: 2px 0;
	display: block;
	}

.commentlist li img {
	padding: 0;
	border: none;
	}

.commentlist .avatar,
.commentlist .gravatar {
	float: right;
	}

.commentlist .comment-author {
	font-size: 1.3em;
	font-weight: normal;
	}

.comment-author cite {
	font-style: normal;
	}
.leavecomment, .nocomments {
	text-align: center;
	margin: 30px 0 20px !important;
	color: #ddd;
	font-size: 1.7em;
	}
/*------------------- Footer ------------------------------*/

#footer{
	clear: both;
	position:relative;
	padding-top:15px;
}

#footer-logo{
	float:left;
	padding-right:20px;
	padding-left:10px;
}

#credits{
	float:left;
	height:30px;
	padding-left:10px;
	font-size:82%;
	border-left: 1px solid #999999;
	width:165px;
}
#footer-logo a, #footer-logo a:visited{
	font-size:24px;
}

    THANKS!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jlsprinkelbug

    (@jlsprinkelbug)

    15 years, 11 months ago

    Duh, here is my site: http://www.hivedeco.com

    jrav001

    (@jrav001)

    15 years, 11 months ago

    Change the height of the header by changing #content-header to this:

    #content-head {
background:url("") no-repeat scroll 90% 90% transparent;
height:75px;
padding:0;
position:relative;
}

    …but then the lines in the background image won’t line up properly, so you’ll have to edit the image, or do the following:

    change this:

    #page {
background:url("header_orange.jpg") repeat-x scroll left top #FFFFFF;
}

    to this:

    #page {
border-top:5px solid orange;
}

    Thread Starter jlsprinkelbug

    (@jlsprinkelbug)

    15 years, 11 months ago

    Hmmm…I changed the #content-head like you said but still when I load it, the page source says it’s 170px instead of 75.

    This is what my stylesheet says:

    #header{
	background:url("") no-repeat scroll 90% 90% transparent;
	height:75px;
	padding:0;
	position:relative;
}

    And this is what my page source says:

    <style type="text/css">
        #content-head {
            background:url() no-repeat 90% 90%;
			position: relative;
			padding:0px;
			height:170px;
        }
    </style></head>

    Not sure where to update the page background image you mentioned, they seem to be in the right place still but the white space is there. The header image php looks like this:

    <?php
/**
 * @package WordPress
 * @subpackage Belle
 */

/** @ignore */
$img = 'default_header.jpg';

// If we don't have image processing support, redirect.
if ( ! function_exists('imagecreatefromjpeg') )
	die(header("Location: default_header.jpg"));

// Assign and validate the color values
$default = false;
$vars = array('upper'=>array('r1', 'g1', 'b1'), 'lower'=>array('r2', 'g2', 'b2'));
foreach ( $vars as $var => $subvars ) {
	if ( isset($_GET[$var]) ) {
		foreach ( $subvars as $index => $subvar ) {
			$length = strlen($_GET[$var]) / 3;
			$v = substr($_GET[$var], $index * $length, $length);
			if ( $length == 1 ) $v = '' . $v . $v;
			$$subvar = hexdec( $v );
			if ( $$subvar < 0 || $$subvar > 255 )
				$default = true;
		}
	} else {
		$default = true;
	}
}

if ( $default )
	list ( $r1, $g1, $b1, $r2, $g2, $b2 ) = array ( 105, 174, 231, 65, 128, 182 );

// Create the image
$im = imagecreatefromjpeg($img);

// Get the background color, define the rectangle height
$white = imagecolorat( $im, 15, 15 );
$h = 182;

// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) )
$corners = array(
	0 => array ( 25, 734 ),
	1 => array ( 23, 736 ),
	2 => array ( 22, 737 ),
	3 => array ( 21, 738 ),
	4 => array ( 21, 738 ),
	177 => array ( 21, 738 ),
	178 => array ( 21, 738 ),
	179 => array ( 22, 737 ),
	180 => array ( 23, 736 ),
	181 => array ( 25, 734 ),
	);

// Blank out the blue thing
for ( $i = 0; $i < $h; $i++ ) {
	$x1 = 19;
	$x2 = 740;
	imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
}

// Draw a new color thing
for ( $i = 0; $i < $h; $i++ ) {
	$x1 = 20;
	$x2 = 739;
	$r = ( $r2 - $r1 != 0 ) ? $r1 + ( $r2 - $r1 ) * ( $i / $h ) : $r1;
	$g = ( $g2 - $g1 != 0 ) ? $g1 + ( $g2 - $g1 ) * ( $i / $h ) : $g1;
	$b = ( $b2 - $b1 != 0 ) ? $b1 + ( $b2 - $b1 ) * ( $i / $h ) : $b1;
	$color = imagecolorallocate( $im, $r, $g, $b );
	if ( array_key_exists($i, $corners) ) {
		imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
		list ( $x1, $x2 ) = $corners[$i];
	}
	imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $color );
}

//die;
header("Content-Type: image/jpeg");
imagejpeg($im, '', 92);
imagedestroy($im);
?>

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Decrease space in between header and content’ is closed to new replies.