Multi-coloured Node Li

[Shelley]

Shelley submitted a new resource:

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

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

 

[Matthew Hawley]

Could you post css for dark blue, dark green, black, and red?

 

[Shelley]

Could you post css for dark blue, dark green, black, and red?

No. Simply adjust to your preference.

 

[borbole]

This spices up things quite a lot. Thanks for sharing it Shelley.

 

[Shelley]

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.

 

[Miner]

A smiley expert turned into CSS expert!

 

[TPerry]

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.

 

[Shelley]

A smiley expert turned into CSS expert!

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. I'm still learning but thanks for the compliment Miner.

 

[Shelley]

I'm finding real quick as I'm punching down further into certain areas that those !importants are a "Bad Thing" at times.

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.

 

[TPerry]

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.

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.

 

[Shelley]

Shelley updated Multi-coloured Node Li with a new update entry:

Eliminated usage of !important in the css

As the title states I altered the code a little and eliminated the !important which I over-used. Refer to initial release thread since this is a reference resource.

Read the rest of this update entry...

 

[Nudaii]

Excellent as always Shelley, your CSS edits always add so much to a forum (use your breadcrumb and title enhancement on all my forums)

 

[Shelley]

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.

 

[IcEWoLF]

This is very nice Shelley, thank you for sharing this wonderful resources with us.

 

[erich37]

Shelley submitted a new resource:

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


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:

 

[Shelley]

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


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:

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.

 

[wickedstangs]

@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?

 

[Matthew Hawley]

@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

Try adding this: float: right;

 

[Shelley]

@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

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

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

 

[wickedstangs]

Awesome that did it...