Edit icons

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tomcoleman
    Senior Member
    • Aug 2010
    • 112

    Edit icons

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

  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73976

    #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 demonstration site.
    vBulletin 5 API

    Comment

    • tomcoleman
      Senior Member
      • Aug 2010
      • 112

      #3
      Originally posted by Wayne Luke
      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

      • tomcoleman
        Senior Member
        • Aug 2010
        • 112

        #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

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73976

          #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 demonstration site.
          vBulletin 5 API

          Comment

          • tomcoleman
            Senior Member
            • Aug 2010
            • 112

            #6
            Originally posted by Wayne Luke
            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

            • Wayne Luke
              vBulletin Technical Support Lead
              • Aug 2000
              • 73976

              #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 22 May '15, 8:46am.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment

              • tomcoleman
                Senior Member
                • Aug 2010
                • 112

                #8
                Originally posted by Wayne Luke
                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

                • Wayne Luke
                  vBulletin Technical Support Lead
                  • Aug 2000
                  • 73976

                  #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 demonstration site.
                  vBulletin 5 API

                  Comment

                  • tomcoleman
                    Senior Member
                    • Aug 2010
                    • 112

                    #10
                    Originally posted by Wayne Luke
                    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

                    • tomcoleman
                      Senior Member
                      • Aug 2010
                      • 112

                      #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

                      • tomcoleman
                        Senior Member
                        • Aug 2010
                        • 112

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

                        Comment

                        • Wayne Luke
                          vBulletin Technical Support Lead
                          • Aug 2000
                          • 73976

                          #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 demonstration site.
                          vBulletin 5 API

                          Comment

                          • tomcoleman
                            Senior Member
                            • Aug 2010
                            • 112

                            #14
                            Originally posted by Wayne Luke
                            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

                            • Wayne Luke
                              vBulletin Technical Support Lead
                              • Aug 2000
                              • 73976

                              #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 demonstration site.
                              vBulletin 5 API

                              Comment

                              Related Topics

                              Collapse

                              Working...