Branding snafu, image replacement on title & description

ThemeShaper Forums » Thematic

[closed]

Branding snafu, image replacement on title & description

(4 posts)

Started 12 years ago by krowchuk
Latest reply from Danieliser
This topic is not resolved

Tags:

Hi!
Wow! I really like Thematic so far! I wish I had found it and taken the time to give it a whirl earlier. I would have saved so much time and frustration.

I currently have a modified (hard coded) Kubrick theme going and as time has gone by it is getting more and more difficult to maintain, modify etc. So, it's time to jump on the child theme bandwagon and all research points to Thematic. :-)

My first snafu deals with a seemingly common area of support questions, however, mine is a bit different. I have been really trying hard to resolve this myself and have searched and searched for an answer so please accept my advance apology if this has been covered.

I have started, with the help of some excellent tutorials, to build my child theme to resemble my current site.

Where I am running into a problem is with branding. My branding works great on every page, post, cat etc. except the most important entry page. I have WP set up under "Reading" -> Front Page Displays -> Your Latest Posts.

I think I know why, I just can't figure out the best way to deal with it. I believe it has something to do with how Thematic handles blog description, in a div for everything but front page where it becomes an H1 (Great Idea!!!). The image replacement then goes wonky on that H1.

I use 2 images in my current "header", a logo and a description - both use image replacement to kick the blog title and the blog description off the page. These images currently align side by side.

On every page except the entry page this displays well but on front page the description image replacement drops down below the logo image and then messes up my navigation bar.

Since this is running locally under MAMP I guess a screen grab might be the best way to demonstrate the issue!

This first image shows a page, and the header / branding / access displaying okay
http://www.krowchukdressage.com/samples/thumb1.jpg

This second image shows what happens only on front page
http://www.krowchukdressage.com/samples/thumb2.jpg

My style.css code:

/*
Theme Name: Wicked
Theme URI:
Description: Wicked Thematic Child Theme.
Author: Chris Krowchuk
Author URI: http://krowchukdressage.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
This theme is © Chris Krowchuk http://krowchukdressage.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

/* Colors in this theme:
	Dark Blue:		#000033
	Dark Burgundy:	#330000
	Light Burgundy:	#990000
	Silver:			#
	Light Silver:	#CCCCCC
*/

/* Set page wrapper to 960px width and center it */

#wrapper {
	width: 960px;
	margin: 0 auto;
	}

/* Set the background color and image */
body {
	background: url(images/bg-color.jpg) repeat #330000;
	}

/* Now lets brand the header with some image replacements */

#header {
	height: 278px;
	}

#branding {
	width: 960px;
	}

#blog-title {
	width: 300px;
	float: left;
	margin-left: 25px;
	}

#blog-title a {
	background: url(images/kd-logo.jpg) no-repeat top center;
	display: block;
	text-indent: -9000px;
	width: 296px;
	height: 129px;
	}

	#blog-description {
		background: url(images/head-line.jpg);
		display: block;
		text-indent: -9000px;
		width: 616px;
		height: 129px;
		float: left;
		}

/* Nav menu coolness */
/* First we need to resize the div holding the menu */
#access {
	border-bottom: none; /* removes the default border */
	height: 60px;
	}

.menu {
	margin: 0;
	width: 960px;
	}

.menu li {
	display: inline;
	}

.menu li a {
	text-indent: -99999px;
	float: left;
	margin-top: 15px;
	outline: none;
	display: block;
	}

.menu li.tab-1 a {
	height: 46px;
	background: url(images/about.jpg) top center no-repeat;
	width: 112px;
	}

