Homepage › Community Forums › Epik Theme Support › Header Issue in Mobile View
Tagged: customize.css, epik, header, responsive
I tried out my site on the iPhone in portrait mode (taller than wide) and noticed that my logo did not resize and extends beyond the right edge of the screen.
Screenshot here: http://screencast.com/t/TXqvoQQpLo
I know I asked to customize the header, and if I have to live with this (or resize the logo) I will. But I’m curious- should the theme scale the image to fit the browser?
With Genesis themes, the logo won’t resize automatically like “inline” images because it is a background image. Background images don’t resize by default in css, unless you use “background-size:“….Most people either upload a smaller image that shows up for mobile devices, or you could try this plugin which should do it automatically – http://designsbynickthegeek.com/plugins/genesis-responsive-header
Also, give this a try and see if it works –
background-size: cover;
Add this to your header image
Let me know if that works.
Thanks for the tip, tho they beget another question:
All of these customizations will get lost/overwritten when I upgrade the theme, no?
I’ve used other WordPress themes that had specific custom.css files where one puts all their customizations, and which never gets overwritten. Considered that segregation method?
Yes anytime you customize a child theme’s css and update the css file, then everything will be overwritten. I always recommend saving your customizations at the bottom of your css file and transferring it to the newly updated file whenever there is an update.
You could also add a custom.css file to the theme and link to it from their style.css file which means future updates won’t effect it.
You can also add css code to your Genesis Theme Settings…..but if you do that, I’d recommend saving your css somewhere locally just in case you accidentally reset your settings.
Wes,
Thanks. To be clear- I’m suggesting that you build a custom.css file right into your theme, and then make it obvious to customers how to use it. I would gladly pay another $10 for that feature alone.
A year ago I asked a few other developers within the Genesis community if this was a good idea, but most of them didn’t think it was necessary since child themes don’t get that many updates as the framework. I still think its a good idea to offer a way to have the css separate from the child theme since it makes it easy to track and separate what you’ve added.
Do any of the suggestions in my previous comment work, or would you prefer something different/better? I just want to get an idea of what people would want.
The way I’ve done it in the past is to use the “link” method, which would allow me to create a custom.css file and add in the updates within the file just as if I was using the style.css file. If you think this is a good idea, then I may create a quick tutorial on how to do this.
I’m asking for the moon and stars here. I’d love to have a custom.css file that ships with the theme, and which is pre-set to be referred to by style.css. Then in the backend interface for the theme, a Customize tab/option that opens up and allows for custom css to be added.
Here’s a screenshot of another theme that does just that:
http://screencast.com/t/OUbRVGgDK
I’m sure I can fuddle around in the files and achieve the header effect I’m looking for using custom css. But to not keep that css separate seems risky to me, as does creating custom.css on my own and trying to figure out how to make the theme refer to that custom.css file. For instance- would I then have to add something to style.css that says “let the css in custom.css overule anything in here”?
Final issue- custom.css doesn’t help at all with changes to the functions.php file. Do changes to functions.php get overwritten with a theme upgrade, too?
This is something you can easily do. Just simply create a css file (just copy the style.css file and rename it to custom.css).
Then add this to your original style.css file –
@import url("custom.css");
This is how you would link to your external css file (custom.css) from your original style.css. This method is actually safer than adding styles on your theme settings page. If you accidentally reset your settings, then all of the styles that you created will disappear, but if you do it in the way I suggested, the code will always be there and will never be overwritten since it’s a separate file.
It’s actually better to do it this way and NOT include a custom.css file with child themes. If we did include them, it would overwrite any changes you made to your own custom file. I think its better if you manually create the custom css to keep everything separate and untouchable from theme files.
For functions files, I would just organize and keep all of your addon codes in a particular place and transfer them to the newly updated functions file if there is ever an update to this particular file. Functions files aren’t really that big of an issue since not many things are updated. These files can easily be managed and there isn’t really a need to create an “external” functions file. I would just keep everything organized.
Oh I see. You want me to create my own, because if you ship with an empty custom.css file it would necessarily overwrite mine. Fair enough- I think that’s how RocketTheme does it too.
Re: Functions. I might humbly suggest that as you contemplate future themes, try to isolate the header customization to CSS, and not even have jokers like me touch the functions.php file.
You’re spending all this time answering my questions, and I should get out of the way and let you work on those tutorials. Thanks again!
Yep that’s it.
For the functions file, thats just the way Genesis is setup, and what they recommend. The best I can do is create a tutorial on how to modify certain things like the header/logo, etc. Hopefully I’ll have these soon.