Announcement

Collapse
No announcement yet.

Child Channel

Collapse
X
Collapse
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    Child Channel

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

    Thanks
    Tags: None
  • #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

            • #7
              Link?

              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

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

                              Previous 1 2 template Next

                              Related Topics

                              Collapse
                              Working...
                              X

                              We process personal data about users of our site, through the use of cookies and other technologies, to deliver our services, personalize advertising, and to analyze site activity. We may share certain information about our users with our advertising and analytics partners. For additional details, refer to our Privacy Policy.

                              By clicking "I AGREE" below, you agree to our Privacy Policy and our personal data processing and cookie practices as described therein. You also consent to the transfer of your data to our servers in the United States, where data protection laws may be different from those in your country.

                              I Agree