.menu li.tab-1 a:hover {
	background: url(images/about.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-2 a {
	width: 92px;
	height: 46px;
	background: url(images/lessons.jpg)top center no-repeat;
	}

.menu li.tab-2 a:hover {
	background: url(images/lessons.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-3 a {
	background: url(images/training.jpg) top center no-repeat;
	height: 46px;
	width: 92px;
	}

.menu li.tab-3 a:hover {
	background: url(images/training.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-4 a {
	background: url(images/showing.jpg) top center no-repeat;
	height: 46px;
	width: 92px;
	}

.menu li.tab-4 a:hover {
	background: url(images/showing.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-5 a {
	background: url(images/clinics.jpg) top center no-repeat;
	height: 46px;
	width: 92px;
	}

.menu li.tab-5 a:hover {
	background: url(images/clinics.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-6 a {
	background: url(images/articles.jpg) top center no-repeat;
	width: 92px;
	height: 46px;
	}

.menu li.tab-6 a:hover {
	background: url(images/articles.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-7 a {
	background: url(images/books.jpg) top center no-repeat;
	width: 92px;
	height: 46px;
	}

.menu li.tab-7 a:hover {
	background: url(images/books.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-8 a {
	background: url(images/videos.jpg) top center no-repeat;
	width: 92px;
	height: 46px;
	}

.menu li.tab-8 a:hover {
	background: url(images/videos.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-9 a {
	background: url(images/news.jpg) top center no-repeat;
	width: 92px;
	height: 46px;
	}

.menu li.tab-9 a:hover {
	background: url(images/news.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

.menu li.tab-10 a {
	background: url(images/contact.jpg) top center no-repeat;
	width: 112px;
	height: 46px;
	}

.menu li.tab-10 a:hover {
	background: url(images/contact.jpg) center center no-repeat;
	}

	.menu li.current_page_item a {
		background-position: bottom center;
		}

/* Set a custom background image on main content */
#main {
	background: url(images/content-bg.jpg) top left repeat-y;
	}

/* Set Column Widths, Positions */
/* Set main content width with margin left and right */
#content {
	margin:0 200px 0 340px;
	overflow:hidden;
	}

/* Set primary aside width and position */
#primary {
	border:none; /* remove default border */
	float:left;
	margin:0 0 0 -940px;
	width:340px;
	}

/* Set secondary aside width and position */
#secondary {
	float:left;
	margin:0 0 0 -200px;
	width:200px;
	}

/* And now for the footer */
#footer {
	background: url(images/kd-footer.jpg) top left no-repeat;
	border-top: none; /* Remove defaults */
	margin-top: 0;  /* Remove defaults again... */
	height: 120px;
	margin-bottom: 10px;
	}

And here is my function.php code:

<?php

// Remove the default Thematic Access
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');

// My custom menu

function custom_childtheme_access(){?>
	<div id="access">
	<div class="skip-link"><a href="#content">"><?php _e('Skip to content','thematic');?></div>
	<div class="menu">
		<ul class="menu">
		<li class="tab-1 <?php if ( is_page('about') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"></a><a>/about/" title="About Krowchuk Dressage">About</a>
		<li class="tab-2 <?php if ( is_page('lessons') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/lessons/" title="Dressage Horse Riding Lesson Programs">Lessons</a>
		<li class="tab-3 <?php if ( is_page('training') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/training/" title="Dressage Horse Training Programs">Training</a>
		<li class="tab-4 <?php if ( is_page('showing') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/showing/" title="Showing Dressage">Showing</a>
		<li class="tab-5 <?php if ( is_page('clinics') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/lessons/clinics/" title="Dressage Clinics">Clinics</a>
		<li class="tab-6 <?php if ( is_page('training-articles') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/training-articles/" title="Dressage Training Articles by Chris Krowchuk">Articles</a>
		<li class="tab-7 <?php if ( is_page('books') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/books/" title="Read Reviews on Dressage Books">Books</a>
		<li class="tab-8 <?php if ( is_page('videos') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/videos/" title="Read Reviews on Dressage Training Videos">Contact</a>
		<li class="tab-9 <?php if ( is_page('news') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/news/" title="News from Krowchuk Dressage">News</a>
		<li class="tab-10 <?php if ( is_page('contact-me') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a>/contact-me/" title="How to Contact Krowchuk Dressage">Contact</a>

	</div><!-- #menu -->
	</div><!-- #access --> 

<?php }

add_action('thematic_header','custom_childtheme_access',9);

?>

I appreciate any help or suggestions!

Thanks in advance, Chris

Posted 12 years ago #

Danieliser
Member

First question is why use a custom menu like that? You can easily use the WP 3.0 Nav Menus to make the menu and use the classes current_page_item or current_page_ancestor etc to style the active menu. Second would be could you use a single image of instead of 2 images? if so you can combine them into a single flat image and use the method outlined here
http://wizardinternetsolutions.com/wordpress/thematic/thematic-header-image-way/

you can see it and the menu in action at http://hooligangolf.com/

Posted 12 years ago #
krowchuk
Member

Good reply! Thanks.

Please keep in mind that I don't do this for a living. ;-)
I really only fiddle with my site layout when I have a genuine need/wish to change something. So, typically when I get an idea on how I would like to change, I find a tutorial that makes sense, make the changes, if it works then I leave it be.

Second would be could you use a single image of instead of 2 images? if so you can combine them into a single flat image and use the method outlined here
http://wizardinternetsolutions.com/wordpress/thematic/thematic-header-image-way/

Excellent reply, love the link to the tutorial showing how to do this. There was a time when I had "sections" and each section header.php file had a different image on the right while the logo stayed the same. So, it worked back then and I never saw a need to change it when I removed the "sections" concept. I have created a new child theme and massaged it with this code. Works as advertised! Thanks!

First question is why use a custom menu like that? You can easily use the WP 3.0 Nav Menus to make the menu and use the classes current_page_item or current_page_ancestor etc to style the active menu.

Excellent question! Because I found a tutorial a couple years ago on how to create a three state tabbed navbar using sprites that was ultra cool, added it to my site and it worked. I am likely going to change it, I just have not decided how (design wise) yet. There area few more issues that I know are going to crop up and I'm hoping to work through them without too much pain, in Thematic as my framework. Once I get that all sorted, I am sure a totally new color scheme and navbar will follow...

Question for ya... the hooligangolf link has a very nice navbar and I had no idea you could create something so great with the built in Nav Menus function. I haven't played with it and I probably should, but I noticed this site is using strictly css to style the Nav Menu and its buttons. Is it even possible to style a WP3.0 Nav Menus output with three state image replacements / sprites?

Thanks!
Chris

Posted 12 years ago #
Danieliser
Member
Thanks, I will be redesigning my site the wizardinternetsolutions.com with thematic as soon as i have some time. The hooligangolf site is a clients that i just finished.

If you mean Standard, Hover, and Active Images then yes no problem. You can simply style them using css psuedo selectors such as
```
#access ul li a {}
#access ul li a:hover {}
#access ul li a:visited {}
```
more on those classes here http://www.w3schools.com/CSS/css_pseudo_classes.asp

sprites are great but take time to work with. i recommend doing it with seperate images and when you have it working the way you want replacing the images with css sprite coordinates.
Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.