Child Channel

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Danloona
    Senior Member
    • Mar 2015
    • 543
    • 4.2.5

    Child Channel

    Hi , how can I change icon for some child channels?

    Thanks
  • Danloona
    Senior Member
    • Mar 2015
    • 543
    • 4.2.5

    #2
    I found the code :
    HTML Code:
    /* forum icon for forums with old posts (default) */
    #forum61 .cell-forum .icon {
        background: transparent url("http://republicamd.com/flags/usd.png") no-repeat;
    }
    /* forum icon for forums with new posts */
    #forum61 .cell-forum .icon {
        background: transparent url("flags/usd.png") no-repeat;
    width: 16px; /* icon width */
    height: 11px; /* icon height */
    But on main page it doesn't show , How can I fix ?

    I just want to add for each forum each icon ,,,, how can I do it ?

    Comment

    • glennrocksvb
      Former vBulletin Developer
      • Mar 2011
      • 4011
      • 5.7.X

      #3
      Code:
      .forum-list-container .subforum-list .subforum-item .icon {
           background: transparent url("path/to/icon.png") no-repeat;
           width: 10px;
           height: 11px;
      }

      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

      Comment

      • Danloona
        Senior Member
        • Mar 2015
        • 543
        • 4.2.5

        #4
        Originally posted by Glenn Vergara
        Code:
        .forum-list-container .subforum-list .subforum-item .icon {
             background: transparent url("path/to/icon.png") no-repeat;
             width: 10px;
             height: 11px;
        }
        I need to add by forum id , so I will put for each one different icon

        Comment

        • glennrocksvb
          Former vBulletin Developer
          • Mar 2011
          • 4011
          • 5.7.X

          #5
          Code:
          .forum-list-container .subforum-list .subforum-item[COLOR=#FF0000][data-channel-id="xxxxx"][/COLOR] .icon {
              background: transparent url('path/to/icon.png') no-repeat;
          }
          Replace xxxxx with the nodeid of the subforum

          If subforum has new posts, you can also put a different icon.
          Code:
          .forum-list-container .subforum-list .subforum-item[COLOR=#FF0000][data-channel-id="xxxxx"][/COLOR] .icon[COLOR=#FF0000].new[/COLOR] {
              background: transparent url('path/to/icon.png') no-repeat;
          }

          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

          Comment

          • Danloona
            Senior Member
            • Mar 2015
            • 543
            • 4.2.5

            #6
            Originally posted by Glenn Vergara
            Code:
            .forum-list-container .subforum-list .subforum-item[COLOR=#FF0000][data-channel-id="xxxxx"][/COLOR] .icon {
            background: transparent url('path/to/icon.png') no-repeat;
            }
            Replace xxxxx with the nodeid of the subforum

            If subforum has new posts, you can also put a different icon.
            Code:
            .forum-list-container .subforum-list .subforum-item[COLOR=#FF0000][data-channel-id="xxxxx"][/COLOR] .icon[COLOR=#FF0000].new[/COLOR] {
            background: transparent url('path/to/icon.png') no-repeat;
            }

            It doesn't work properly , Let me explain , I was added some child channels , (Countries) So for each country I want to add them FLAG , do you understand what do I mean?
            I tried to add width and height , and it doesn't work , and the icon is just appear on main forum , but when I press on forum , the icon is standart one,

            Comment

            • glennrocksvb
              Former vBulletin Developer
              • Mar 2011
              • 4011
              • 5.7.X

              #7
              Link?

              Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

              Comment

              • Danloona
                Senior Member
                • Mar 2015
                • 543
                • 4.2.5

                #8

                Comment

                • glennrocksvb
                  Former vBulletin Developer
                  • Mar 2011
                  • 4011
                  • 5.7.X

                  #9
                  Ok, do this:

                  Code:
                  [COLOR=#008000]/* Add this to remove grayscale for subforums with new posts. Add this only once */[/COLOR]
                  .forum-list-container .subforum-list .subforum-item .icon.new,
                  .forum-list-container .forum-item.sub.new .cell-forum .icon {
                      -webkit-filter: grayscale(0) !important;
                      filter: grayscale(0) !important;
                  }
                  
                  /* [COLOR=#008000]Do these for [B][I]every[/I] [/B]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                  .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                  #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                      background: transparent url('/flags/Flag_of_Switzerland.svg.png') no-repeat;
                      width: 16px;
                      height: 11px;
                      -webkit-filter: grayscale(100%);
                      filter: grayscale(100%);
                  }
                  I added grayscale to differentiate icons for subforums with new and old posts. If there is no new post, the icon will be in graycale, otherwise the icon will be in full color. It is still using one image for each subforum. It just turns it into grayscale via CSS.
                  Last edited by glennrocksvb; Fri 29 Jan '16, 11:29am.

                  Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                  Comment

                  • Danloona
                    Senior Member
                    • Mar 2015
                    • 543
                    • 4.2.5

                    #10
                    Originally posted by Glenn Vergara
                    Ok, do this:

                    Code:
                    [COLOR=#008000]/* Add this to remove grayscale for subforums with new posts. Add this only once */[/COLOR]
                    .forum-list-container .subforum-list .subforum-item .icon.new,
                    .forum-list-container .forum-item.sub.new .cell-forum .icon {
                    -webkit-filter: grayscale(0) !important;
                    filter: grayscale(0) !important;
                    }
                    
                    /* [COLOR=#008000]Do these for [B][I]every[/I] [/B]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                    .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                    #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                    background: transparent url('/flags/Flag_of_Switzerland.svg.png') no-repeat;
                    width: 16px;
                    height: 11px;
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                    }
                    I added grayscale to differentiate icons for subforums with new and old posts. If there is no new post, the icon will be in graycale, otherwise the icon will be in full color. It is still using one image for each subforum. It just turns it into grayscale via CSS.


                    Ok so I which ones I need to add?

                    Comment

                    • glennrocksvb
                      Former vBulletin Developer
                      • Mar 2011
                      • 4011
                      • 5.7.X

                      #11
                      I changed something. Here's the updated code. Remove all your old CSS for the subforum icons and then add these:

                      Code:
                      [COLOR=#008000]/* Add this block only once */[/COLOR]
                      .forum-list-container .subforum-list .subforum-item .icon.new,
                      .forum-list-container .forum-item.sub.new .cell-forum .icon {
                          -webkit-filter: grayscale(0);
                          filter: grayscale(0);
                      }
                      .forum-list-container .subforum-list .subforum-item .icon,
                      .forum-list-container .forum-item.sub .cell-forum .icon {
                          width: 16px;
                          height: 11px;
                          -webkit-filter: grayscale(100%);
                          filter: grayscale(100%);
                      }
                      
                      [COLOR=#008000]/* Repeat this block for [I][B]every [/B][/I]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                      .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                      #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                          background-image: url('/flags/[COLOR=#FF0000]Flag_of_Switzerland.svg.png[/COLOR]');
                      }

                      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                      Comment

                      • Danloona
                        Senior Member
                        • Mar 2015
                        • 543
                        • 4.2.5

                        #12
                        Originally posted by Glenn Vergara
                        I changed something. Here's the updated code. Remove all your old CSS for the subforum icons and then add these:

                        Code:
                        [COLOR=#008000]/* Add this block only once */[/COLOR]
                        .forum-list-container .subforum-list .subforum-item .icon.new,
                        .forum-list-container .forum-item.sub.new .cell-forum .icon {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                        }
                        .forum-list-container .subforum-list .subforum-item .icon,
                        .forum-list-container .forum-item.sub .cell-forum .icon {
                        width: 16px;
                        height: 11px;
                        -webkit-filter: grayscale(100%);
                        filter: grayscale(100%);
                        }
                        
                        [COLOR=#008000]/* Repeat this block for [I][B]every [/B][/I]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                        .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                        #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                        background-image: url('/flags/[COLOR=#FF0000]Flag_of_Switzerland.svg.png[/COLOR]');
                        }

                        Doesn'w show icon now ,,,

                        Comment

                        • glennrocksvb
                          Former vBulletin Developer
                          • Mar 2011
                          • 4011
                          • 5.7.X

                          #13
                          You didn't add this block correctly.

                          Code:
                          [COLOR=#008000]/* Repeat this block for [I][B]every [/B][/I]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                          .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                          #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                              background-image: url('/flags/[COLOR=#FF0000]Flag_of_Switzerland.svg.png[/COLOR]');
                          }
                          You have to add that block for each subforum id and specify the appropriate image path for the flag and nodeid. If you have 30 different flags, then you have to add that block 30 times with different image paths and nodeids.

                          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                          Comment

                          • Danloona
                            Senior Member
                            • Mar 2015
                            • 543
                            • 4.2.5

                            #14
                            Originally posted by Glenn Vergara
                            You didn't add this block correctly.

                            Code:
                            [COLOR=#008000]/* Repeat this block for [I][B]every [/B][/I]subforum specifying appropriate image path and nodeid ([/COLOR][COLOR=#FF0000]29[/COLOR][COLOR=#008000] is used in this sample) */[/COLOR]
                            .forum-list-container .subforum-list .subforum-item[data-channel-id="[COLOR=#FF0000]29[/COLOR]"] .icon,
                            #forum[COLOR=#FF0000]29[/COLOR].sub .cell-forum .icon {
                            background-image: url('/flags/[COLOR=#FF0000]Flag_of_Switzerland.svg.png[/COLOR]');
                            }
                            You have to add that block for each subforum id and specify the appropriate image path for the flag and nodeid. If you have 30 different flags, then you have to add that block 30 times with different image paths and nodeids.

                            Same issue :

                            HTML Code:
                            /* Add this block only once */
                            .forum-list-container .subforum-list .subforum-item .icon.new,
                            .forum-list-container .forum-item.sub.new .cell-forum .icon {
                            -webkit-filter: grayscale(0);
                            filter: grayscale(0);
                            }
                            .forum-list-container .subforum-list .subforum-item .icon,
                            .forum-list-container .forum-item.sub .cell-forum .icon {
                            width: 16px;
                            height: 11px;
                            -webkit-filter: grayscale(100%);
                            filter: grayscale(100%);
                            }
                            
                            
                            /* Repeat this block for every subforum specifying appropriate image path and nodeid (29 is used in this sample) */
                            .forum-list-container .subforum-list .subforum-item[data-channel-id="29"] .icon,
                            #forum29.sub .cell-forum .icon {
                                background-image: url('/flags/Flag_of_Switzerland.svg.png');
                                width: 16px; /* icon width */
                            height: 11px; /* icon height */
                            }

                            Comment

                            • glennrocksvb
                              Former vBulletin Developer
                              • Mar 2011
                              • 4011
                              • 5.7.X

                              #15
                              Change

                              Code:
                              background-image: url('/flags/Flag_of_Switzerland.svg.png');
                              to:

                              Code:
                              background: url('/flags/Flag_of_Switzerland.svg.png');
                              Btw, the actual flag size is 16x16 but you are setting it in CSS to 16x11 which cuts off the image. And also you don't have to specify the width and height in the repeating blocks for each flag. The width and height are already set once in the non-repeating block.

                              Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                              Comment

                              Related Topics

                              Collapse

                              Working...