Header vs. header image vs. logo
-
I did this:
#header h1 { background:#fff url('http://alwayswell.files.wordpress.com/2010/05/bamboo-thin-2-thin2.jpg') 0 0 no-repeat; }and I got this: http://www.alwayswellwithin.com
Can anyone tell me if there is a way to keep the blog title on the left and move the image to the right of the title?
In the original style sheet there are the terms
header
header image
logoDoes header refer to the introductory area, e.g. the area above the post content (as opposed to a header image?)
Does header image refer to the big header image option like in the 2010 theme or Bueno theme?
Does logo refer just to a logo image (without an image header)?If I want to put a logo image to the left of my blog title, which do I use?
Thanks a lot.
The blog I need help with is: (visible only to logged in users)
-
Sandra,
Just a few observations:
For future reference, it’s not recommended to use “px” units for font sizes. Use either “em” or “%” units. Even though you see tutorials where people define them in “px” units, that is just bad practice.
In your selector:
body { font:14px Palatino, Times, Serif; line-height:1.5; color:#000; }The “line-height” property is incomplete. You need to define a unit. In this case I believe you meant “1.5em”.
Now, try this code. I am not sure if this is what you wanted:
#header h1 { background:transparent url('http://alwayswell.files.wordpress.com/2010/05/bamboo-thin-2-thin2.jpg') 580px 0 no-repeat; width: 950px; }Does header refer to the introductory area, e.g. the area above the post content (as opposed to a header image?)
Header is what envelops the blog title and the menu.
Does header image refer to the big header image option like in the 2010 theme or Bueno theme?
Are you talking about the custom header feature? It may be… but if you look at the markup, there’s no elements whose ID/Class attribute equals to “header-image”, so even if you defined a “#header-image” selector, you wouldn’t see anything.
Does logo refer just to a logo image (without an image header)?
Logo is the ID of the “div” that contains the title. So yes, you could use it if you want to put a logo, but that image will be the background of the Title.
Since it seems you’re keen to learn well all this kind of stuff, I would encourage you to download those tools I recommended in one of your other posts. Also, reading the markup will help you understand better what contains what, and how elements are related to one another. Again, this is just a recommendation.
HTH
-
Thanks so much. I will definitely download the tools you recommended. Sorry I haven’t gotten to it yet.
About the px units for font size, I just copied the code from the original style sheet for Bueno and it uses px. Should I still just change as I change a particular section or leave it to sync with the rest of the style sheet?
Thanks so much.
-
Think nothing of it.
Just leave them as they are because that may trigger changing other things and it may get a bit complicated.
Don’t forget to add the “em” unit to your “line-height” property.
-
Thanks too for the code. That looks much better. I clearly have a lot to learn and appreciate your patience.
-
You wrote: The “line-height” property is incomplete. You need to define a unit. In this case I believe you meant “1.5em”.
FYI, when I added the “em” this adversely affected the line spacing on my post titles when they are more than one line, it squished the two lines together. So I took the em back off.”
I only copied code from the original style sheet and then made changes so I will need to go with the Bueno version so I don’t squish my post titles.
I will definitely keep this point in mind though. Thanks so much.
I downloaded the two Firefox add on’s you suggested and look forward to learning about them.
Your photo blog is gorgeous.
-
Sandra.
Thanks for your compliments. Photography is one of my hobbies and it relaxes me a lot.
FYI, when I added the “em” this adversely affected the line spacing on my post titles when they are more than one line, it squished the two lines together. So I took the em back off.”
Well, in this case you need to play with the value; if “1.5em” squished the lines together, then you could’ve tried a higher value… for instance “2em” or 2.5em” till you got the desired effect.
Sometimes, even the original themes are not so well written, and there are quite a few available here.
Leaving a value without a unit is of bad practice. Please, don’t get me wrong, but since you’re starting at this stuff, I just want to encourage good practices from the beginning. That’s the way I was taught… I guess it carries over.
BTW, if you’re interested, I can email you some CSS resources. Let me know.
-
Hi, Thanks, I understand the value of learning and implementing correctly. I will play around the the “em” and see what happens. Would love to have the CSS resources if it’s not a hassle for you. You can email them to me at [Email Removed -Slik]
Thanks so much for your kindness.
-
It’s not a hassle at all, I’ll email them to you as soon as I can.
Just a word of advice, is never a good idea to post like that your email address on a public forum. I’ll mark this thread and ask staff to remove it.
If you ever need to type your email address, I’d suggest you to do it like this:
yourname [at] domain [dot] com
Best!
-
-
I also inserted the code between back ticks on this reply → https://en.forums.wordpress.com/topic/header-vs-header-image-vs-logo?replies=10#post-465979
- The topic ‘Header vs. header image vs. logo’ is closed to new replies.
WordPress.com Forums 