Custom Forum Icons code not working as expected.

[Felix2]

glennrocksvb

I have been pulling my hair out in an attempt to update my Custom Forum Icons code.
The issue seems to be that elements are being taken over at points I can't locate.
The source class=forum-item main new forum-item
I tried to key off .new but it is completely ignored. When I save the element rule I get .forum-list-container .forum-item
Note that .main .new do not appear?!?!


What is troubling me is that I can enter the code into the browser manually and it works as expected, however, if placed into css_addition or css_global, it breaks.

On page load, with code in css_additional, the changes don't appear and the default theme icon is present-


If I manually enter the code, it works.


With my old code I had to key off ID and CLASS #forum16 .cell-forum .icon
This works in a limited way, but I want 2 icons for new/no new posts.
When I looked at the original template, .forum-list-container .forum-item.inactive.cell-forum .icon is used along with .forum-list-container .forum-item.new .cell-forum .icon, ergo I know my logic in this was not flawed (having discovered the code long after coming up with mine).
I moved the code around but to no avail.
So why, oh why, master of the vB/CSS can I not get the below code to work as expected?


Works, but icon is always set the same-

#forum16 .cell-forum .icon {
background: transparent url("/images/CustomIcons/BOS32-NEW.png") no-repeat;
}

Does not work at all-

/* Start custom forum icons v2 */
#forum16 .forum-list-container .forum-item.inactive.cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32.png") no-repeat;
}
#forum16 .forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-NEW.png") no-repeat;
}
/* End custom forum icons v2 */

[glennrocksvb]

The CSS for "new" looks good to me but the "old" one does not. Try this:

/* Start custom forum icons v2 */
#forum16 .forum-list-container .forum-item .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32.png") no-repeat;
}
#forum16 .forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-NEW.png") no-repeat;
}
/* End custom forum icons v2 */

By default, all forum icons use the "no new posts" (old) icon. If a forum has a new post, "new" class is added to the forum-item element.

[Felix2]

If it were only that simple.
Yes, tried that before posting.
Again, for reasons unknown, it will not key off of .new
.new does not even show as a rule even though it is listed in the code.
And with or without .inactive, no change either.
I have tried to use just a single element and still no affect with either.
So long as .forum-list-container or .forum-item remain the code breaks I can not figure it out.
And without .forum-item.new I can not perform the 2 icon change.
It works as default in the theme, but not as additional code. I have searched all theme elements and find only 2 entries using .forum-item.new
css_additional as part of the theme and css_global. In each instance, they only set the location of the icon.
I went so far as to delete the code. Aside from looking out of place, there was no affect. Code returned.

The 2 questions seem to be,
1. Why does .new in the code no longer appear in the Rules once the page has loaded?
2. How is it that the default theme code works, manual code injection works, yet code within the css_additional it fails? (no .new to key into, but why)

[Felix2]

By default, all forum icons use the "no new posts" (old) icon. If a forum has a new post, "new" class is added to the forum-item element.

Right. This is why I did the inactive element first and then the active/new. That logic seems fine.

[glennrocksvb]

It's hard to investigate without looking into the actual page but I know your site is private.

[Felix2]

Sorry about that. Usually I can hammer these things out on my own, at least well enough for my use.
In theory, as I don't think I've altered any code which would affect this process, the issue should be global to any site.
Might you test this out yourself and see if it works or breaks?
If it works, then at least I will know the code is sound and the issue is site specific.
If it breaks, then we have a mystery

[Felix2]

I have had some progress, and more setbacks.
I now have the code taking over the default functions and read/unread icons working site wide.
It seems the .new function was working but getting burried. Applying !important brought the icons front and center

However, now I can no longer seem to get the ID function to work to specify the forum.

.forum-list-container .forum-item .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32.png") no-repeat !important;
}
.forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-new.png") no-repeat !important;
}

Ideas?

[glennrocksvb]

