1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Post Public Control Icons with Overlay

Discussion in 'Styling and Customization Questions' started by bogus, Jul 23, 2012.

  1. bogus

    bogus Guest

    I am working on some Post Style changes. After i replaced Text as "Like" "Reply" with Icons i want the "Like" "Reply" Text as an overlay Description to the Icon if you hover over the image(s)

    What i found is the Post Template which should contain all about the "Public Controls", but i dont get it how to change the Code that it works as an overlayer...

    Well, the Code from "post template" should be this Part
    Code:
                    <xen:if is="{$post.canLike}">
                        <a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
                    </xen:if>
    How can i get it working that if i hover over my Like image i do get an overlayer with Like text?
    Example of the Like Icon can be found here. Its the post bottomĀ“s heart
     
  2. Arty

    Arty Well-Known Member

    Add "Tooltip" to list of classes, add title to link:
    Code:
                    <xen:if is="{$post.canLike}">
                        <a href="{xen:link posts/like, $post}" class="LikeLink Tooltip item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}" title="{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
                    </xen:if>
     
  3. bogus

    bogus Guest

    That Easy ;) Thanks a lot

    Well, it just shows the Like Tooltip even with the unlike Icon
    And what i dont get.. Why is the unlike Icon padding to right?
     
  4. Arty

    Arty Well-Known Member

    Strange. It should show correct title based on post status, unless image is being changed in javascript.

    Probably changing title to "Like / Unlike" would be easier:
    Code:
    title="{xen:phrase like} / {xen:phrase unlike}"
     
  5. bogus

    bogus Guest

    Probably easier but sincce my board is multi i need different languages
     
  6. Arty

    Arty Well-Known Member

    It uses phrases, so it will be in different languages.
     
  7. bogus

    bogus Guest

    .....
     

Share This Page