CSS – Add image with no change
-
Hello,
I’ve been wanting to change the text in the header of my blog to an image I have (same size of the area), and slightly brightens on mouse over, without altering anything else. I am well aware that this process needs the CSS upgrade, which is excellent, but I simply need to know if it is easy to do and how.
Cheers
-
you can check out this CSS skin, it’s got the brightening thing going on:
http://sunburntkamel.archgfx.net/2007/01/04/bus-full-of-hippies-for-wordpresscom/a more detailed explanation of just the image part is here:
http://sunburntkamel.archgfx.net/2006/08/15/custom-header-in-css/ -
So if I understand correctly, I need to change the h1 a { class my css file to alter the text into an image of the same size as the borders already set.
-
I am using WordPress’s CSS called ‘sleepless’, in it, “h1 a {” isn’t shown. So to change the text of the header into an image I already have of the same width and length of the current box header (where the title is placed), I need to add code to the CSS.
I also understand, that the CSS Stylesheet Editor is where I am to place the code (which over rights the original).
Maybe someone can hint to me the direction in which I’m able to do this.
Thanks, you all
-
unsleepable? ;)
yeah, it doesn’t have an H1 (joops!)
you want to add something like this:#title a { background: #333 url('someimage.png') no-repeat bottom left; } #title a:hover { background: #000 url('someimage.png') no-repeat bottom 250px; } -
Thanks a Million sunburntkamel, somehow when I preview, only the veiwed image shows, the mouse hover image isn’t showing when the mouse is over it.
This one might be a bit stupid, but how to I remove the text title from the back of the header (It shows since my image is png, transparent). Without of course removing it from the options in my Dashboard, which is also used as the title of the RSS.
-
you can use
text-indent: -9000px;
to hide the text, so you only see image.you’ll have to post the image, or the code you’re using for me to figure out why the :hover isn’t working.
-
Oh :)… I forgot that option, well here is the code:
‘
#title a {
background: #333 url(‘http://www.yozef.com/news_images/Logo_over.png’) no-repeat bottom left;
text-indent: -9000px;
}#title a:hover {
background: #fff url(‘http://www.yozef.com/news_images/Logo_viewed.png’) no-repeat bottom 250px;
}’With the added text-indent: -9000px; the image vanished
-
#title a { background: #333 url('http://www.yozef.com/news_images/Logo_over.png') no-repeat bottom left; text-indent: -9000px; } #title a:hover { background: #fff url('http://www.yozef.com/news_images/Logo_viewed.png') no-repeat bottom 250px; }better to read. IS it possible also change the height of the two black boxes on the top to suit the height of the logo and about button?
I’m trying to figure out the CSS method to do it myself, I’m having slight problems. I need to learn so I wouldn’t have to annoy you anymore :-)
-
couple o’ tings.
if you’re using 2 images (which i don’t recommend, the second image doesn’t pre-load, so there’s a bit of a flash of emptiness when a user first hovers on your title), you don’t need to change the position of the image.
#title a { background: #333 url('http://www.yozef.com/news_images/Logo_over.png') no-repeat bottom left; text-indent: -9000px; width: 287px; } #title a:hover { background: #fff url('http://www.yozef.com/news_images/Logo_viewed.png') no-repeat bottom left; }also, notice that i added a width. i forgot that the version of unsleepable we have doesn’t include a width. if there’s no width, the negative indent just pushes the whole thing off the page.
if you put the two images together, then you’ll want a hover state that’s something like this:
#title a:hover { background: #fff url('http://yozef.com/news_images/logo_over.png') no-repeat -287px bottom; }(i sometimes forget which order the x and y coordinates of the background go in, that’s why your image was dissapearing.)
-
Thanks sunburntkamel for your prompt response,
I’m back to this:#title a { background: url('http://www.yozef.com/news_images/Logo_over.png') no-repeat bottom left; text-indent: -9000px; position: right; width: 287px; }If find it the nicest, and I’ll take your advise not changing the image on hover. But when I do hover, it goes Black, darker than the default background, creating a void.
As, well the sides of the Blog header, the two boxes on each side somehow have a smaller height than other height of the header.
Here is how my blog looks like so far:
-
As, well the sides of the Blog header, the two boxes on each side somehow have a smaller height than other height of the header.
that’s a bug with the theme, send that in via feedback. it’s only an issue for other wp.com users, but that’s getting to be a lot of people.
as far as “the void”, you can just do this:
#title a, #title a:hover { background: url('http://www.yozef.com/news_images/Logo_over.png') no-repeat bottom left; text-indent: -9000px; position: right; width: 287px; }that’ll make things stay the same.
if you want the title to go black underneath your image, you can try the theme author’s original tutorial for creating a title graphic:
http://openswitch.org/journal/title-graphic-how-to/ -
Thanks a lot sunburntkamel, I will be giving the feedback to WordPress concerning the Bug for the ‘sleepless’ theme.
Another thing I would like to renovate, I’d hate to be a a pain… but it is the following shown here (I feel its easier to explain by showing)
-
- The topic ‘CSS – Add image with no change’ is closed to new replies.
WordPress.com Forums 