Navigation buttons and content background

  • Resolved martynj

    (@martynj)


    15 years, 8 months ago

    I have created a theme for my friends website here and have been working on it for a few days. Now what I would like to do its have the navigation buttons different colors for the different pages. So for example, the home page stays blue, the Events page to be yellow, contact as purple, etc. and want the color block of the content to go with the button. Ive been trying to try different ways of doing this but nothings been working. Can anyone give me a pointer or some kind of reference to read up on?

    Many thanks ??

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

  • Move the areas you want to change into a seperate stylesheet.

    Create 4 or 5 (or however many variants you need) and reference the relevant colours and images in each different stylesheet…

    Then change the stylesheet based on the page/post..

    Lets say for example you have..

    red.css
    blue.css
    yellow.css

    In your header, you could do something like…

    <? if(is_page('pagename1')) { $css = 'red'; }
else if(is_page('pagename2')) { $css = 'yellow'; }
else if(is_page('pagename3')) { $css = 'green'; }
else { $css = 'blue'; } ?>

    Then further along place a stylesheet reference..
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); echo '/'.$css.'.css'; ?>" type="text/css" media="screen" />

    Something like that should work…

    Thread Starter martynj

    (@martynj)

    Ive just gave that a try and it didnt want to work, just removed the content background instead lol. I put the stylesheet reference code between the header tags in the header.php file. My nav buttons already have a ‘if’ function on them, so i added the ‘if(is_page(‘pagename1’)) { $css = ‘red’; }’ on the same line.

    Here’s my header.php code:

    <head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>

<div id="page-wrap">
	<div id="inside">

	<div class="headerimg"></div>

<div id="nav">
	<ul id="menu">
		<li<?php if (is_page('contact')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/contact"><span>Contact</span></a></li>
		<li<?php if (is_page('booking')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/booking"><span>Booking</span></a></li>
		<li<?php if (is_page('gallery')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/gallery"><span>Gallery</span></a></li>
		<li<?php if (is_page('system-specs')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/system-specs"><span>System Specs</span></a></li>
		<li<?php if (is_page('events')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/events"><span>Events</span></a></li>
		<li<?php if (is_page('packages')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/packages"><span>Packages</span></a></li>
		<li<?php if (is_home()) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/news"><span>News</span></a></li>
		<li<?php if (is_page('home')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>"><span>Home</span></a></li>
	</ul>
</div>

    <div id="spacer"></div>

    And heres my style.css:

    body {
	font-size: 62.5%;
	background: url(images/stripe.png) repeat;
	margin:0;
	padding:0;
}

div.headerimg {
	background:url("images/header.png");
	margin-left:auto;
	margin-right:auto;
	height:250px;
	width:1024px;
}

img {
border: none;
} 

p, li {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
	color:#FFFFFF;
}

h1 {
	font: 2.0em Tahoma, sans-serif;
	color: white;
	height: 0px;
}

h2 {
	font: 1.8em Tahoma, sans-serif;
	color: black;
	margin-bottom: 10px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	min-width: 780px;
	max-width: 1240px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

#spacer {
	height:37px;
}

#nav {
	float:left;
	width:100%;
	font-size:93%;
	line-height:normal;
}

#menu {
	padding-right: 10px;
}

#menu ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
}

#menu li {
	display:inline;
	margin:0;
	padding:0;
}

#menu a {
	float:right;
	background:url(images/tableft.gif) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}

#menu a span {
	float:left;
	display:block;
	background:url(images/tabright.gif) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
}

#menu a:hover {
	background-position:0% -42px;
}

#menu a:hover span {
	color:#FFF;
	background-position:100% -42px;
}

#menu #current a {
	background-position:0% -42px;
}

#menu #current a span {
	background-position:100% -42px;
}

#main-content {
	border: solid #4888B8 1px;
	background-color:#25569A;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

#footer {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
}

    The #main-content is actually on the index.php with the wordpress loop inside it.

    Sorry try..

    <?php
$css = 'blue';
if(is_page('pagename1')) { $css = 'red'; }
if(is_page('pagename2')) { $css = 'yellow'; }
if(is_page('pagename3')) { $css = 'green'; }
?>

    Instead, i used short tags by mistake, your server may not have them enabled (simply a typo by me)… and i’ve changed it slightly..

    Example assumes you will rename pagename1 etc to your actual page names..

    If that still fails i’ll test it…

    Thread Starter martynj

    (@martynj)

    Ive made the changes but the content background is still not showing. Ive left the changes on the website so you can see whats happening.

    This is the header.php after the new code:

    <head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); echo '/'.$css.'.css'; ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

</head>
<body>

<?php
$css = 'blue';
if(is_page('contact')) { $css = 'orange'; }
?>

<div id="page-wrap">
	<div id="inside">

	<div class="headerimg"></div>

<div id="nav">
	<ul id="menu">
		<li<?php if (is_page('contact')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/contact"><span>Contact</span></a></li>
		<li<?php if (is_page('booking')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/booking"><span>Booking</span></a></li>
		<li<?php if (is_page('gallery')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/gallery"><span>Gallery</span></a></li>
		<li<?php if (is_page('system-specs')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/system-specs"><span>System Specs</span></a></li>
		<li<?php if (is_page('events')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/events"><span>Events</span></a></li>
		<li<?php if (is_page('packages')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/packages"><span>Packages</span></a></li>
		<li<?php if (is_home()) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>/news"><span>News</span></a></li>
		<li<?php if (is_page('home')) { echo " id=\"current\"";}?>><a href="<?php bloginfo('url') ?>"><span>Home</span></a></li>
	</ul>
</div>

    <div id="spacer"></div>
    Thread Starter martynj

    (@martynj)

    and ive only put the contact page in just to test it ??

    This..

    <?php
$css = 'blue';
if(is_page('pagename1')) { $css = 'red'; }
if(is_page('pagename2')) { $css = 'yellow'; }
if(is_page('pagename3')) { $css = 'green'; }
?>

    Must go before the link to the stylesheet. It can go before the <HTML> tag if you like, it’s not going to be output to the browser, so it won’t cause any problem..

    Thread Starter martynj

    (@martynj)

    Got it! Thank you very much for the help! Can now finally get this website finished ??

    Cool, post back if you get stuck… ??

    Thread Starter martynj

    (@martynj)

    There is another thing now.. Been trying to change the colors of the navigation buttons to go with the background colour thats set.. So say the home page is green, i would like the button to be green, the contact page is red, the button to be red, if that makes sense. Ive managed to change the color of the buttons, but cant make it look like its pressed down (same effect when you hover over it). Any ideas why its not picking up the current page code?

    You know if you used wp_list_pages(), you’d get the current_page behaviour without the need to if/else throughout the menu…

    <div id="nav">
	<ul id="menu">
		<?php wp_list_pages('title_li=&depth=1'); ?>
	</ul>
</div>

    You could still change the stylesheet as discussed before… and you’d have a wealth of CSS classes automatically generated for you by the above function to manipulate..

    You’d also not have to add any new links when a new page is created… ??

    Test it out, you can always go back..

    Thread Starter martynj

    (@martynj)

    ive used that bit of code before but couldnt work out how to change the color of the actual buttons by doing it that way

    In the same way you use any other CSS class..

    View Source on the page output of the wp_list_pages function and you’ll see the classes available on the created elements, you only need style them as you did with your own…

    Most themes use this approach for creating nav menus, and don’t have problems, so you could grab a few and look at the accompanying code.

    2 examples would be..
    .page_item {}
    and
    .current_page_item {}

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Navigation buttons and content background’ is closed to new replies.