Custom CSS for wordpress tech pages

Not sure if this would work, co worker shared this with me:
Basically I have the body of several pages loading w/diff background images.
However it gets tricky in wp as to simplify things I’d like to keep a single header.php. the header contains the main <body id=“relative background image”>.
But when the page changes I want it to load the background image for that page Switch to <body id=“new background image”>… So…

this is the original. Don’t want/need button of course

<script>
$("button").click(function () {
$(this).replaceWith( "<div>" + $(this).text() + "</div>" );
});
</script>

was thinking…


<script>
$("#mainBody").onload(function () {
$(this).replaceWith( "#diffBody" );
});
</script>

and of course the css styling for each is in the main style.css page
Thank you
D

Try using the addClass() and removeClass() functions instead.

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

Or, you can manipulate CSS properties directly: http://api.jquery.com/css/

should this code work?

<script>
$("body").onload(function () {
  $(this).replaceWith( $("techBody") );
});
</script>

guess it would have to be on each page. the default tag should have to be <body>.
but how can I tell it to get the (for example) style for “techBody” that is in the appropriate stylesheet?

Something that works is to have a class called .techBody as your CSS:


.techBody { ... }

and you can then apply that style name to the element on the page:


$('body').addClass('techBody');

But - why not just use another stylesheet with a specific body class to style it as tech stuff? Then you will be free’d from the scripting side of things.

this is what I have in wp:
several pages whose body background is determined by the body tag.
the header.php that is share by all the pages only has one body tag w/the id of “mainBody”

When the user load a new url I want the body tag to switch to the one for that page.

Okay, this may require the assistance of someone familiar with customising Wordpress then. I’ll move this thread over to the CMS & Wordpress forum.

did the jquery site just go down? i get a 502 bad gateway

Yes it is - see for example: https://twitter.com/RedWolves/status/354422449976258561

You could use Wordpress’ Body Class function to add the default WP classes to your post, then, assuming that your posts are categorised you could add a filter to the body class function in your functions.php file as detailed [URL=“http://bavotasan.com/2011/add-a-posts-category-name-to-body-class-in-wordpress/”]on this site.

EDIT: Then it’s just a matter of adding the CSS to our style.css file.

Thank you Franny_uk I think Pullo just brought that up that option yesterday to me as well.
Will go try it out.
D

Good luck. Let us know how you get on.