Multi-coloured Node Li

Multi-coloured Node Li

Shelley

Well-known member
Shelley submitted a new resource:

Multi-coloured Node Li - Use this as a reference guide, this enhancement will allow for multi-coloured node li

3GQlq2z.png


View attachment 44833

Summary: Display multi-coloured (different coloured forum areas). Bare in mind this should be used as reference and your node IDs will most certainly be different as well as your images.

Depending on the size of the images you use in the left hand side of the category (as shown in the screenshot) you will have to adjust the padding-left. Basically, it's a reference guide for you to tinker with and experiment so I...

Read more about this resource...
 
This spices up things quite a lot. Thanks for sharing it Shelley.

Thanks borbole. :)

I'm going to re-visit this, there's a few too many !importants I want to eliminate, and add in additional enhancements I forgot to add in so I'll probably include that in on the next update.
 
Thanks borbole. :)

I'm going to re-visit this, there's a few too many !importants I want to eliminate, and add in additional enhancements I forgot to add in so I'll probably include that in on the next update.
I'm finding real quick as I'm punching down further into certain areas that those !importants are a "Bad Thing" at times. :confused:
 
A smiley expert turned into CSS expert!:D

Far from it. The true css experts are Arty Forsaken cyberAp, Brogan << These are the guys that really know there stuff and it shows in their works. :D I'm still learning but thanks for the compliment Miner. :)
 
I'm finding real quick as I'm punching down further into certain areas that those !importants are a "Bad Thing" at times. :confused:

I'll admit I rushed this release and I'm sure i could have used other selectors and classes to bypass using the important something I'll definitely be looking into later. :) well, after I finished bloating my night-time logo which is becoming very crowded. :laugh:
 
I'll admit I rushed this release and I'm sure i could have used other selectors and classes to bypass using the important something I'll definitely be looking into later. :) well, after I finished bloating my night-time logo which is becoming very crowded. :LOL:
That's the biggest problem I'm having is determining the exact selectors for a specific item. For me right now it's trial and error (more error) and THEN I have to go back and find where I put the !important that is overriding it at times. :eek:
 
Excellent as always Shelley, your CSS edits always add so much to a forum (use your breadcrumb and title enhancement on all my forums)
 
Excellent as always Shelley, your CSS edits always add so much to a forum (use your breadcrumb and title enhancement on all my forums)

That reminds me and thankyou btw. I have some more breadcrumb enhancements tucked away I've been meaning to post. Shall post those when time permits.
 
Shelley submitted a new resource:


ohh, I just recognized that you have put an icon onto the "Forum Category". Cool stuff (y)


Maybe you will like this idea:

I have 2 main Categories at my Forum:
- one "Category" contains Forums which are "Private" and only viewable by logged-in members.
- the other "Category" contains public Forums which are visible to guests.

So it would be cool to have some sort of "lock icon" (Public Forums: open lock / Private Forums: closed lock) as the icon for the 2 "Forum Categories".

Something like this example, but better designed for XF:

thumb_COLOURBOX4136825.jpg
 
ohh, I just recognized that you have put an icon onto the "Forum Category". Cool stuff (y)


Maybe you will like this idea:

I have 2 main Categories at my Forum:
- one "Category" contains Forums which are "Private" and only viewable by logged-in members.
- the other "Category" contains public Forums which are visible to guests.

So it would be cool to have some sort of "lock icon" (Public Forums: open lock / Private Forums: closed lock) as the icon for the 2 "Forum Categories".

Something like this example, but better designed for XF:

608-01781206w.jpg

Yeah, the idea is for users to adjust this resource to their preference so you can prity much adjust it to your needs with your own icon by the categorystrip title. It's really down to the user what images and/or icons they want to use and adjust the css to reflect that and to adjust maybe the padding if the icons differ in size.
 
@Shelley trying to place just an image on the category section.. It chopping my image, how can I fix this? And how can I move the image to the right side?

categorynode2.webp

categorynode.webp
 
@Shelley trying to place just an image on the category section.. It chopping my image, how can I fix this? And how can I move the image to the right side?

View attachment 50208

View attachment 50207


find out the id of your catergorystrips and replace your id and image with the following (this is to be used as an example) as your image and ids will most certainly differ. so in the below example I'm applying it to node id 1

Code:
.nodeList .node_1 .categoryStrip .categoryText {
  background: url("@imagePath/xenforo/icons/yourimage.png") no-repeat scroll right center transparent; }

If you want to add it to other catergorystrips then it would look like the following with the image being applied to node ids 1, 15 and 19.

Code:
.nodeList .node_1 .categoryStrip .categoryText {
  background: url("@imagePath/xenforo/icons/yourimage.png") no-repeat scroll right center transparent; }
.nodeList .node_15 .categoryStrip .categoryText {
  background: url("@imagePath/xenforo/icons/yourimage.png") no-repeat scroll right center transparent; }
.nodeList .node_19 .categoryStrip .categoryText {
  background: url("@imagePath/xenforo/icons/yourimage.png") no-repeat scroll right center transparent; }
 
Top Bottom