bueno theme: change the header image size

bricopsicologies · Member · Feb 8, 2012 at 11:33 am
Copy link

Add topic to favorites
Hello,
I’m working with bueno theme, it establish an image header of 930x198px and I wanted to changed to 930x300px.
I added in the css the height:

#header-image {
clear:both;
height:300px;
padding:12px 0 0;
}

#header-image img {
border:0 solid #efefef;
clear:both;
height:300px;
}

And it changed but when I try to upload the new image with the new size the establish image header size is the first one.

I hope you understand, my english is not very good…
Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 8, 2012 at 5:49 pm
Copy link
That is because the header uploader at appearance > header is hard-coded to the original size for the theme. You have to upload the image to the media library, get the URL of that image and then put it in directly through the CSS.

The site linked to your username though is using Pink Touch. You need to give us a link to the site you are talking about.
bricopsicologies · Member · Feb 10, 2012 at 12:29 pm
Copy link
Hello,
After a few tryings I changed the theme Bueno to the Pink Touch that has the header size that a wanted.

Now I’m trying to make linkable the header image to the main page of the blog, I guess I have to start doing what you say “upload the image to the media library, get the URL of that image and then put it in directly through the CSS”, but i don’t know exactly where I have to put it in the css.

Thank you!

The link to the site is: http://bricopsicologies.wordpress.com/
designsimply · Member · Feb 10, 2012 at 5:45 pm
Copy link
You can’t make something into a link using CSS only, but most of the time you can take over an existing link and repurpose it.

Try adding this to move the header image from the background of the #header area to the background of the site title link inside that area (#header h1 a):
```
#header {
  background: none;
  padding: 0;
}

#header h1 {
  position: relative !important;
}

#header h1 a {
  text-indent: -9999px;
  display: block;
  background: url(http://bricopsicologies.files.wordpress.com/2012/02/capsalera_bricopsicologies01cat.jpg) no-repeat;
  width: 690px;
  height: 185px;
}
```
genona · Member · Feb 14, 2012 at 9:07 am
Copy link
Hello designsimply!

I hope this is the right place to ask you this.

This is my blog: http://catbcn.wordpress.com/

I have CSS upgrade and I would like to add an image to the header (but not change it completely). I want to add the gravatar pink little cat in the blank space after “we love your cat” and above the language options.

Kind of like in this blog: http://jcrylequotes.com

Any help?

Thank you!
designsimply · Member · Feb 14, 2012 at 9:53 pm
Copy link
I see that http://catbcn.wordpress.com/ is currently using the Bueno theme.

Try this to add your kitty image as a background on the header:
```
#header {
  background: url(http://1.gravatar.com/blavatar/782548906f5764d7e57866863089f529?s=64) no-repeat right 40px;
}
```
You can adjust the 40px number to control how far down on the page it goes.
genona · Member · Feb 15, 2012 at 10:27 am
Copy link
Thank you! =^.^=
designsimply · Member · Feb 15, 2012 at 8:49 pm
Copy link
Cheers :)
vpender · Member · Mar 2, 2012 at 5:54 pm
Copy link
Hello,

I have been having similar problems (I am completely new to this and very confused), and your advice is the first advice that has worked!!

However when I paste in your code into the custom.css file, the picture replaces the title of my website.

#header {
background: none;
padding: 0;
}

#header h1 {
position: relative !important;
}

#header h1 a {
text-indent: -9999px;
display: block;
background: url(http://www.thisgirlslife.net/wp-content/uploads/2012/01/Three_Girls1-e1330706560275.jpg) no-repeat; width: 690px;
height: 185px;
}

Is there any way to keep the title AND get an image into the header of the Bueno start page? When I initially put this together on the WordPress.com website, Bueno looked so much better versus now, where I am hosting the website.

My goal is to keep the title, and have it above a banner-type photo in the header.

the website is http://thisgirlslife.net

Any advice whatsoever would be hugely appreciated!!
designsimply · Member · Mar 5, 2012 at 7:07 pm
Copy link
I checked http://www.thisgirlslife.net/ and I found that site is setup using WordPress software, but it is not hosted here at WordPress.com. See http://support.wordpress.com/com-vs-org/ to learn about the differences.

To give you a tip anyway, if you want to keep the site title, adjust the CSS you posted to remove the text-indent and increase the top margin for the background image and the height for “#header h1 a” like this:
```
#header h1 a {
display: block;
background: url(http://www.thisgirlslife.net/wp-content/uploads/2012/01/Three_Girls1-e1330706560275.jpg) no-repeat 0 1.1em;
width: 690px;
height: 320px;
}
```
If you need future help, please post your questions directly to the theme developers or to the volunteer-based WordPress.org support forums at http://wordpress.org/support/

No items found.