Jump to content
Sign in to follow this  
bloggingbubba

Questions about creating a custom header

Recommended Posts

bloggingbubba

I have some questions about creating a custom header image in my iBlogPro4 theme... 1. How does the image need to be? 2. JPEG or PNG? Does it matter? 3. Can I make it so that it is just a background and keep the default header text? 4. Will the custom header image overlap the iPhone icons on the right side? If so, then how can I make them come back? Ideally, I would like to just create a new header background image and retain the default text on the left. 5. How can I change the font of the default header text? 6. How can I change the text color in the header? I tried changing color using instructions in another topic, but I cannot get the color to change using code in the custom css box. Cheers!

Share this post


Link to post
Share on other sites
cmunns

PNG and JPG would both be suitable. PNG does allow for transparency if that is a concern. You can apply a background image to the `#header` selector. If the color won't change for you in the custom css box then the css hierarchy isn't correct, can you provide a link?

Share this post


Link to post
Share on other sites
bloggingbubba

Thanks for your reply, Adam. If you mean a link to my site, then it is http://www.bloggingbubba.com Please excuse me, but what is the

#header

selector? Is this the custom header entry in Theme Settings/Options/Headers and Nav?

Share this post


Link to post
Share on other sites
bloggingbubba

Almost forgot... What would the size of the custom image need to be? I've seen some other tutorials that suggest not using one more that... let's say...100x175, because the code will repeat it across the length of the page and it will load faster. Any thoughts?

Share this post


Link to post
Share on other sites
bryan-hadaway

1. How does the image need to be? 960 x Whatever pixels. 2. JPEG or PNG? Does it matter? Can be gif, png or jpg. 3. Can I make it so that it is just a background and keep the default header text? Yes; `#header{background:#fff url('whatever.png')}` 4. Will the custom header image overlap the iPhone icons on the right side? If so, then how can I make them come back? Pretty sure icons will stay on top, if they don't a fix can easily be applied. Ideally, I would like to just create a new header background image and retain the default text on the left. 5. How can I change the font of the default header text? 6. How can I change the text color in the header? ` #header h1 a{ font-family:helvetica; font-color:#000000} ` Anything pertaining to CSS would be pasted in: Theme Options > Custom Code > Custom CSS Thanks, Bryan

Share this post


Link to post
Share on other sites
bloggingbubba

Thanks for the code, Bryan. All but the color works. I'm unable to affect the font color. Any advice? --Pete

Share this post


Link to post
Share on other sites
bryan-hadaway

Change `font-color` to `color` - my mistake. Thanks, Bryan

Share this post


Link to post
Share on other sites
bloggingbubba

Fan-bloody-tastic. It worked. If you don't mind I have a couple more questions before I resolve this topic. Will you look HERE please? 1. I can't seem to get the code right to change the font color for my tags the post blocks. As you can see, they are not visible unless you drag over them because the text color is also black. What do I need to do? 2. In the tagline, right of my title header, how can I change that font color? In fact, how can I increase the font-size. I also can't seem to code it correctly to do so. I've been trying scripts with a h3,h4 designation, but it's obviously not correct. 3. How can I manipulate the margin of the header from the very top of the page? In other words, I'd like to shift everything at the top down a number of pixels. 4. Finally, is there a way to take the shiny effect off of the title header? Or is this part of the image? It seems to be a separate and transparent image. Cheers, mates! I appreciate your patience and help.

Share this post


Link to post
Share on other sites
cmunns

more css on the way: ` .tags a {color:#999;} #blogdescription {color:#FFF; font-size:18px;} #header {padding-top:25px;} #blogtitle .sheen {background:none;} ` If you want slightly different colors look for a hexidecimal chart via a search engine.

Share this post


Link to post
Share on other sites
bloggingbubba

Awesome! Do you see where my welcome message is? What's the css for that particular area? I need to change the shade of gray on the font for the Welcome title, message, and the twitter feed. Also too, twitter name is invisible because the original font is in black. By chance, do you guys have a cheat sheet with various CSS tweaks available? Something like this would save people a lot of time. Thanks!

Share this post


Link to post
Share on other sites
cmunns

There is a great resource if you check out at W3C Schools Also another great tool if Firebug extension for Firefox to help find selectors. Want to practice before I give you the answer ? :)

Share this post


Link to post
Share on other sites
bloggingbubba

Sure. What do I need to do?

Share this post


Link to post
Share on other sites
bloggingbubba

I've just opened my website with Firefox for the very first time, and to my surprise, the Header font at the Blog Title is showing up differently there. I'm developing the site with Safari. Why the difference?

Share this post


Link to post
Share on other sites
bloggingbubba

Figured the browser font thing out.

Share this post


Link to post
Share on other sites
bloggingbubba

I'm making good progress with the Firebug tool. If you look at my LINK again, You'll see that the name under my twitter message is still gone because I need to change the font color. It appears that the color is tied to the h3 code because that will also change the color for the widget text, but this isn't what I want. I haven't been able to identify the string that will single out the twitter signature yet? Can you help me on this, please? I'm still getting accustomed to the FB tool and how it works.

Share this post


Link to post
Share on other sites
bloggingbubba

As you'll see, I've made good progress with my own CSS edits, but in addition to the twitter item posted just prior, I've also been unable to change the font color in all three columns of the footer. I would like to change it all to

#CCCCCC

. Will you give me the correct code for this, please?

Share this post


Link to post
Share on other sites
bryan-hadaway

Twitter and Footer Columns: `.twitter a, #footer, #footer a, #footer h3, #footer h3 a{color:#ccc}` That should do it up. Thanks, Bryan

Share this post


Link to post
Share on other sites
bloggingbubba

Close, but the right footer column is still unaffected, and so is the twitter name still. Actually, I've already used the same

.twitter a{color:#CCCCCC;}

code line for twitter, but it only worked with the feed text, but just not the twitter name. See site HERE. Thanks for the help. I appreciate it. Your colleague, Adam, has taught me how to fish by introducing me to the Firebug tool. I really went to town on my site last night after days of trying to figure out how to do customizations.

Share this post


Link to post
Share on other sites
bryan-hadaway

Hmm try: `#sidebar .twitter a{color:#ccc}` For the remaining footer item: `#footer .welcomemessage, #footer .terms{color:#ccc}` Thanks, Bryan

Share this post


Link to post
Share on other sites
bloggingbubba

Thanks, I'll give this a try shortly. I have noticed that some of my header customizations aren't looking very well with IE, including the font and Navbar. Otherwise they look well with Safari and FF.

Share this post


Link to post
Share on other sites
bloggingbubba

Awesome, Bryan. Thanks a million!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×