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

Sub Node Styling Help...

Discussion in 'Styling and Customization Questions' started by vVv, Sep 19, 2012.

  1. vVv

    vVv Guest

    As I replied over here, apparently no one sees new posts there? lol.. But anyway, I basically did that modification so far... However, adding that "replacement code" wasn't showing the Discussion / Message counts right so I basically used default code for that part... But I'd like to have it showing mini quote bubble icons for "new" and "old" status for the subs, inline.

    http://footish.xxx/ - site with imported vB4 stuff

    Like example below here:

    [​IMG]

    I have the sub forums like that so far, however the inline "old" image is hard-coded into the template file right now...

    Code:
    <div class="nodeStats pairsInline">
    <xen:if is="{$renderedChildren} AND {$level} == 2">
            <div class="subForumsPopup">
                    <div class="subForumsMenu">
                            <ol class="blockLinksList2">
                            <xen:foreach loop="$renderedChildren" value="$child">
                                  <img class="inlineimg" src="/xf-footish/styles/default/xenforo/icons/subforum_old-48.png" alt="" border="0"> {xen:raw $child}
                            </xen:foreach>
                            </ol>
                    </div>
            </div>
    </xen:if>
                    <dl>
    <dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd>
                        <dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd>
                    </dl>
                </div>
            </div>
    I'd like to be able it working like the normal forum/category ones..Jake pointed out about the node_list.css file having some css code ideas but I'm not even sure where to begin...sigh. I haven't coded anything in years...
    Code:
    .node .forumNodeInfo .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            @property "nodeIconForum";
            background-image: url('@imagePath/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/nodeIconForum";
        }
     
        .node .forumNodeInfo.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            @property "nodeIconForumUnread";
            background-image: url('@imagePath/xenforo/node-sprite.png');
            background-repeat: no-repeat;
            background-position: -36px 0;
            @property "/nodeIconForumUnread";
        }
    How would I go about making similar css coding for sub forum "old" and "new" icons...via CSS for sub nodes / children nodes... Like.. .?


    Code:
    <xen:foreach loop="$renderedChildren" value="$child">
     
                                  <span style="display:inline" class="subForumsMenu"> {xen:raw $child}</span>
     
                            </xen:foreach>
    Code:
    .node .subForumsMenu .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            @property "subForumsMenu";
            background-image: url('@imagePath/mypath/my-new-posts.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/nodeIconForum";
        }
     
        .node .subForumsMenu.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            @property "subForumsMenuUnread";
            background-image: url('@imagePath/xenforo/my-old-posts.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/subForumsMenuUnread";
        }
    Since the images I'll be using aren't in "sprite" form lol. They're individual little images like 12px wide.. 12px high.. I just don't know, never coded with XF before and haven't coded in general in years lmao... Any help is appreciated...
     

    Attached Files:

  2. vVv

    vVv Guest

    Doesn't anyone know how to do this? :( I can't make site live with XF if it's not completed/customized right... sigh. I basically need the sub-forums working like vBulletin sub forums with the mini icons saying.. there's new threads posted in specific sub forums or it don't have new threads posted in it. Like I have here: http://footish.xxx/xf-footish/ but the mini icons on there now, were hard coded before the sub forums, making it not functioning like it's main parent forum icons for "new" and "old" are...

    I already have the mini icons made as well..
    http://footish.xxx/xf-footish/styles/default/xenforo/icons/subforum_old-48.png
    http://footish.xxx/xf-footish/styles/default/xenforo/icons/subforum_new-48.png

    EXTRA.css file currently is, (last two block of css code there is sample/junk for now..) But there HAS TO BE a way to get it functioning properly, like the normal main forum "new" and "old" icons do.. But for the sub nodes...

    Code:
    body .subForumsPopup
    {
    margin: 0;
    float: none;
    }
     
    body .subForumsPopup .blockLinksList2
    {
    display: inline-table;
    width: 100%;
    box-sizing: border-box;
    word-spacing: -10px;
    }
     
    body .subForumsPopup .blockLinksList2 > li
    {
    display: inline-block;
    word-spacing: 0;
    vertical-align: top;
    }
     
    body .subForumsPopup .blockLinksList2 .nodeTitle
    {
    font-weight: normal;
    }
     
    body .subForumsPopup .blockLinksList2 .unread .nodeTitle
    {
    font-weight: bold;
    }
     
    body .subForumsPopup .blockLinksList2 .nodeTitle a:before
    {
    content: "";
    }
     
    body .subForumsPopup .blockLinksList2 li.node > .unread .nodeTitle a:before
    {
    background: @primaryMedium;
    }
     
    .subForumsMenu .node .node
    {
    display: none;
    }
     
    .inlineimg
    {
    margin-left: 10px;
    }
     
    .blockLinksList2 a, .blockLinksList2 label {
    padding: 5px 5px !important;
    border-radius: 0px !important;
    display: inline !important;
    }
     
    .blockLinksList2 a:hover, .blockLinksList2 a:focus, .blockLinksList2 li.kbSelect a, .blockLinksList2 label:hover, .blockLinksList2 label:focus, .blockLinksList2 li.kbSelect label
    {
    text-decoration: underline !important;
    background: none !important;
    }
     
    .node .subForumsMenu .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            @property "subForumsMenu";
            background-image: url('@imagePath/icons/subforum_new-48.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/nodeIconForum";
        }
     
        .node .subForumsMenu.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            @property "subForumsMenuUnread";
            background-image: url('@imagePath/xenforo/icons/subforum_old-48.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            @property "/subForumsMenuUnread";
        }
     
  3. Arty

    Arty Well-Known Member

    You can't do it by adding image tag. Child node is already rendered, there is no variable to check if it has new posts. Remove that <img> tag, its useless.

    What you can do is put background image left of node text:
    Code:
    body .subForumsPopup .blockLinksList2 .nodeTitle
    {
        display: inline-block;
        padding-left: 12px;
        background: transparent url('@imagePath/xenforo/icons/subforum_old-48.png') no-repeat 0 50%;
    }
     
        body .subForumsPopup .blockLinksList2 .unread .nodeTitle
        {
            background-image: url('@imagePath/xenforo/icons/subforum_new-48.png');
        }
     
    Jake Bunce and vVv like this.
  4. vVv

    vVv Guest

    Thank you! :D Yay, now I know at least ONE guy on here knows how to code! YAY! lmao.. xD .. Yeah, I was going by what this guy was doing over here: http://xenforo.com/community/threads/sub-nodes-in-columns.30058/#post-349233

    I'll give what you suggested a try once! Thank you! :) :D
     
  5. vVv

    vVv Guest

    Jake Bunce and 8thos like this.
  6. DRE

    DRE Well-Known Member

    Hey that looks really good!
     
    vVv likes this.
  7. vVv

    vVv Guest

    Thanks... :) And yeah, Arty is awesome! :D
     
  8. Robyn Unc Privette

    Robyn Unc Privette Active Member

    How can I remove the border and shadow boxes that are around the subforums?

    Image1.png
     
  9. Shelley

    Shelley Well-Known Member

    Could you possibly link to your forums. The code you probably want to remove will reside in your extra.css template that your wanting to remove.
     
    Jake Bunce and vVv like this.
  10. Robyn Unc Privette

    Robyn Unc Privette Active Member

    After working with it after I posted it now looks like it should :) Thanks though Shelley :)
     
    vVv likes this.
  11. vVv

    vVv Guest

    Didn't know anyone replied to this, I unwatched it back in Sept. Sorry about that. :( But glad Shelley was here to offer some help and glad you got it figured out. :)
     
    Robyn Unc Privette likes this.
  12. Robyn Unc Privette

    Robyn Unc Privette Active Member

    It's no problem! Thanks!
     
    vVv likes this.
  13. vVv

    vVv Guest

    After trying to figure this out with a few folks in PC, finally figured it out. Posting this for reference purposes (if I need it again in future) and perhaps helpful to others as well. I have Celeb Feet Pics and Celeb Feet Videos (top level nodes/forums)... then Child/Sub Nodes "A, B, C, D, etc to Z" for both, which makes it look messy on forum home page.

    To keep all other forum sections the same, allowing their child/sub nodes to be shown.. but just hiding the sub nodes of Celeb Feet Pics and Celeb Feet Videos...I changed the following in template (name): node_forum_level_2

    From:
    Code:
    <xen:if is="{$renderedChildren} AND {$level} == 2">
            <div class="subForumsPopup">
                    <div class="subForumsMenu">
                            <ol class="blockLinksList2">
                            <xen:foreach loop="$renderedChildren" value="$child">
                                  {xen:raw $child}
                            </xen:foreach>
                            </ol>
                    </div>
            </div>
    </xen:if>
    Which originally displayed like:
    subnodes-shown1.jpg


    To:
    Code:
    <xen:if is="in_array({$forum.node_id}, array(295,322))">
    <xen:else />
    <xen:if is="{$renderedChildren} AND {$level} == 2">
    <div class="subForumsPopup">
    <div class="subForumsMenu">
    <ol class="blockLinksList2">
    <xen:foreach loop="$renderedChildren" value="$child">
    {xen:raw $child}
    </xen:foreach>
    </ol>
    </div>
    </div>
    </xen:if>
    </xen:if> 
    Which now displays like:
    subnodes-not-shown2.jpg


    Which hides the sub nodes for only those two forum sections, but keeping all other forum section sub nodes showing. Just change the: 295,322 Ids to whatever your forum Id's are, for where you want hide the sub nodes from home page. Have however many you need in there. <xen:if is="in_array({$forum.node_id}, array(X,X,XX,XXX))">

    Code:
    <xen:if is="in_array({$forum.node_id}, array(295,322))">
    <xen:else />
    <xen:if is="{$renderedChildren} AND {$level} == 2">
    blah blah
    </xen:if>
    </xen:if> 
    Of course, I done this with the Sub Node Styling from above there first, and this was done with Novus skin.
     
  14. CMGDevel

    CMGDevel Active Member

    What would the css modification be if one is not using the sub-forum popups, but rather had them displayed all the time?
     

Share This Page