I used a browser inspector to find the element you can target to tweak the text that’s displayed in the left area:
.site-header .site-title, .site-header .site-description, .site-header .entry-header .entry-title, .site-header .entry-header .entry-meta a, .site-header .entry-header .post-navigation a {
}
You can learn more here about how to find the right element to target so you can change it with CSS:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
https://dailypost.wordpress.com/2013/07/25/css-selectors/
Let me know if this does the trick or if you need help with any of the specifics.
Thanks Kathryn!
Yes, I’ve managed to make some changes. I was wondering, however, if there is any way to control where the text appears on the header image? I played a bit with the position tag in CSS, but this seemed to ruin the static image vs. scrolling content setup of the whole page. Specifically, I’d like the text to be at the very bottom of the image, or even under it. Is this possible?
Specifically, I’d like the text to be at the very bottom of the image, or even under it.
I’m not sure what you mean since the image takes up the full height of the browser window, right?
Do you ave a sketch or mockup of what you mean that I could look at?
http://oi59.tinypic.com/insh91.jpg
I was thinking something like the link above. When I uploaded this image the theme cuts out most of the text though, so I prefer to add the text as header text as designated in the theme. (And so that it will remain visible on mobile and other platforms).
I’m just having trouble with the CSS and getting it to position at the very bottom of the page like so. Would appreciate any tips you might have! Thanks so much.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi there, it would help if I could see your site since I’m having to use the Bushwick demo site right now and can’t see if what I’m doing will interfere with other customizations you have made. If you could provide a link to the site, that would be very helpful.
Give the following a try. I’ve done this with a media query to limit this change to 642px and wider screens. At 641px in width, the image goes to more of a standard layout (horizontal at the top of the screen). See what you think with this, and we can go from there.
@media screen and (min-width: 642px) {
.site-branding, .single .entry-header {
background-color: rgba(0, 0, 0, 0.5);
bottom: 3.5em;
box-sizing: border-box;
left: 0;
max-height: 250px;
max-width: 100%;
padding: 0 1.5em 1.5em;
position: absolute;
top: 0;
width: 100%;
}
}
The background color declaration can be changed as you see fit. I’ve used RGB color (the first three numbers between the parentheses) with an alpha opacity of 0.5 which makes it transparent. The closer to 0, the more transparent.
This worked perfectly, thank you so much!!
Wonderful! I’m glad sacredpath was able to help you achieve the effect you wanted.
