Forum Replies Created
-
AuthorPosts
-
susanlangenesMember
You are most welcome 🙂
susanlangenesMemberI think in your case a bit of a combination of the two will work best. The image will shrink if its width is specified as a percentage, but I'm thinking that doesn't really need to happen until the screen is around 500px wide.
What do you think? Can you specify how you'd like it at various screen sizes?
susanlangenesMemberI can't figure out why our posts are in opposite order... oh well.
I'd actually recommend playing with the CSS rather than adding negative space to the image.
Put these lines in and you can have fun with adjustments:
.header-image #title-area {
height: 120px;
width: 400px;
}
You might also add media queries and play with those.
Cheers!susanlangenesMemberHey looks great!
If you'd like the logo to be centered for smaller screens, the same way the header widget is, then add this:
@media only screen and (max-width: 960px) {
#title-area { float:none; margin: 0 auto; }
}susanlangenesMemberOk here, try this:
#header { background: #090909 url(images/header.png) center repeat-y!important; }
And yes, you're absolutely right to put the CSS in the child theme's stylesheet (not the Genesis stylesheet).
susanlangenesMembercool... give me a sec and I'll have another couple css rules for ya
susanlangenesMemberOh woops, just realized an error.
.header-image #title-area { text-indent: -9999px; }
should be
.header-image #title-area a { text-indent: -9999px; }
And for purposes of consistency you might want to make the previous declarations specify .header-image #title-area as well, rather than just #title-area. Should work either way though.
susanlangenesMemberYes, this'll keep the responsive-ness. We might have to make a tweak or two.
For purposes of testing I downloaded your logo and did a very rough job of removing the background, so you're welcome to use that image if you want but I suspect you'll want to create a better one. It should be 400px in width.
First, go back to Appearance > Header and remove the header image. This will make the site title text reappear.
Next, upload your transparent-background logo via FTP to wherever you want, or via the WordPress media uploader, and get the url for the image. Then, in your stylesheet for the Outreach theme (or some other custom stylesheet if you have one), put the following, replacing the url for my sloppy image with yours (and you can totally use mine for now if that's easier):
#title-area {
background: url(http://collagetrio.com/design/BOLheaderBG1400.png)no-repeat;
background-repeat: no-repeat;
}
.header-image #title-area { text-indent: -9999px; }And once that's done come back and let's have a look to see what else needs to be tweaked.
susanlangenesMemberActually wait, here's another screenshot: collagetrio.com/design/ss2.jpg
Totally no problem to keep the dark grey squares.
susanlangenesMemberHey there. I just helped someone else with a similar issue with this theme so I thought I'd stop in.
I agree that it's a little wonky the way this theme's header/logo upload works. But we can get around it. Couple questions:
1. Do you want your logo centered, or would it work for you to have it on the left? I ask because with it centered, we'll have to make some adjustments to the header widget area too.
2. Do you want to keep the dark grey squares pattern behind the logo or would you be cool with a solid color behind the logo?
If left-aligned and solid background is ok with you, that'd be the easiest fix. Here's a screenshot of what that would look like:
susanlangenesMemberYay! It's really the last declaration there that matters (background-size:cover;) so if you ever want to change anything about the header image in the future, just make sure that one stays. The others are all just declarations that were already applied (or, supposed to be applied) so I simply copied them just in case.
🙂
susanlangenesMemberOk. this is a little bit hacky, but try it and see if it works. Add all this to either a custom stylesheet or to the bottom of the theme's stylesheet:
#header {
margin: 0 auto!important;
min-height: 100px!important;
width: 100%!important;
background-repeat: repeat-y!important;
background-position: center!important;
overflow: hidden!important;
background-size: cover!important;
}
It's really overkill but I'm hoping it'll work...susanlangenesMemberThat's odd. Your html output for the page shows
#header {
background: url(http://www.firststepsfitness.ca/wp-content/themes/outreach/images/header.png) no-repeat;
}
Which shouldn't be there. Have you uploaded a custom header somehow, or do you have a plugin or something that allows you to change the header image and/or text?
How did you get the site title to be purple?susanlangenesMemberRight on, glad we got that cleared up.
So I'd suggest this:
background: rgba(255, 255, 255, 0.3);
(and of course that last number can be whatever you want). I just implemented that here: http://music.collagecreative.net/ and made the opacity 0.75.
susanlangenesMemberMarina, I don't see any white space at the right of the header in the Outreach theme demo here: http://demo.studiopress.com/outreach/
Can you give us a link to the site you are working on?
susanlangenesMemberIn your custom stylesheet (I'd use the one supplied by Jetpack, since you have it installed), add these lines (and you'll likely want to play with them a bit but this will give you something to start with):
#header { width: 1060px; }
#nav { width: 1058px; }
#inner { width: 1000px; }
#content-sidebar-wrap { width: 1000px; }
#content { width: 740px; }
#footer-widgets { width: 1060px; }
susanlangenesMember#A3B460
As with any color that is specified in CSS, you can always find it yourself by using your browser's inspector. Here's a great introduction to how to do that: http://ruby.bastardsbook.com/chapters/web-inspecting-html/
susanlangenesMemberHere's a site where I have that slider: http://music.collagecreative.net/
I made it opaque for you.
I see that you have put opacity: 0.95!important somewhere. Where is that? If you want it opaque, it should work to change that to opacity: 1!important
I'm admittedly a little confused by the initial question as well as the responses in this thread. Opaque means non-transparent. As in, solid white. I'm assuming that's what you're after based on the initial question, but I wonder if what you really mean is that you want the background on that div to NOT be opaque.
If that's indeed the case (you want it to be semi-transparent), then you need to address the opacity of the background itself, and not the entire div, because if you make the entire div semi-transparent then the text is also affected.
You might try this:
background: rgba(255, 255, 255, 0.3);
Which will give a background color of white with 30% opacity.
Please advise!
susanlangenesMemberNo problem. Hey, you got the RSS icon on there too! Nice work! 🙂
susanlangenesMemberDaniel, if you put
.menu li.menu-twitter a:hover { background: none; }
anywhere AFTER line 375 in your stylesheet, that triangle will go away. Seriously.
You will likely also want to add the following:
.menu li.menu-twitter a:active, .menu li.menu-facebook a:hover, .menu li.menu-facebook a:active {background:none; }
-
AuthorPosts