Remove padding on an image header

ThemeShaper Forums » Thematic

Remove padding on an image header

(11 posts)

Started 1 year ago by javin
Latest reply from javin
This topic is resolved

Tags:

javin
Member

So I added an image to my header (The Easy Way!) via this website. http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/

That worked out great! But it added a bunch of padding around the image; I would rather just have the image as the header.

I also want to have a horizontal repeating background for the header (sky and grass, look at link below), that would be affected only in the header. I'd also like the header image to be right aligned.

http://javinladish.com/blog/

Furthermore, I'd like to change the background color of the footer area. (This can be edited in the style.css right?)

I know these are pretty newbie questions, but I have only designed websites in Flash. I do have a very small working knowledge of Dreamweaver, but I found out that it is quite hard to edit WordPress themes using that.

Thanks for your help!

Posted 1 year ago #
helgatheviking
Moderator

to right-align your image i'd do this instead of floating the img

#logo-image {
text-align:right;
}

the padding isn't from your image... it's on the #branding div and would be there image or no unless you overwrite it in your child's style.css

default
#branding {
padding:88px 0 44px;
}

put this in your style.css
#branding { 0 0 0 0};

to add a background to the header you'd use

#header{
background: url(where is your img relative to the style.css) repeat-x top center;
}

i can see you are going to have an issue w/ the background of the access... and i'm not reallly sure right now what to do about it.

as w/ every person new to CSS and theming... i heartily recommend getting the firebug extension for firefox. http://www.getfirebug.com you can point at elements and it will tell you what they are, what their css properties are AND let you monkey around w/ the css. i'd agree that it is also a pain to work on wordpress sites.... which is probably why people who realllly get into it have local installations w/ xammp or its equivalent. i change stuff in notepad++, press save and click reload to see if something works. when i get it all working, i upload it live.

also if you don't need to have the option to change the logo in your options panel it is pretty easy to replace the text w/ a background img in your css

#blog-title {
background: transparent url("images/title.png") no-repeat 0 0;
width: 445px; /* size of graphic */
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}

#blog-title a {
display: block;
width: 445px;
height: 70px;
text-decoration: none;
border: 0;
}

Posted 1 year ago #
javin
Member

Whoh, I really like Firebug now! I never saw its true potential. I wish you could log into your server and ACTUALLY make the changes through there. Or can you? Because now I make changes and they show up, but they aren't permanent.

What do you mean by: i can see you are going to have an issue w/ the background of the access... and i'm not reallly sure right now what to do about it.

By access, do you mean the footer? Because that's what I wanted to change the color of.

Posted 1 year ago #
javin
Member

I tried some of the things you mentioned, helgatheviking, and they work pretty well.

Here is my blog with the changes so far: http://javinladish.com/blog/

1.) The image align right command didn't 'truely' make it stay at the way right. Instead it ends at the end of the search bar, and then uses the repeated background.

2.) Is it possible to get the Home and About tabs OVER the header image? Like overlapping? If not, is it possible to change the background of the nav (but not the tab color)?

3.) I'm wondering if it would look better if I just made the header image wider, put the Javin Ladish Media Designer logo at the way left, then the graphic part on the right. Maybe put some stuff in the middle too, like a zebra flying a kite. :P

4.) You can change the widgets through WordPress right? I don't want the Meta; Site Admin thing on there.

Posted 1 year ago #
javin
Member

Weird, it's not letting me edit my posts.

I was wondering what is a good way to create subpages for a dropdown through WordPress. (I can do it through the parent options in the Attribute panel on the right of the write post screen, correct?)

I would like to have a 'Portfolio' link up top by 'Home' and 'About', but when you roll over 'Portfolio, I'd like a dropdown with a few different sections.

I found this tutorial for an older Thematic.
http://www.cozmoslabs.com/2009/03/20/quickly-add-a-category-dropdown-to-thematic-09/
I'm not sure if it would still work though.

You guys are great help! I've searched a lot through this site and learned a lot so far!

