WordPress.org

Ready to get started?Download WordPress

Forums

[closed] TwentyThirteen theme masthead? (14 posts)

  1. feabionsu
    Member
    Posted 10 months ago #

    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.

  2. Rod Whiteley
    Member
    Posted 10 months ago #

    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.

  3. Rod Whiteley
    Member
    Posted 10 months ago #

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

  4. feabionsu
    Member
    Posted 10 months ago #

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

  5. feabionsu
    Member
    Posted 10 months ago #

    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?

  6. esmi
    Forum Moderator
    Posted 10 months ago #

    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).

  7. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

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

  8. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

  9. feabionsu
    Member
    Posted 10 months ago #

    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?

  10. Rod Whiteley
    Member
    Posted 10 months ago #

    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.

  11. Haggis0929
    Member
    Posted 3 months ago #

    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.

  12. Andrew
    Forum Moderator
    Posted 3 months ago #

  13. Haggis0929
    Member
    Posted 3 months ago #

    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!

  14. Haggis0929
    Member
    Posted 3 months ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic