Title: Edit header text style Last modified: August 22, 2016 --- # Edit header text style * Resolved [liatlitwin](https://wordpress.org/support/users/liatlitwin/) * (@liatlitwin) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/) * Hi, * I would like to edit the style of the header text that appears on top of the header image on the left of the page for this theme. Specifically, I’d like the opportunity to move it up, add a shaded box in the background, and play with the font (but not edit the H1 font for the rest of my site). Any tips on how I can do this? I have jetpack installed and have been using CSS to make minor tweaks, but can’t seem to figure out where the the styling information is held for this component of the site. I’d prefer not to edit the photo itself, as I worry that on different screens and browser sizes the text would not show up. * Thanks! -L Viewing 7 replies - 1 through 7 (of 7 total) * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855267) * 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/](http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/) [https://dailypost.wordpress.com/2013/07/25/css-selectors/](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. * Thread Starter [liatlitwin](https://wordpress.org/support/users/liatlitwin/) * (@liatlitwin) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855388) * 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? * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855389) * > 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? * Thread Starter [liatlitwin](https://wordpress.org/support/users/liatlitwin/) * (@liatlitwin) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855390) * [http://oi59.tinypic.com/insh91.jpg](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](https://wordpress.org/support/users/sacredpath/) * (@sacredpath) * Automattic Happiness Engineer * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855418) * 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. * Thread Starter [liatlitwin](https://wordpress.org/support/users/liatlitwin/) * (@liatlitwin) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855421) * This worked perfectly, thank you so much!! * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855425) * Wonderful! I’m glad sacredpath was able to help you achieve the effect you wanted. Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Edit header text style’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/bushwick/1.3.3/screenshot.png) * Bushwick * [Support Threads](https://wordpress.org/support/theme/bushwick/) * [Active Topics](https://wordpress.org/support/theme/bushwick/active/) * [Unresolved Topics](https://wordpress.org/support/theme/bushwick/unresolved/) * [Reviews](https://wordpress.org/support/theme/bushwick/reviews/) * 7 replies * 3 participants * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/edit-header-text-style/#post-5855425) * Status: resolved