How can I edit CSS from external code?

I’m wrestling with this bit of code that almost works but does not. I’m only guess is that I need to find a way to edit the actual CSS document from the outside… which I’m assuming isn’t possible. Is it?

I’ve got a basic CSS Rollover effect going on. The kind that changes the background-position on hover.

However I’ve defined the actual background image with PHP (a custom field in Wordpress) as a style=“…” in the <a> tag.

When I define the background-image in the CSS it works!

When I define the background-image as a style=“…” it does not work.

Can I use javascript or something to edit the actual CSS document?

There should be no problem changing the background-image in the style attribute. Why don’t you post what you did, then we can see if you made a mistake?

Why can’t you define this in the actual CSS document?

JavaScript can manipulate actual CSS documents, but browser support is varied and frankly, makes it all a bit difficult and messy.

I don’t want to define this in the CSS document only because I want to be able to have it defined when updating a post within Wordpress.

  • When the line in the CSS is un-commented, the rollover works.
  • The hover state does not change the actual position of the background image when it’s defined as a style attribute in the HTML.
  • The style attribute does display though.

The CSS:



a.thumb:hover {
	background-position: 0 -150px;
}

a.thumb {
	display: block;
	width: 314px;
	height: 150px;
	padding: 0px;
	/* background: transparent url(http://estevancarlos.com/wp-content/uploads/2010/01/5cards_thumb.jpg) no-repeat; */
	text-align: center;
	color: #fff;
	text-decoration: none;
}

HTML and PHP

<a class="thumb" style="background:url(<?php $values = get_post_custom_values('thumb'); echo $values[0]; ?>) no-repeat;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">&nbsp;</a>

Thanks for your help.

The only reason I can see for why it isn’t working in the style attribute are that the path is wrong (it’s probably different to the one for CSS). Check the HTML the PHP spits out (or post it here, as PHP is pretty useless - the HTML it produces would have been more useful).

Here’s the CSS.
Lines 44-58 have the a info and hover state

Here’s a page you can view.

If you look at the first thumb, “5 cards” you’ll see that it loads this image.

However no rollover state occurs.

Any suggestions you may have I’m open for. I just want to decide whether or not to keep trying this or give it up.

:confused:

yeah, this sucks.