Default width of the Thematic theme

ThemeShaper Forums » Thematic

Default width of the Thematic theme

(6 posts)

Started 2 years ago by dreamscapecreative
Latest reply from oakview
This topic is not resolved

Tags:

dreamscapecreative
Member

I'm wondering where I can find out what the width of the default Thematic theme is. I've looked through all of the files and can't seem to find any mention of any measurements at all. Surely there's at least one hiding somewhere.

The main reason I'm trying to determine this is so I know how to layout my header image so that it appears centered, as I can't seem to center my header image (smaller width than the theme) in the style.css. My style.css looks like this, by the way (where it refers to the header, at least):

#blog-title a {
background-image:url(images/logo.png);
display:block;
text-indent:-9000px;
width: 255px;
height: 111px;
}

As you can see, I've omitted the "no-repeat top center" from the background-image:url that's in there by default, as that was the only way to get my header image to appear, for some odd reason. The default code does not work.

Any help will be greatly appreciated.

Posted 2 years ago #
oakview
Member
Try placing your header image in the #branding div:
```
#branding {
background: #FFF url('images/logo.png') no-repeat top center;
}
```
Doing it that way leaves you more options to do things with other header divs.
Posted 2 years ago #
dreamscapecreative
Member

Oakview: I tried what you suggested. I didn't really know what #branding was referring to until I acquainted myself with the Thematic page structure at http://bluemandala.com/thematic/thematic-structure.html

What you suggested does succeed in centering my header logo, but I'd like for the image to also be a clickable button that refers to a URL. With the way this is all laid out, I don't really know how to go about doing that.

There's also one problem with my revised code in that the area where my header logo used to be, referred to under #blog-title before, is a clickable button (even though it's invisible) in the way that I want the header image now referred to under #branding to work. Just need to switch it out somehow, I think.

For the record, my code so far:

/*
Theme Name: dreamscape
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: thematic
.
Thematic is © Ian Stewart http://themeshaper.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/2c-r-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');

#branding {
background: #FFF url('images/logo.png') no-repeat top center;
padding:10px;
}

#blog-title a {
display:block;
text-indent:-9000px;
width: 255px;
height: 111px;
}

And the URL of my blog is at http://blog.dreamscapecreative.net/

Posted 2 years ago #

oakview
Member

Thanks for explaining - here's how I made a clickable banner on a site recently done for a friends web site, John Bridge. You should be able to discern what to do after looking at this CSS. I found the technique somewhere I don't remember.

/* Creates the clickable header image */
#blog-title a {
	background: #F8F4EB url('images/tyw-banner.png') no-repeat top center; /* header image */
	display: block;
	text-indent: -9999px;
	width: 998px; /* header image height */
	height: 124px; /* header image width */
	padding: 0;
}
#blog-description {
	color:#666666;
	font-size:13px;
	font-style:italic;
	position: absolute;
	left: -9999px;
}

Posted 2 years ago #

dreamscapecreative
Member

Oakview,

Thanks for the effort. It looks like that puts me back at the last step I was at, though. The header logo is clickable, but now it's left-aligned again instead of centered.

Posted 2 years ago #
oakview
Member

Doh! Major brain fade, of course I should have seen you had already tried that if only I scrolled back up the page.

I can't seem to picture what the issue is, perhaps you have a link to the site?

Also, the Firebug extension and the Web Developer toolbar with Firefox are indispensable tools for working with layouts. If you ain't got 'em, go get 'em. You will easily be able to see what the issue is, and can try solutions without touching your CSS until you've solved the problem.

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.