Announcement

Collapse
No announcement yet.

Child Channel

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Child Channel

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

    Thanks

  • #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


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

      GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

      Comment


      • #4
        Originally posted by Glenn Vergara View Post
        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


        • #5
          Code:
          .forum-list-container .subforum-list .subforum-item[data-channel-id="xxxxx"] .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[data-channel-id="xxxxx"] .icon.new {
              background: transparent url('path/to/icon.png') no-repeat;
          }

          GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

          Comment


          • #6
            Originally posted by Glenn Vergara View Post
            Code:
            .forum-list-container .subforum-list .subforum-item[data-channel-id="xxxxx"] .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[data-channel-id="xxxxx"] .icon.new {
            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


            • #8
              http://republicamd.com/

              Comment


              • #9
                Ok, do this:

                Code:
                /* Add this to remove grayscale for subforums with new posts. Add this 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) !important;
                    filter: grayscale(0) !important;
                }
                
                /* Do these 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: 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 Glenn Vergara; Fri 29th Jan '16, 12:29pm.

                GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

                Comment


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

                  Code:
                  /* Add this to remove grayscale for subforums with new posts. Add this 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) !important;
                  filter: grayscale(0) !important;
                  }
                  
                  /* Do these 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: 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


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

                    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');
                    }

                    GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

                    Comment


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

                      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');
                      }

                      Doesn'w show icon now ,,,

                      Comment


                      • #13
                        You didn't add this block correctly.

                        Code:
                        /* 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');
                        }
                        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.

                        GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

                        Comment


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

                          Code:
                          /* 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');
                          }
                          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


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

                            GIPHY for vB5 | AutoLinker | User Social Network Icons in Postbit | Audio Attachments Player | Clear System Cache Cron | Drag-n-Drop Upload | Topic AJAX AutoUpdate | Force Read Topic | and a lot more...

                            Comment

                            Related Topics

                            Collapse

                            Working...
                            X