Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header change in Lifestyle Theme
Tagged: Change Lifestyle header
- This topic has 20 replies, 2 voices, and was last updated 8 years, 11 months ago by willyr.
-
AuthorPosts
-
May 22, 2015 at 9:37 am #153269willyrParticipant
Searched for and cannot find answer.
Would like to make my header image larger (about 2/3 of height and width) and eliminate the "red" background in the header area of my website.
Thanks for any help.
http://www.air-compressor-help.comMay 22, 2015 at 10:48 am #153280Lauren @ OnceCoupledMemberWillyr,
The background color is a result of your theme's styles. Add this to your style.css file:
.lifestyle-pro-red .site-header { background: transparent; }
As for your image, you just need to upload a larger image. It's currently displaying at the size you uploaded it at. Just create a larger image.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 22, 2015 at 11:09 am #153285willyrParticipantThank you Lauren. I will make the CSS change.
The problem with the Lifestyle logo is that it will not allow me to upload a larger image. When I try to do so up comes a page "crop to size" and it will not allow a larger image than the one that's up there.
Thoughts?
Thanks,
WillyR
May 22, 2015 at 11:18 am #153292Lauren @ OnceCoupledMemberGo into your functions.php file and increase the header image size that is included there. If you have a look at the file, it should be fairly easy to spot.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 22, 2015 at 11:19 am #153294willyrParticipantThanks. Will do.
WillyR
May 26, 2015 at 3:33 pm #153714willyrParticipantWell Lauren, I added the code to the bottom of the CSS style sheet as follows:
.lifestyle-pro-red .site-header {
background: #ffffff;
}I did it first with the background as transparent, and neither it or the #ffffff code for white background made any change in the site presentation.
I then went into the functions.php file and changed the height and width numbers as shown:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 350,
'width' => 650,
) );Neither change "took" after I had uploaded the files back to the server.
Surely I've done something wrong. Any ideas for me?
site: http://air-compressor-help.com/
Thanks.
May 26, 2015 at 3:38 pm #153715Lauren @ OnceCoupledMemberYou added that style into a media query, which is why is isn't showing. Paste it just before your media queries, instead.
As for your header image, I'm seeing that the image your uploaded successfully is 520 x 200, it's not quite as large at the area you specified. For it to show properly, you'll need to change the following:
.header-image .site-title a { float: left; min-height: 110px; <-- this should match the height in your functions file width: 100%; }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 26, 2015 at 4:03 pm #153717willyrParticipantTried relocating this:
.lifestyle-pro-red .site-header {
background: #ffffff;
}... to a number of spots in the CSS. Makes no change so far. Where should I paste it in the style.css page please.
Also, where should I paste this please:
.header-image .site-title a {
float: left;
min-height: 110px; <-- this should match the height in your functions file
width: 100%;
}If in the CSS where, and do I have to change the functions.php too?
Thanks,
WillyR
May 26, 2015 at 4:26 pm #153718willyrParticipant"… to a number of spots in the CSS. Makes no change so far. Where should I paste it in the style.css page please."
Including "just before your media queries, instead."
Makes no change at all even after refreshing repeatedly.
WillyR
May 26, 2015 at 6:30 pm #153736Lauren @ OnceCoupledMemberLooking at your site, it seems like you found where to place it! 🙂 As for the
.header-image .site-title a
bit, it already exists and you should be able to find it by searching (ctrl + f) your file. The line I pointed out should match the number that you've already changed in your functions file.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 26, 2015 at 7:04 pm #153738willyrParticipantI thank you for your patience in this ongoing dialogue. I realize you do this for a living. So good of you to offer help in these forums too.
Still struggling. With your help got the background to go white, but cannot seem to get the header large enough or in fact, get it all there.
Using this code on CSS:
.header-image .site-title a {
float: left;
min-height: 200px; <– this should match the height in your functions file
width: 100%;
}And using this code in functions.php:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 200,
'width' => 600,
) );Can I prevail upon you for a bit more help, Lauren?
May 26, 2015 at 7:06 pm #153739Lauren @ OnceCoupledMemberApologies, I should have commented that line out, or explained it's use. The arrow is for your clarification only, and may mess up your CSS if it's pasted into your file directly. You should simply use:
.header-image .site-title a { float: left; min-height: 200px; width: 100%; }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 26, 2015 at 7:21 pm #153740willyrParticipantDarn....
I have this:
.header-image .site-title a {
float: left;
min-height: 200px;
width: 100%;
}in the site header section of the style.css file.
Looked at my site, cleared the cache, refreshed, and it's still not giving me the whole header logo.
The graphic file is 200 px height x 600 px width in size, but that's sure not what I'm seeing on the page.
May 26, 2015 at 7:40 pm #153742Lauren @ OnceCoupledMemberCould be a caching issue then... when I look at the live version of your style.css file, it doesn't have those changes yet.
As a side tip, I'd recommend getting rid of some of that white space, too.
.site-header { background-color: #76d2c5; padding: 0; /* <-- this line */ overflow: hidden; }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 27, 2015 at 6:06 am #153780willyrParticipantIt must be something to do with propogation and caching as you say, Lauren.
I have just uploaded a new style.CSS file in which the following code appears for the header area:
/*
Site Header
---------------------------------------------------------------------------------------------------- */.site-header {
background-color: #76d2c5;
padding: 48px;
overflow: hidden;
}.header-image .site-title a {
float: left;
min-height: 200px;
width: 100%;
}.site-header {
background-color: #76d2c5;
padding: 0; /* <-- this line */
overflow: hidden;
}After FTP'ing the style.css file, I both clear the cache (Shift+F5) and use the browser to clear all history, including the cache.
Typically any CSS change presents on the live site immediately. When I visit the site a few minutes after uploading the CSS, I see absolutely no change on my site. Too small header cropped to lose some of the info.
WillyR
May 27, 2015 at 6:35 am #153784Lauren @ OnceCoupledMemberIf I look at your stylesheet directly, I see the changes, so there's some reason they aren't being pushed to your live site.
http://air-compressor-help.com/wp-content/themes/lifestyle-pro/style.cssThere are also a couple other problems. Take a look at your CSS:
.site-header { background-color: #76d2c5; padding: 48px; overflow: hidden; }
and
.site-header { background-color: #76d2c5; padding: 0; /* <– this line */ overflow: hidden; }
have the same selector,
.site-header
. They are modified versions of the same block of code. You only need one. Delete the second one, and replacepadding: 48px;
withpadding: 0;
in the first.The same is true for
.header-image .site-title a
. If you look through your style.css file, you'll find that it exists further down the page. That second declaration is going to over write the first, which means even if your style sheet reloaded, it wouldn't work. Find that second statement and replace the single, changed line.🙂
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 27, 2015 at 6:49 am #153790willyrParticipantHi Lauren... don't you ever sleep? 🙂
New style.css code as follows, and already uploaded to the server:
.header-full-width.header-image .site-title a {
background-position: center !important;
margin: 0;
}.header-image .site-title a {
float: left;
/* min-height: 110px; */
width: 100%;
}After clearing cache, no apparent change on my site. Must be a cache issue on the server side?
WillyR
May 27, 2015 at 6:55 am #153792Lauren @ OnceCoupledMemberHaha, I do sleep, but I also welcome emails that distract me from tedious work tasks or losing sports teams.
I suspect you are right, there's some kind of caching at play. W3TC or CloudFlare or your host should all have some kind of way to clear that cache.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 27, 2015 at 7:17 am #153798willyrParticipantHi Lauren... I'm feeling bad about Tampa Bay... but we got one more kick at the can!
So, a heads up about Go Daddy's "managed WordPress" hosting site. You are right on the money. After the last go around I contacted their support and guess what, you have to log into the WP admin, and use a link / button at the top of the page to clear the cache, and even then, it takes 2-3 minutes sometimes for their servers to actually do it.
So, I'm not happy about this, but at least we now know why changes in the CSS were not propogating, and, if you get queries about this issue from others, knowing if they are hosting on Go Daddy might help.
Thanks so very much for all your help. After I jumped through the GoDaddy hoops for clearing the cache, the site is now presenting well.
Have a good one. After submitting this I will mark this issue as being fixed!
WillyR
May 27, 2015 at 7:52 am #153809Lauren @ OnceCoupledMemberYeah, I hoping Friday is a good day for the Lightning!
Thanks for the info on your particular host. Caching is good, as it makes your site faster, but since it's frequently handled a multitude of ways, it can be difficult to get around at first.
Glad you got everything sorted!
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The topic ‘Header change in Lifestyle Theme’ is closed to new replies.