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

Flipping the hover popup vertically

Discussion in 'Styling and Customization Questions' started by Trover, Feb 15, 2012.

  1. Trover

    Trover Member

    So as you can see in this image, the first post on my site has an issue with the hover popup. So, I am trying to flip only the first post on each page's hover popup vertically. Any suggestions?
  2. erich37

    erich37 Well-Known Member

    sorry, I do not have any answer to your question.

    But I do love your website and the categories at the left. This is great! How to do that?
    Would be cool to have an Add-on for turning the Homepage into "Thread-view" as you have done.....

  3. EQnoble

    EQnoble Well-Known Member

    The only thing I can think of is to write a JS/jQ script add another class name to the thread title in addition to the overlay class or to remove the overlay class and construct your own.

    you would need to put this script right above your </body> tag at the bottom of the PAGE_CONTAINER template, or create an addon out it an place it there utilizing a template hook.

    You would then go about changing up the css that defines the look of the overlay specifically the arrow

    If you want to try it yourself here is the jquery you will need to change the css class if you choose to do it this way..
    $('.discussionListItem:first-child > div > div > h3 > .PreviewTooltip').removeClass('PreviewTooltip').addClass('PreviewTooltipFirst');
    If you would like to just add another class and try doing something from there you can use this
    $('.discussionListItem:first-child > div > div > h3 > .PreviewTooltip').addClass('PreviewTooltipFirst');
    Trover likes this.
  4. Trover

    Trover Member

    So what I did for this was create a custom template for the sidebar and inserted it into another custom template (the thread aggregatior) and the category, or forum, views as well.

    It wouldn't really be practical for me to create an addon for what I have since it is completely customized for what I am trying to do, but if you're curious on how I started or what not here's a little snipit of code that I used to add the nodelist to the sidebar

    <xen:foreach loop="$categories" value="$node">
        {$node.title} loop
    <xen:if hascontent="true">
        <ol class="nodeList sectionMain" id="categories">
            <xen:foreach loop="$renderedNodes" value="$node">{xen:raw $node}</xen:foreach>
        <xen:if is="{$newDiscussionButton}"><div class="nodeListNewDiscussionButton">{xen:raw $newDiscussionButton}</div></xen:if>
    <xen:edithint template="node_category.css" />
    <xen:edithint template="node_category_level_1" />
    <xen:edithint template="node_category_level_2" />
    <xen:edithint template="node_category_level_n" />
    <xen:edithint template="node_forum.css" />
    <xen:edithint template="node_forum_level_1" />
    <xen:edithint template="node_forum_level_2" />
    <xen:edithint template="node_forum_level_n" />
    <xen:edithint template="node_page.css" />
    <xen:edithint template="node_page_level_1" />
    <xen:edithint template="node_page_level_2" />
    <xen:edithint template="node_page_level_n" />
    <xen:edithint template="node_link.css" />
    <xen:edithint template="node_link_level_1" />
    <xen:edithint template="node_link_level_2" />
    <xen:edithint template="node_link_level_n" />
    Thanks EQnobl. That's what I was generally thinking.
    erich37 likes this.
  5. erich37

    erich37 Well-Known Member

    Many thanks Trover for this explanation and help!

    I am actually wondering why nobody else has implemented it like this?
    I think this is a great way to show Threads immediately at the Homepage, especially when you have a long list of Forum-Nodes.
    Also, this makes a website much more interesting than a long list of Nodes which looks rather boring.

    I do hope that some talented coder can come up with an add-on for this.

    Thanks again!

Share This Page