WordPress.org

Support

Support » How-To and Troubleshooting » TwentyThirteen theme masthead?

TwentyThirteen theme masthead?

  • feabionsu

    @feabionsu

    Hey, I’m using the default TwentyThirteen theme, but I’m wondering about the masthead. Once I upload the header image, it looks good on the desktop, but I notice that the mobile version (iPhone/iPad) slices off the sides and just leaves the part of the image at the center.

    I’m wondering if there’s a way to edit the theme so that instead of taking the center part of the image, TwentyThirteen takes the right part of the image to use for mobile sites and small screens?

    Even better would be to just set different custom images for phones, tablets, and desktop, but even just getting the “focus” to the left part of the image would be great.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Rod Whiteley

    @rod-whiteley

    Don’t edit TwentyThirteen! In a child theme, or using a CSS plugin, you can change the way the background image is positioned. For example:

    .site-header {background-position: left top;}

    Another approach is to make the image scale automatically, but I don’t think it looks good:

    .site-header {background-size: contain;}

    I agree with you that a set of images would be the best solution. I’ll be implementing this myself for a site I’m developing based on TwentyThirteen, and I’ll share the details here when I have them worked out. TwentyThirteen adjusts for six different screen widths, so it looks like up to six images might be needed.

    Rod Whiteley

    @rod-whiteley

    I fixed my site’s child theme, and I’ve published sample code as a plugin called Header Demo.

    feabionsu

    @feabionsu

    Thanks Rod, I will definitely take a look at that when I get home!

    feabionsu

    @feabionsu

    Also, if I already edited parts of TwentyThirteen, can I change the name of the theme in style.css and create the child theme that way, or do I have to duplicate it first so that the default theme still stays in the Themes?

    esmi

    @esmi

    Forum Moderator

    can I change the name of the theme in style.css and create the child theme that way

    Not a child theme – no. That would create a completely new custom themes (although you would also have to change the theme’s folder name).

    WPyogi

    @wpyogi

    Forum Moderator

    You need to move your changes to a child theme – it’s not duplicating the parent theme.

    WPyogi

    @wpyogi

    Forum Moderator

    feabionsu

    @feabionsu

    Thanks esmi and WPyogi, I will create a child theme.

    Rod, I activated your plug-in, and right now it’s using the images you included, but my iPhone shows header3200… shouldn’t it be showing one of the smaller images?

    Rod Whiteley

    @rod-whiteley

    You’re right, it should, and I don’t know why it doesn’t. I copied the @media selectors from TwentyThirteen, which uses max-width, but other advice I’ve seen recommends max-device-width. Perhaps that will work better.

    Rod,

    I installed your plugin and the headers are showing up the way they should be (nice!). However, I can’t figure out how to change the header images from the defaults that are showing up.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Nevermind – I found it. For those that are also wondering, the plug in puts images under the directory “wp-content/plugins/headers-demo/images”. Just re-create the files using the same filename, and upload the new images to the directory. Thanks again Rod – I was looking all over the place for a way to accomplish this!

    So this worked when I installed for a parent theme, but it disappeared once I created a child theme. I’m sure there must be some editing to a .css file, but I haven’t a clue where to do that. Any ideas?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘TwentyThirteen theme masthead?’ is closed to new replies.