SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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
    Code:
    <script>
    $("button").click(function () {
    $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
    });
    </script>
    was thinking...


    Code:
    <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

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    should this code work?

    Code:
    <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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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:

    Code css:
    .techBody { ... }

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

    Code javascript:
    $('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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    did the jquery site just go down? i get a 502 bad gateway

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 on this site.

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

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Franny_uk I think Pullo just brought that up that option yesterday to me as well.
    Will go try it out.
    D

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •