adding header image in Funki theme
-
Hi, my blog is at http://www.creativeethos.wordpress.com, and my premium theme is FUNKI.
I want to add this image http://creativeethos.files.wordpress.com/2011/10/untitled.png, to the header next to my title. How do I go about doing this? I’ve already uploaded it to the media library.
I also want to customize the colours on my blog a little bit to match this new image. I want to change the background of the template (currently the stock design from FUNKI) to either a turquoise colour or upload a custom image.
Thanks in advance.
The blog I need help with is: (visible only to logged in users)
-
To the right or left of the title/tagline?
Secondly it will have to be prepared and optimized prior to usage. Right now it is 2.2MB and at 150dpi and it needs to be taken down to 72 dpi and downsized to the size you want for that area. In general, you have about 140px square, what size you end up with depends on how you want it to align in relationship to the title/tagline.
The wrench in the works: Funki is a reactive design which means that it is designed to work on virtually everything from a smartphone all the way up to a large desktop monitor. Grab and resize the browser window down to very narrow and watch what happens to the site design. You have to keep what happens to the design in mind when deciding on a size for the image. Note in particular what happens especially to the title text in size as the monitor browser window gets narrower.
So… thoughts?
-
ahh… you make a good point. I resized the image here http://creativeethos.files.wordpress.com/2011/10/new-ethos-image.png. But it seems like its so small, I don’t know if it’s even worth putting in. Do you have any thoughts or suggestions on this? Maybe if I customize the background colours it will look alright. Can we give it a try and see how it looks? Also, I want the image to the right of the title/tagline.
-
Yeah, let me work it up, but before I forget, that is a great illustration. Did you do it? I might have to keep a copy of that on my desktop for private viewing if that is OK with you.
-
Actually, I bought it off shutterstock.com. Take a look, their illustrations are awesome. I agree, this one in particular is really cool, and I think it goes well with the theme of my site.
-
-
This puts the image all the way to the right in the header area. Narrow the browser window and see what happens.
I can space it over further to the left, but it sort of blows up (more than normal) when you narrow the browser window.
#site-title { background: url("http://creativeethos.files.wordpress.com/2011/10/new-ethos-image.png") no-repeat scroll right center transparent; height: 200px; } -
I’ll keep it only for inspiration since my use for anything other than that would be a licensing violation likely.
-
Yea I think we should put it further to the left, even if it blows up when you narrow it. Let’s try that. Also, is there anyway to keep this image size in there lengthening the height of the header area? I guess not?
-
replace the “right” in the background declaration with 520px and see what you think. You can play with the 520px (larger moves it more to the right, smaller more to the left).
background: url("http://creativeethos.files.wordpress.com/2011/10/new-ethos-image.png") no-repeat scroll 520px center transparent; -
I’ve decided that I don’t like the small photo up there, so I might just put it as a widget. Thanks again for your help you know your stuff!
-
- The topic ‘adding header image in Funki theme’ is closed to new replies.
WordPress.com Forums 
