Alternate Header Logo for Mobile Sites? (Lifestyle Pro)

Community Forums Forums Design Tips and Tricks Alternate Header Logo for Mobile Sites? (Lifestyle Pro)

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  braddalton 6 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #105865

    brightisland
    Participant
    Post count: 20

    I’d like to use a wider header image on desktop and other larger screen devices, and then automatically switch to a square logo on mobile devices (like iPhones).

    I know how to use a larger header on the desktop site (tweaking the header image size in functions.php and in the regular CSS styling for the header), but I don’t know how to tell the site to use an alternative logo for mobile sites.

    I know it can be done, because some responsive themes I recently purchased from Pretty Darn Cute Designs have that feature.

    In fact, I’m happy to upload my own header images and specify them in the css, I’m just not sure how to do that with Lifestyle Pro.

    Thanks in advance.

    PS – I haven’t included a link because it’s a development site and not accessible without a password.

    #105866

    braddalton
    Participant
    Post count: 10593

    You can use Media Queries which you’ll find near the end of your style sheet Or you can use conditional tags for mobile devices or the wp_is_mobile() conditional tag however CSS is the best solution.


    #105868

    brightisland
    Participant
    Post count: 20

    Well, I had thought about using Media Queries to tell the site to look for a different logo image, but I wasn’t sure how I would code that part.

    Would I just specify a background-image for the header on mobile devices like this under this section?

    
    @media only screen and (max-width: 767px) { 
    
    ...
    
    .header-image .site-title a {
    		background-image: url('http://www.website.com/image.png');
    	}
    }

    Or would I need to tell it first not to show the default header image? If so, I’m not sure how to do that.

    • This reply was modified 6 months, 1 week ago by  brightisland.
    • This reply was modified 6 months, 1 week ago by  brightisland.
    • This reply was modified 6 months, 1 week ago by  brightisland.
    • This reply was modified 6 months, 1 week ago by  brightisland.
    #105875

    braddalton
    Participant
    Post count: 10593

    You could change the size of the site-header class on different sized devices,

    You may also want to change the padding and margins for that theme.

    If you wanted to use a totally different image, you would need to remove the default and use PHP code with conditionals for each device. Or a plugin which adds them.


    #105883

    brightisland
    Participant
    Post count: 20

    Thank you for trying to help me out with this.

    I installed the plugin, but it appears I’d need to be familiar with php coding to make it work with the site.

    Unfortunately, I’m not a php programmer, so that’s the problem. I don’t know how to write new custom functions. My php-modification expertise is limited to going in and tweaking things like set parameters like width, height, url, etc..

    I imagine I would need some sort of if – desktop, then- this, if – screen less than 800px wide, then this – but whenever I try to write php, my site breaks. :-\

    That said, what if I just removed the default header image upload function, and then manually set the header image in the css? Then I can probably just use css to use one header image for regular devices, and a different header image for mobile devices, right?

    So I guess if that would work, my question is, what part of the custom functions file would I remove (code out /* */) to just use the style sheet for dictating the header image(s)?

    #105892

    brightisland
    Participant
    Post count: 20

    Ok… I think I’ve sort of got it working, but although it’s pulling in the right logo for mobile devices, it’s getting chopped off on the sides and bottom.

    I’ve tried to figure out where I should decrease padding/margins to make it display correctly, but can’t sort it out.

    I’ve temporarily turned off the passwd protection in hopes of getting some assistance with this.

    Here’s the link.

    Thank you!

    • This reply was modified 6 months, 1 week ago by  brightisland.
    • This reply was modified 6 months, 1 week ago by  brightisland.
    #105909

    brightisland
    Participant
    Post count: 20

    Nevermind… I figured it out.

    #105957

    braddalton
    Participant
    Post count: 10593

    So what did you do?

    CSS Media Queries or mobile conditional tags?


    #106063

    brightisland
    Participant
    Post count: 20

    Well, the code isn’t pretty, so I won’t paste it, but in short, I removed the header upload support in the functions.php file, and then used CSS media queries.

    I created two separate header images for the desktop site, and mobile browsers, and specified the corresponding images in the regular css and media queries sections. I never was able to get the padding reduced on the header section of the mobile site, but I found a workaround by decreasing the logo size so it would fit.

    #106112

    braddalton
    Participant
    Post count: 10593

    Ok. Good to see you worked it out as i know a good solution will be popular with that theme.

    If you change your mind about posting the code, you might find Github Gists a good way to host it and embed or link to it as you can then change or update the code if needed.

    Thanks for your feedback.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.