Using ID with !important doesn't work?

/* Start custom forum icons v2 */
#forum16 .forum-list-container .forum-item .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32.png") no-repeat !important;
}
#forum16 .forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-NEW.png") no-repeat !important;
}
/* End custom forum icons v2 */

Although !important seems unnecessary as using ID already has more specificity and should override all the other rules. But as before, I can't really provide further ideas without seeing and inspecting the actual page.

[Felix2]

Using ID with !important doesn't work?

Correct.
I can use the class ID and target the forum, but then the icons are buried;
or
I can use !important to bring the icons to the top, but then no longer target the class ID.
Frustrating, and now I see why so many others before me gave up.

AHHH! Just read,

The !important rule overrides the class ID property.

So it really is one or the other in this case. May have to do a template edit and add a new class.
Will see.

[glennrocksvb]

You don't have to edit templates to add a new class. You can use existing class in the DOM to add more specificity to the CSS rule.

[Felix2]

You don't have to edit templates to add a new class. You can use existing class in the DOM to add more specificity to the CSS rule.

Use a CSS to add a new CLASS? Oh, do tell, or provide a small sample. I've not come across this in my reading thus far.
It could resolve this if I can use the standard ID+Class to target the forum and then add a new class to add the !important replacement icons.

[glennrocksvb]

If you could take a screenshot of the page showing debugging tool and showing applied and overriden css rules, then that would be helpful for me

[Felix2]

Okay, this is the PHP generated block of code for forum 16.
Forum 16 is the target forum to change the default icon (that is, without affecting all other forums).

<tr [B]class="forum-item main new forum-item"[/B] [B]id="forum16"[/B] data-channel-id="16" data-lastcontent="1475010537" data-readtime="1474920356">
        
            <td class="cell-forum">
                <div class="forum-wrapper">
                    <span [B]class="icon"[/B]></span>
                    <div class="forum-info">
                        <a href="/forum/boards/book-of-shadows" class="forum-title">Book of Shadows</a>
                    </div>
                    </div>

This is the original CSS generated-

element {
}
.forum-list-container .forum-item.new .cell-forum .icon {
    background-position: 0px -199px;
}

Along with the css_additional.css code (This includes both read/unread icons and icons for subforums).
Ideally I would have the #forum16 ID proceeding the .forum-list-container to target the specific forum, but with the !important use, the ID can not be used.

/* Start custom forum icons v2 */
.forum-list-container .forum-item .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32.png") no-repeat !important;
}

.forum-list-container .forum-item[B].new[/B] .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-new.png") no-repeat !important;
}

.forum-list-container .forum-item.sub .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS16.png") no-repeat !important;
width:16px;
height:16px;
}

.forum-list-container .forum-item[B].sub.new[/B] .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS16-new.png") no-repeat !important;
width:16px;
height:16px;
}
/* Start custom forum icons v2 */

Which produces (thus far)-

element {
}
.forum-list-container .forum-item.new .cell-forum .icon {
    background-position: 0px -199px;
}
[B].forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-new.png") no-repeat !important;
}[/B]

Using

#forum16 .forum-list-container .forum-item.new .cell-forum .icon {
    background: transparent url("/images/CustomIcons/BOS32-new.png") no-repeat;
}

I am able to target the forum, but the icon is buried under the default one.

And according to what I read, by adding !important to bring this code to the front, disables the use of ID.
Target forum, or, show icon, but thus far not both.

[Felix2]

FYI, looking at your own forum, the same code and processes apply.

[glennrocksvb]

The forum-list-container is the parent of forum-item's which contain the forum ID. So you cannot use this:

#forum16 .forum-list-container .forum-item.new .cell-forum .icon { }

What you should use instead is

#forum16.forum-item.new .cell-forum .icon { }

Or you can remove .forum-item as using ID already overrides the other rules:

#forum16.new .cell-forum .icon { }

And you don't need !important at all. It's not important