Moving header image up « ThemeShaper Forums

ThemeShaper Forums » Thematic

Moving header image up

(9 posts)

Started 4 years ago by ssassen
Latest reply from HuskerLiz
This topic is resolved

Tags:

header

ssassen
Member

Hi.

I am wanting to move my header image up, as it is quite low, and also link it to my main website http://www.we-are-awesome.com

The blog is http://www.we-are-awesome.com/blog

This is the code i have in my Stylesheet.

#blog-title a {
display:block;
text-indent:-9000px;
height: 250px; /* height of your header, like 180px */
width: 636px; /* width of your header, like 940px */
background:url("/blog/banner.jpg") no-repeat top center;
}

#blog-description {
position:absolute;
left:-9000px; /* We avoid display:none because it's bad for SEO */
}

#header {
background:#000; /* Makes the background white */
}

Thanks so much.

Posted 4 years ago #
marti garaughty
Member

@ssassen... in your default.css stylesheet there is a top padding of 99 pixels (see below).

You should only edit the style.css file placed in your child theme folder, don't edit anything in the Thematic files or it won't upgrade properly in future releases.

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

#header {
background:#181E24;
}
#blog-title {
font-size:36px;
line-height:54px;
font-weight:bold;
letter-spacing:-1px;
padding:99px 0 0 0; (<- reduce 99px to a smaller number to remove the top space)
border-bottom:1px solid #242A30;
}

Posted 4 years ago #
ssassen
Member

Thanks for the reply Marti.

I have looked everywhere for that existing 'padding' code, but there is nothing in style.css This is my whole style.css

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

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

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

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

/* Apply default theme styles and colors */
@import url('library/styles/default.css');

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

.entry-content img {
margin: 0 0 10px 0;
max-width:100%;
}
.alignleft,
img.alignleft {
float: left;
margin-right:10px;
}
.alignright,
img.alignright {
display: block;
float: right;
margin-left:10px;
}
.aligncenter,
img.aligncenter {
margin-left:auto;
margin-right:auto;
display: block;
clear: both;
}
.wp-caption {
text-align: center;
margin-bottom:10px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
margin: 0;
padding:5px;
}
.gallery img {
margin:0;
}
.wp-smiley { /* Prevent the smileys from breaking line-height */
max-height:12px;
margin:0 !important;
}

body {font-family: Corbel;
font-size: 1em;
padding:0;
margin:0; }

#blog-title a {
display:block;
text-indent:-9000px;
height: 250px;
width: 636px;
padding:0 0 0 0;
background:url("/blog/banner.jpg") no-repeat top center;
}

#blog-description {
position:absolute;
left:-9000px;
}

#header {
background:#000;
}

Im not sure where to go now. I tried adding the padding into my 'blog-title' but nothing.
Sorry about this. Still new to CSS and learning the ropes.

Posted 4 years ago #
markmathson
Member

I am having a similar issue at http://keenpath.com/. I am using a Child Theme, and have this entered in for my styling:

/* =Header -------------------------------------------------------------- */ #header { background:#fff; } #blog-title { } #blog-title a { display:block; text-align:left; background: url(http://keenpath.com/files/images/keenpath.jpg) top center no-repeat; height:93px; width:250px; padding:25px 0 0 0; border:1px solid #fff; text-indent: -9000px; border-bottom:none; }
#blog-description { position:absolute; left:-9000px; }

Posted 4 years ago #
marti garaughty
Member

@ssassen... Your child theme was importing the 99px top padding from the default.css
but you weren't changing it in your style.css

@markmathson... you have 2 style sheets (style.css) defined plus you're importing the default.css which makes things even more complex because you now have to override what you're importing. Here's a very simple and very clean way to do it...

To create a child theme for Thematic...

- in your Wordpress themes directory, create a new folder for your child theme and
name it i.e. childtheme01

- in the childtheme01 folder, copy & paste Thematic's style.css and do your
editing from there, don't import additional .css files like you're doing now

for images...

- inside the childtheme01 folder create a sub-folder titled... images

- place all of the images you'll use for childtheme01 in the images folder

- your child theme will reference(use) images directly from your child theme images folder
i.e. background-image: url(images/background.jpg);

to complete a basic child theme...

- add your screenshot.png (or .jpg) image in the child theme folder for childtheme01

wrap up...

So all you really need for a basic child theme is a child theme folder (i.e. childtheme01) containing...

- a copy of Thematic's style.css sheet that you can edit

- a sub-folder titled... images

- a custom screenshot.jpg for childtheme01

The less stuff you import, the easier it will be to see & find where things are and how to edit them. Using multiple style.css files is pointless, and then importing the default.css on top of that just complicates things even further.

***Disclaimer... if you ask 10 blog designers how to do this you'll get 10 different answers so my way isn't necessarily the perfect way but it works, it's clean and it's simple which makes finding stuff you want to edit very easy.

If my explanation isn't clear or your need more details, just ask. If you like I can post code from some Themetic child themes I'm working on to give you a starting point. I hope this helps to clear things up a bit. Later...

Posted 4 years ago #
ssassen
Member

Thanks Marti.

All working perfectly.

Posted 4 years ago #
markmathson
Member

Thanks again. Since I first asked this question, I have successfully been using CSS similar to what Ian describes in his forum post here: http://themeshaper.com/forums/topic/adding-a-header-image

Posted 4 years ago #
asoundmatch
Member

This question is embarrassing, even though I am new to dev/design:

Once I edit the css file with my new header image, which div tag in which file do I edit to reflect the change?

Thank you!

Posted 4 years ago #
HuskerLiz
Member

Marti, thank you. I was making a lot of extra work for myself, and you helped simplify what I couldn't get my head wrapped around.

Posted 4 years ago #

RSS feed for this topic

Reply

You must log in to post.