Announcement

Collapse
No announcement yet.

Edit icons

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

  • Edit icons

    how do I edit these icons they don't seem to be normal picture files....


  • #2
    They are from the default sprite images. You would have to use CSS to overwrite them easily.

    Code:
     
    /* start custom forum icons */ 
    /* forum icon for forums with old posts */ 
    .forum-list-container .forum-item .cell-forum .icon { 
    background: transparent url("http://mywebsite/images/old.gif") no-repeat;  
    width: 16px; /* icon width */ 
    height: 15px; /* icon height */ 
    } 
     
    /* forum icon for forums with new posts */ 
    .forum-list-container .forum-item.new .cell-forum .icon { 
    background: transparent url("http://mywebsite/images/new.gif") no-repeat;  
    width: 16px; /* icon width */ 
    height: 15px; /* icon height */ 
    } 
    /* end custom forum icons */
    You would put this in your css_additional.css template and update the URLs to point to the images that you want to use.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      They are from the default sprite images. You would have to use CSS to overwrite them easily.

      Code:
      /* start custom forum icons */
      /* forum icon for forums with old posts */
      .forum-list-container .forum-item .cell-forum .icon {
      background: transparent url("http://mywebsite/images/old.gif") no-repeat;
      width: 16px; /* icon width */
      height: 15px; /* icon height */
      }
      
      /* forum icon for forums with new posts */
      .forum-list-container .forum-item.new .cell-forum .icon {
      background: transparent url("http://mywebsite/images/new.gif") no-repeat;
      width: 16px; /* icon width */
      height: 15px; /* icon height */
      }
      /* end custom forum icons */
      You would put this in your css_additional.css template and update the URLs to point to the images that you want to use.
      wayne - thanks for this can you point me on how to edit the css or which file I need to edit, v5 is new to me so working my way around the file and structure.

      Comment


      • #4
        wayne found the area I need to put this

        admincp>Style templates>style manager > select template used and then additional_css

        as per the attached but it doesn't work or change anything!?

        Comment


        • #5
          If that the style that you're using?

          Did you update the paths to the images so they are valid?
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          I am not currently available for vB Messenger Chats.

          Comment


          • #6
            Originally posted by Wayne Luke View Post
            If that the style that you're using?

            Did you update the paths to the images so they are valid?
            im using light blue as my theme , so that's the one I edited.

            I didn't put real links in as it should display an X if it worked...but it still displays the sprites.

            Comment


            • #7
              When I visit your site, I don't see anything in the contents of the css_additional.css template.

              http://www.thesaltybox.com/core/clie...additional.css

              It appears you're using the Blue Green theme. Make sure that is the one your editing. If you're using the CSS Editor in Site Builder, make sure your theme is selected from the dropdown.
              Last edited by Wayne Luke; Fri 22nd May '15, 8:46am.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud customization and demonstration site.
              vBulletin 5 Documentation - Updated every Friday. Report issues here.
              vBulletin 5 API - Full / Mobile
              I am not currently available for vB Messenger Chats.

              Comment


              • #8
                Originally posted by Wayne Luke View Post
                When I visit your site, I don't see anything in the contents of the css_additional.css template.

                http://www.thesaltybox.com/core/clie...additional.css

                It appears you're using the Blue Green theme. Make sure that is the one your editing. If you're using the CSS Editor in Site Builder, make sure your theme is selected from the dropdown.
                that's because I changed it back because it wasn't working

                I have just rechanged it again, as you can see its still not working...............!!!

                Comment


                • #9
                  Change:
                  url(http://www.thesaltybox.com/"http://www.thesaltybox.com/old.png")

                  To:
                  url("http://www.thesaltybox.com/old.png")

                  Change:
                  url(http://www.thesaltybox.com/"http://www.thesaltybox.com/new.png")

                  To:
                  url("http://www.thesaltybox.com/old.png")
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                  vBulletin 5 Documentation - Updated every Friday. Report issues here.
                  vBulletin 5 API - Full / Mobile
                  I am not currently available for vB Messenger Chats.

                  Comment


                  • #10
                    Originally posted by Wayne Luke View Post
                    Change:
                    url(http://www.thesaltybox.com/"http://www.thesaltybox.com/old.png")

                    To:
                    url("http://www.thesaltybox.com/old.png")

                    Change:
                    url(http://www.thesaltybox.com/"http://www.thesaltybox.com/new.png")

                    To:
                    url("http://www.thesaltybox.com/old.png")

                    not sure what you mean

                    the code doesnt have that its like this

                    Code:
                    /* start custom forum icons */
                    /* forum icon for forums with old posts */
                    .forum-list-container .forum-item .cell-forum .icon {
                    background: transparent url("http://www.thesaltybox.com/old.png") no-repeat;
                    width: 16px; /* icon width */
                    height: 15px; /* icon height */
                    }
                    
                    /* forum icon for forums with new posts */
                    .forum-list-container .forum-item.new .cell-forum .icon {
                    background: transparent url("http://www.thesaltybox.com/new.png") no-repeat;
                    width: 16px; /* icon width */
                    height: 15px; /* icon height */
                    }
                    /* end custom forum icons */

                    Comment


                    • #11
                      Fixed it

                      with

                      Code:
                      /* start custom forum icons */
                      /* forum icon for forums with old posts */
                      .forum-list-container .forum-item .cell-forum .icon {
                      background: transparent url("/old.png") no-repeat;
                      width: 16px; /* icon width */
                      height: 15px; /* icon height */
                      }
                      
                      /* forum icon for forums with new posts */
                      .forum-list-container .forum-item.new .cell-forum .icon {
                      background: transparent url("./new.png") no-repeat;
                      width: 16px; /* icon width */
                      height: 15px; /* icon height */
                      }
                      /* end custom forum icons */

                      Comment


                      • #12
                        how do i make it fit propely so the text is not over the image?

                        Comment


                        • #13
                          You would need something like this in the same template:
                          .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info { padding-left: 40px; }

                          Adjust the 40px value to fit your needs.
                          Translations provided by Google.

                          Wayne Luke
                          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                          vBulletin 5 Documentation - Updated every Friday. Report issues here.
                          vBulletin 5 API - Full / Mobile
                          I am not currently available for vB Messenger Chats.

                          Comment


                          • #14
                            Originally posted by Wayne Luke View Post
                            You would need something like this in the same template:
                            .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info { padding-left: 40px; }

                            Adjust the 40px value to fit your needs.


                            just created this and it turned the icon back to the default one!

                            Code:
                            /* start custom forum icons */
                            /* forum icon for forums with old posts */
                            .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info { padding-left: 40px; }
                            background: transparent url("/old.png") no-repeat;
                            width: 22px; /* icon width */
                            height: 22px; /* icon height */
                            }
                            
                            /* forum icon for forums with new posts */
                            .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info { padding-left: 40px; }
                            background: transparent url("./new.png") no-repeat;
                            width: 22px; /* icon width */
                            height: 22px; /* icon height */
                            }
                            /* end custom forum icons */

                            Comment


                            • #15
                              The line above is an additional CSS rule..

                              Code:
                               
                              /* start custom forum icons */
                              /* forum icon for forums with old posts */
                              .forum-list-container .forum-item .cell-forum .icon {
                              background: transparent url("/old.png") no-repeat;
                              width: 16px; /* icon width */
                              height: 15px; /* icon height */
                              }
                              
                              /* forum icon for forums with new posts */
                              .forum-list-container .forum-item.new .cell-forum .icon {
                              background: transparent url("./new.png") no-repeat;
                              width: 16px; /* icon width */
                              height: 15px; /* icon height */
                              }
                              /* end custom forum icons */
                              
                              .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info { padding-left: 40px; }
                              Translations provided by Google.

                              Wayne Luke
                              The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                              vBulletin 5 Documentation - Updated every Friday. Report issues here.
                              vBulletin 5 API - Full / Mobile
                              I am not currently available for vB Messenger Chats.

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X