agfreesafety
Member
Posted 1 year ago #
My site has an olive/gray-colored banner at the top of the screen. With some themes I've used in the past, I was able to replace the background image/border image by right clicking on the page and selecting "View Background" image. I could then identify the location of that image as well as the pixel dimensions so I could easily replace it with an image of my choice.
It doesn't appear to be so easy with this Silveray theme.
My questions:
1. Is it possible to replace the big olive/gray-colored banner with an image?
2. If it's possible, how would I go about doing that?
3. How would I know the ideal pixel dimensions the replacing image would need to be to show up properly on the screen?
This is the image that repeated in style.css
http://www.get2theleague.com/wp-content/themes/silveray/images/bg_header.gif
this is code in master.css file
for the header image
#header {
background: url("images/bg_header.gif") repeat-x scroll 0 0 #D3D9B7;
height: 140px;
position: relative;
}
You add you image in same folder images and change name take out repeat-x scroll 0 0 #D3D9B7 that will replace with your header image your header is 140px so you widen that if you want.
agfreesafety
Member
Posted 1 year ago #
Thanks! 140px, as in 140px wide, correct? What would happen to the blog title and slogan underneath it, would they remain there, or would they be replaced if I followed the instructions you provided above?
Thanks again!
They will still be there as all you doing is change background
the header background image is 140px high;
your theme seems to be flexible in width:
from min-width: 780px; to max-width: 1200px;
so your header image would need to be 1200px wide, but only have interesting content in the 780px on the left.
agfreesafety
Member
Posted 1 year ago #
If it's flexible, why would it need to be 1200px? No offense, I'm just trying to grasp the concept behind your response.
And would you be so kind as to explain what you mean by "interesting content?"
Thanks!
If it's flexible, why would it need to be 1200px?
the maximal width of the flexible range is 1200px;
the minimum width is 780px;
the actual width will depend on the size of your browser window.
v
if you make a banner image with some essential information beyond the 780px width, it may not be seen by some users.
agfreesafety
Member
Posted 12 months ago #
Hey guys, thanks for your help! I had a banner created and I have it placed now on my site.
As you can see, I now need to remove the site name and slogan, as it's conflicting with the banner.
My additional questions:
1. How do I go about removing the title "Get to the League" as well as the slogan underneath it, "Let's Get It"?
2. The banner is 780 x 140px. How can I stretch it so that it covers the whole page horizontally? As you can see, the new banner imag repeats on the right in attempt to fill the border space at the top of the screen.
Thanks again!
1. How do I go about removing the title "Get to the League" as well as the slogan underneath it, "Let's Get It"?
Check if it is hard coded in header.php
<h1>
<a href="http://www.get2theleague.com">Get To The League</a>
</h1>
<p class="description">Let's "Get It."</p>
agfreesafety
Member
Posted 12 months ago #
The only part of the Header.php that says <h1> is where it says:
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<p class="description"><?php bloginfo('description'); ?></p>
<!--<div id="logo">
(edit this line if you want to put logo)
Ok it picked up from your Settings General
check if you have theme options from where you can change setting to not display Title and description.
agfreesafety
Member
Posted 12 months ago #
Thanks, that fixed it. How do I stretch the banner image so it doesn't repeat itself on the right side of the screen?
This is the code that repeats the image in master.css check if you have it in theme options not to repeat
#header {
background: url("images/get2theleaguebanner.jpg") repeat scroll 0 0 transparent;
height: 140px;
position: relative;
agfreesafety
Member
Posted 12 months ago #
So should I remove the portion of the code that reads
repeat scroll 0 0 transparent
or do I remove all of the code that you referenced above? This theme doesn't allow me to access options/settings from within the WordPress, so I'm thinking I have to just modify the master.css, maybe?
If you take out repeat scroll 0 0 transparent from master.css that leave you your image 780px float to left you may want center it
Try this see if you like it
#header {
background: url("images/get2theleaguebanner.jpg") repeat scroll 0 0 transparent;
height: 140px;
margin: auto;
position: relative;
width: 780px;
}
agfreesafety
Member
Posted 12 months ago #
Thanks for the feedback, I made the suggested changes. It looks better, only the banner doesn't stretch to cover the entire area horizontally.
Is there a way to stretch the width of the image to cover the whole area now?
Thanks again for your time and help.
best way to do that is create same image and make it 950px wide and upload
agfreesafety
Member
Posted 12 months ago #
Thanks. I just tried that, and the banner is still being cut off for some reason. If you look on the right side at the webpage, you can see that it's cutting off the image.
For some reason, the replacement banner image doesn't fill-up the entire area that the greyish green color does on the theme in it's natural state.
Also, I'm noticing that the "Home" and "Contact Us" tabs are rising up on the page, and aren't where they were originally.
Any additional advice you can provide is appreciated. Thanks!
Triple P
Member
Posted 12 months ago #
The width of your #nav element exceeds the width of #header. To fix this, change:
#nav ul {padding: 0 11px;}
to:
#nav ul {padding: 0;}
agfreesafety
Member
Posted 12 months ago #
I believe I made the change you're referring to. That portion of my master.css now reads:
#nav ul {
min-width: 780px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
list-style: none;
}
...but the border is still looking the same way. Did I do something wrong?
agfreesafety
Member
Posted 12 months ago #
It looks like there's some code somewhere that's preventing the banner image from stretching to the edge of the available space like the default border did.
I also see that the border is beginning to replicate itself underneath itself, until it ran out of space.
Triple P
Member
Posted 12 months ago #
Your header width is 780px and your banner 800px (!). About the background, you'll have to set it to no-repeat:
#header {
background: url(http://mysite.com/image.png) top center no-repeat;
}
agfreesafety
Member
Posted 12 months ago #
Thanks, that turned-off the repeating.
Regarding the banner being so big, I had it set to 780px originally. I then mentioned in this thread yesterday (see above) that the banner wasn't covering all of the space that the original banner did.
I was then told by govpatel (who's been a tremendous help, by the way) to make the image 950px wide. I attempted to do so and uploaded the new image. That's why it's so big.
Please let me know if I'm doing something wrong. Thanks!
agfreesafety
Member
Posted 12 months ago #
Is it possible to expand the header width so that the banner takes up the entire space instead of looking like it does now?
Triple P
Member
Posted 12 months ago #
Sure, use this css with a background banner that is 1030x140.
#header {
background: url("images/get2theleaguebanner.jpg") center top;
margin: 0 10px;
width: 1030px;
height: 140px;
}
agfreesafety
Member
Posted 11 months ago #
Wow thanks! I'm learning SO MUCH!
One other question: is it possible to move the Contact Us and Home tabs down so that they don't run through the middle of the banner?
in master.css
#nav ul {
list-style: none outside none;
margin: 0 auto;
max-width: 1200px;
min-width: 780px;
padding: 0;
}
change to
#nav ul {
list-style: none outside none;
margin: 75px auto;
max-width: 1200px;
min-width: 780px;
padding: 0;
}
agfreesafety
Member
Posted 11 months ago #
Wow. You guys are like magic. Thanks!
OK, seriously this time, one more question...
How do I make it so that if someone clicks anywhere on the banner, it takes them back to the home page as normal?
To link your banner to home page will need to see your header.php code if you paste it in http://wordpress.pastebin.com
and paste url here.
agfreesafety
Member
Posted 11 months ago #
Thanks govpatel, here it is here: http://pastebin.com/WZYuZKDV
