It looks like you’ve switched themes, did you still have a site running Pictorico that you need help with or are you all set?
Hi Kathryn, loving your theme!
Please could you let us know how we can change the display size of an image header from the default 1200px X 525px?
Thanks so much!
Galen – the simplest way to reduce the height of all your header images is by adding some custom CSS. For example, if you wanted the header image to be 400px tall instead, you could add this:
.entry-header .header-image {
height: 400px;
}
Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
Hi Kathryn, it’s making the image smaller but a full width grey block remains at 1200px X 525px.
I currently have an Under Construction plugin activated but let me know if you need me to remove this so you can see the site to know what I’m talking about.
I am using the Jetpack CSS Editor.
Hi Kathryn, any update regarding the above? It will be hugely appreciated!
[no bumping, per forum etiquette]
Hi Galen, could you provide screenshots of the issue, along with links to the featured image you’re testing with so I can download and try to replicate it?
Here’s a guide on how to make a screenshot, if you’re not sure: http://en.support.wordpress.com/make-a-screenshot/
You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Droplr or Imgur.
Hi Kathryn, please could I get an update regarding this? It’s the only thing baffling my brain and I’m really hoping to launch this site this week! Thanks so much.
The screenshots are super helpful. Based on those, it looks like you want to replace the site title with an image but the Pictorico theme doesn’t have an option for that and the header image in Appearance > Header for that theme sits below the site title and stretches full width.
What this means is that you’ll want to make a different customization instead of using Appearance > Header since that won’t make the change you want.
To swap out the site title with an image, you can use CSS. To add CSS to an existing theme, you can either make a child theme or add custom CSS using a CSS editor such as the one that comes with Jetpack.
Here is an example using the Image-Header-to-be-used.jpg file you linked to earlier:
.site-branding {
max-width: 301px;
}
.site-title {
width: 300px;
}
.site-title a {
background: url(http://files.witnessthis.co.za/2014/06/Image-Header-to-be-used.jpg) no-repeat;
display: block;
width: 300px;
height: 80px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
The first two blocks adjusting max-width and width are to give the container elements for the site title a little extra space since your image is just a little too large to fit on its own without getting clipped.
If you change out the image link in the url() function, make sure to update the pixel widths to match your image height and width. You can make adjustments to the CSS until it looks good to you.
Here is a link to the image replacement technique in case you’re interested:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
YES!!! Success!!! Thank you so much!!!
I have followed these instructions in order to insert a logo instead of the site title – it has managed to make the right space, but the image isn’t appearing … can you let me know why this may be the case?
Thanks
When that happens usually the culprit is that the file path isn’t right. Can you paste here the path to your image that you put for this line:
background: url(http://files.witnessthis.co.za/2014/06/Image-Header-to-be-used.jpg) no-repeat;
Could you provide a link to your site where you’ve made the tweak so I can take a look?
I’m going to close this thread because the OP’s issue has been resolved – Alice, please feel free to continue in your own thread here:
http://wordpress.org/support/topic/display-a-logo-instead-of-the-site-tagline
If anyone else needs help, feel free to to start your own thread:
http://wordpress.org/support/theme/pictorico#postform
