Sub Node Styling Help...

vVv · Sep 19, 2012

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

vVv · Sep 19, 2012

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 · Sep 19, 2012

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');
    }

vVv · Sep 19, 2012

Arty said:
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!

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!

vVv · Sep 19, 2012

Thank you! HUGE thank you! It works!

http://footish.xxx/

DRE · Sep 19, 2012

Hey that looks really good!

vVv · Sep 19, 2012

8thos said:
Hey that looks really good!

Thanks...

And yeah, Arty is awesome!

Robyn Unc Privette · Nov 2, 2012

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

Shelley · Nov 2, 2012

Robyn Unc Privette said:
How can I remove the border and shadow boxes that are around the subforums?

View attachment 36427

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.

Robyn Unc Privette · Nov 2, 2012

After working with it after I posted it now looks like it should

Thanks though Shelley

vVv · Nov 2, 2012

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 · Nov 3, 2012

It's no problem! Thanks!

vVv · Jan 5, 2013

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:

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:

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.

CMGDevel · Oct 21, 2014

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

Sub Node Styling Help...

vVv

Guest

Attachments

vVv

Guest

Arty

Well-known member

vVv

Guest

vVv

Guest

DRE

Well-known member

vVv

Guest

Robyn Unc Privette

Active member

Shelley

Well-known member

Robyn Unc Privette

Active member

vVv

Guest

Robyn Unc Privette

Active member

vVv

Guest

CMGDevel

Active member

Similar threads

We value your privacy