Jump to content


Photo
- - - - -

Questions about creating a custom header


This topic has been archived. This means that you cannot reply to this topic.
20 replies to this topic

#1 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 11 October 2010 - 01:48 PM

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!

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 11 October 2010 - 06:29 PM

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?

#3 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 11 October 2010 - 09:12 PM

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

Please Login or Register to see this Hidden Content

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

#4 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 11 October 2010 - 09:21 PM

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?

#5 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 12 October 2010 - 01:24 AM

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

#6 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 12 October 2010 - 07:59 PM

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

#7 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 13 October 2010 - 03:26 AM

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

#8 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 07:21 AM

Fan-bloody-tastic. It worked. If you don't mind I have a couple more questions before I resolve this topic. Will you look

Please Login or Register to see this Hidden Content

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.

#9 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 13 October 2010 - 03:36 PM

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.

#10 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 04:04 PM

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!

#11 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 13 October 2010 - 04:10 PM

There is a great resource if you check out at

Please Login or Register to see this Hidden Content



Also another great tool if Firebug extension for Firefox to help find selectors. Want to practice before I give you the answer ? :)

#12 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 04:16 PM

Sure. What do I need to do?

#13 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 04:43 PM

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?

#14 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 04:53 PM

Figured the browser font thing out.

#15 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 08:36 PM

I'm making good progress with the Firebug tool. If you look at my

Please Login or Register to see this Hidden Content

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.

#16 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 13 October 2010 - 11:28 PM

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

Please Login or Register to see this Hidden Content

.

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

#17 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 14 October 2010 - 04:16 AM

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

#18 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 14 October 2010 - 08:01 AM

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

Please Login or Register to see this Hidden Content

code line for twitter, but it only worked with the feed text, but just not the twitter name.

See site

Please Login or Register to see this Hidden Content

.

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.

#19 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 14 October 2010 - 10:01 AM

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

#20 bloggingbubba

bloggingbubba

    Advanced Member

  • Members
  • 56 posts

Posted 14 October 2010 - 04:52 PM

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.