*EDIT* Whoh, it does it automatically. I'm dumb.

Posted 1 year ago #
javin
Member

I wish I could edit posts.

I resolved the following.
- Header with no padding
- Repeating background for header
- Changing color of the footer (it was super easy)
- Subpage dropdown (which didn't need any code at all)

However, I still can't figure out the following:

1.) The image align right command didn't 'truely' make it stay at the way right. Instead it ends at the end of the search bar, and then uses the repeated background.

2.) Is it possible to get the Home and About tabs OVER the header image? Like overlapping? If not, is it possible to change the background of the nav (but not the tab color)?

Here is my blog again for reference.
http://javinladish.com/blog/

Sorry for like quintuple-posting.

Posted 1 year ago #
helgatheviking
Moderator

if firebug would let you point and click all over, change the CSS and then somehow modify your child's stylesheet i would pass out w/ excitement. i would even be pretty happy w/ just saving them all to the clipboard for easy pasting into notepad. you can go into edit mode and then as you edit the stylesheet you can see the changes... copy everything and save it to your file, but it is not as easy as the point and select. if you are like me you don't always know what element needs to be selected, nor what property to apply to make it work the way you've envisioned. anyway......

1. your image is aligned as far right as it will go b/c the #branding div has a width of 940px applied to it, and then it is auto-margined to be in the center. so if you float:right your #logo div and then set the #branding width:inherit that should undo the default width. that will get your image all the way to the right of the screen, which is where it sounds like you want it? i do like the image btw... did you do that?

2. this what i was referring to about the access background. the #access div is the one w/ the menu in it, but I just figured it out w/ trusty firebug.

set #access background to transparent and the #branding height to the height of the image 230px minus the height of #access which 32px = 198px.

as far as menus- i have used Menus+ Plus plugin and it is great, but wordpress 3.0 has some great menu features and there is a post floating around on how to get that jiving w/ thematic. it is pretty easy actually and gives great control over the menu. the default is just wp_list_pages which isn't anything to write home about.

Posted 1 year ago #
javin
Member

Helga, you da bomb!

1.) I'll try this. I also took your advice and coded the image banner myself, instead of having the option in the manager to add the image. Would I have to do anything different now that I don't have the #logo-image div from that sites tutorial?

Yes, I did make the image. I usually never do cartoony type images (or even vector for that matter), but I wanted something that fit my personality, and this is what came out. :)

2.) Instead, I changed the access color to the same color as the bottom pixel. This will do for now, but thanks for figuring it out. If I ever want my banner to be thinner, I'll do this. EDIT: This didn't work for me. Changing it to transparent worked, but changing the branding had no effect.

I'm actually pleased with the look of the subpages and dropdown as is, but I will look into customizing them further.

This post is resolved for now. :D

Posted 1 year ago #
helgatheviking
Moderator

looks good. i still maintain that

#branding{
height: 198px;
}

and

#access{
background: transparent;
}

will do what you were describing. you might need to declare a height anyway as things look weird for me on the portfolio and about pages. b/c the #blog-title is floated the containing divs don't 'expand' and the #access is at the top of the page!

anyway i do like the graphi. i should do stuff w/ vectors. instead i find myself doing more and more coding (why did i think it was cool to try to implement ajax and jquery... i can barely even handle php!) and less and less designing.

Posted 1 year ago #
helgatheviking
Moderator

hey javin,

how long did it take you to do that header graphic? I have a graphic in mind that needs creating.. and was thinking maybe I could take care of any more mods to your theme (f you have any in mind) in exchange for some art help. Let me know...

cheers!

Posted 1 year ago #
javin
Member

Ooh, that sounds great! I'd love to if it isn't that hard!

You want to help me with this post?
http://themeshaper.com/forums/topic/how-to-get-two-header-images

I want to have another header image on top of the existing header image. I will remove the logo portion, and then place it as a second header to stay aligned with the navigation bar.

I could probably think of a few other small things I need help with too.

Email me @ javin22@msn.com

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.