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

Multi-coloured Node Li

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

  1. Shelley

    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

    Read more about this resource...
     
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

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

    Shelley Well-Known Member

    No. Simply adjust to your preference.
     
  4. borbole

    borbole Well-Known Member

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

    Shelley Well-Known Member

    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.
     
    borbole likes this.
  6. Miner

    Miner Well-Known Member

    A smiley expert turned into CSS expert!:D
     
    Bob and Shelley like this.
  7. Tracy Perry

    Tracy Perry Well-Known Member

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

    Shelley Well-Known Member

    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. :)
     
    Miner likes this.
  9. Shelley

    Shelley Well-Known Member

    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:
     
    Tracy Perry likes this.
  10. Tracy Perry

    Tracy Perry Well-Known Member

    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:
     
  11. Shelley

    Shelley Well-Known Member

    Nudaii likes this.
  12. Nudaii

    Nudaii Well-Known Member

    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 likes this.
  13. Shelley

    Shelley Well-Known Member

    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.
     
    Nudaii likes this.
  14. IcEWoLF

    IcEWoLF Well-Known Member

    This is very nice Shelley, thank you for sharing this wonderful resources with us. :)
     
    erich37 likes this.
  15. erich37

    erich37 Well-Known Member


    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:

    [​IMG]
     
  16. Shelley

    Shelley Well-Known Member

    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.
     
    erich37 likes this.
  17. wickedstangs

    wickedstangs Well-Known Member

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

    categorynode.png
     
  18. Matthew Hawley

    Matthew Hawley Well-Known Member

    Try adding this: float: right;
     
  19. Shelley

    Shelley Well-Known Member


    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; }
     
    wickedstangs likes this.
  20. wickedstangs

    wickedstangs Well-Known Member

    Awesome that did it...
     
    Shelley likes this.

Share This Page