ThemeShaper Forums » Thematic

[closed]

Clickable body background via function?

(4 posts)
  • Started 7 years ago by daveread
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. I can set various body background images via css using body classes on my child theme.
    For example:
    body.s-category-twd {
    background:url(images/bg-jt-hsv.jpg) fixed no-repeat top center #ddd;
    }
    body.pageid-781 {
    background:url(images/bg-sponsor-ad2.png) fixed no-repeat top center #85b916;
    }

    Could the same be accomplished via functions.php with the background image being wrapped in a link?

    Posted 7 years ago #
  2. hi dave- thanks for making this a new post. if you want to add a clickable image then you need to add an image to a hook.

    see the "primer" i just addressed to someone else on how to add things

    http://forums.themeshaper.com/topic/need-help-understanding-actions-vs-filters-and-changing-post-meta-and-utility#post-22638

    background images are BACKGROUND though and you can't wrap them w/ a link. you can add an image to the markup and then absolutely position it (or fixed position it) depending on what your goal is. do you have a screenshot of what you'd like to accomplish. a picture is worth 1000 words after all.

    Posted 7 years ago #
  3. Thanks Kathy,

    I have cobbled together a solution that adds a transparent image over a section of my body background image(s) that appears to the left of my 988 px main content; it is wrapped with a link that can be varied via conditionals. Following is the function and then the css for the transparent image:

    // outside content link
    function background_link(){
    if (in_category('news')) {
    echo '<img class="bg-left" src="http://designboth.com/demo/wp-content/themes/BLinks/images/bg-hide2.png" alt="sponsor" />';
    } elseif (in_category('hotels')) {
    echo '<img class="bg-left" src="http://designboth.com/demo/wp-content/themes/BLinks/images/bg-hide2.png" alt="sponsor" />';

    } else {
    return false;
    }
    }
    add_action('thematic_before','background_link', 11);

    And the css:

    img.bg-left
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:100;
    }

    It is working on a test site; if anyone sees where the function can be improved or cleaned up, I'd appreciate the opportunity to learn more.

    Posted 7 years ago #
  4. glad you got it working. just fyi you don't need

    else {
    return false;
    }

    if the IF condition is never satisfied nothing will be added to the hook

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.