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

Sub Node Styling Help...

V

vVv

Guest
#1
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:



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...
 

Attachments

V

vVv

Guest
#2
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";
    }
 

Arty

Well-known member
#3
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');
    }
 
V

vVv

Guest
#4
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');
    }
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
 
V

vVv

Guest
#11
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. :)
 
V

vVv

Guest
#13
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.