Community Forums › Forums › Archived Forums › General Discussion › Header image issues in Enterprise Pro
Tagged: Enterprise Pro, header image, retina display
- This topic has 6 replies, 2 voices, and was last updated 8 years, 3 months ago by seokomodo.
-
AuthorPosts
-
January 7, 2016 at 11:41 am #175865seokomodoMember
Hello, I'm running into a very annoying issue with the header image with Enterprise Pro. I have added the company logo, but it looks blurry on retina displays. I have tried everything to get it to work, but nothing works.
I tried uploading a 2x logo file using the header customizer feature, but when I do that WordPress doesn't give me the option to Skip Cropping. So that's out.
I've tried adding that 2x file to the media library and then adding it to the retina display section of the CSS file as such:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .site-header .title-area { background: rgba(0, 0, 0, 0) url("http://icc.seokomodo.com/wp-content/uploads/2015/12/ICC-web-logo-300dpi_640x370.png") no-repeat scroll 0 0 !important; background-size: 640px 370px !important; } }
Doesn't work.
I even tried just loading an SVG using the header customizer, but I run into an error when I get to the crop image step. So that doesn't work.
When I try adding the svg in the CSS file it shows up but it also shows the text site title over top of the SVG.
Can someone show me what I'm missing here.... thanks.
http://icc.seokomodo.com/January 7, 2016 at 2:55 pm #175892carasmoParticipantRemove the plugin/customizer or whatever that is creating the following embedded CSS:
<style type="text/css">.site-title a { background: url(http://icc.seokomodo.com/wp-content/uploads/2015/12/ICC-web-logo-300dpi_320x185.png) no-repeat !important; }</style>
Why: You won't easily be able to over-write embedded styles + !important declarations in a style sheet (style.css) with earlier priority. What comes first in CSS is over-written by later CSS.
Then in your style.css , at the end, outside all media queries, add this AND edit it to reflect your path, your size in the high res media query:
/* --- background logo ---- */ .header-image .site-title > a { background: url(http://icc.seokomodo.com/wp-content/uploads/2015/12/ICC-web-logo-300dpi_320x185.png) 0 0 no-repeat } /* --- center the background image ---*/ @media (max-width: 1023px) { .header-image .site-title > a { background-position: 50% } } /* --- * A CSS media query that captures almost all high DPI aware devices. * https://gist.github.com/marcedwards/3446599 --- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { .header-image .site-title > a { background-image: url(path/to/retina-image.png); /* this image is twice as large as the non-retina version */ background-size: 150px 75px; /* display at half the size (W,H) of the uploaded image if uploaded image is 300px X 150px, change the values for your image */ } }
January 8, 2016 at 11:23 am #175975seokomodoMemberThanks for the info carasmo!
The embedded CSS was coming from the WP header customizer which I used to add the custom header image as directed in the theme setup doc here: http://my.studiopress.com/setup/enterprise-theme/#step-6. I was turning that off when I was trying to add the image via the stylesheet. But as I can see from my example and the example you provided, I wasn't using the right CSS.
However, after making the coding changes you recommended, it still isn't working. It isn't showing the image at all. Just the site title text....
January 8, 2016 at 11:36 am #175977carasmoParticipantPage 42 of 59 : http://my.studiopress.com/docs/genesis-for-beginners/
Go to your wp-admin then choose Genesis > Theme Settings. Find the Header post box and choose whether you want a logo or text. Choose the logo. Then it will work.
January 8, 2016 at 11:45 am #175978seokomodoMemberThanks for the super quick reply, carasmo! After making your recommended changes and before replying to this thread, I went to Genesis > Theme Settings and looked for that setting. It isn't in there. I'm running WP 4.4.1 and Genesis 2.2.6. I checked the screen options tag in the top right to make sure I had all boxes checked as well and I do. The only theme settings available are:
- Information
- Color Style
- Custom Feeds
- Default Layout
- Navigation
- Breadcrumbs
- Comments and Trackbacks
- Content Archives
- Blog Page Template
- Header and Footer ScriptsThat's it, no “Header Settings” box where you can select to show the “Image Logo” or “Dynamic Text” logo.
January 8, 2016 at 12:34 pm #175982carasmoParticipantOne last step. Enterprise Pro is using the customizer, I wasn't aware of that. Kinda crappy that built in retina support is not there.
Anyway, the fix is easy via CSS (OR you can just remove the customizer support in your functions.php file from lines 38 - 44 — back up first and use a code editor).
All that is changed here is that the parent class .header-image was removed. So you don't have to re-paste this in, just remove the
.header-image
before the .site-title./* --- background logo ---- */ .site-title > a { background: url(http://icc.seokomodo.com/wp-content/uploads/2015/12/ICC-web-logo-300dpi_320x185.png) 0 0 no-repeat } /* --- center the background image ---*/ @media (max-width: 1023px) { .site-title > a { background-position: 50% } } /* --- * A CSS media query that captures almost all high DPI aware devices. * https://gist.github.com/marcedwards/3446599 --- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { .site-title > a { background-image: url(path/to/retina-image.png); /* this image is twice as large as the non-retina version */ background-size: 150px 75px; /* display at half the size (W,H) of the uploaded image if uploaded image is 300px X 150px, change the values for your image */ } }
January 8, 2016 at 1:35 pm #175990seokomodoMemberGot it. I tried just changing the CSS first, but that still left the dynamic text. So to get it to work, I commented out the customizer support from the functions file. That made the header setting visible in Genesis Theme Settings. I set the header setting to image logo and uploaded the CSS with .header-image included.
Looks good now! Thanks for taking the time to help me figure this out, carasmo. 😀
-
AuthorPosts
- The topic ‘Header image issues in Enterprise Pro’ is closed to new replies.