Post "Icon"

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Mrs blueskyracer
    Senior Member
    • Jul 2009
    • 100
    • 3.8.x

    Post "Icon"

    To the left of every post there is a little icon, in the demo site it is a "text cloud" On this site it appears to be a "scratch pad note". is there anyway to customize that icon (to something like a small hydroplane image) or at a minimum change its color?
  • Lynne
    Former vBulletin Support
    • Oct 2004
    • 26255

    #2
    To the left of every post? I am looking at your post and not seeing what you are talking about. Can you provide an image of what it is?

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools <- awesome site for html/css help

    Comment

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

      #3
      I think she is referring to the posts in the forum page. There is a notepad icon in each of the post.

      All icons in the site use a sprite image.



      If you want to use your own custom icons, you need to modify the sprite image file.

      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

      • Mrs blueskyracer
        Senior Member
        • Jul 2009
        • 100
        • 3.8.x

        #4
        Yes Glen you are correct the second row from bottom first icon. So I need to find or create a sprite image to replace it.

        Comment

        • Lynne
          Former vBulletin Support
          • Oct 2004
          • 26255

          #5
          Originally posted by Mrs blueskyracer
          Yes Glen you are correct the second row from bottom first icon. So I need to find or create a sprite image to replace it.
          Or create a totally separate image (rather than modifying the sprite image) and rewrite the CSS that points to the image.

          Please don't PM or VM me for support - I only help out in the threads.
          vBulletin Manual & vBulletin 4.0 Code Documentation (API)
          Want help modifying your vbulletin forum? Head on over to vbulletin.org
          If I post CSS and you don't know where it goes, throw it into the additional.css template.

          W3Schools <- awesome site for html/css help

          Comment

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

            #6
            Lynn is right, that's the quicker and easier solution if that's the only icon you want to change.

            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

            • Mrs blueskyracer
              Senior Member
              • Jul 2009
              • 100
              • 3.8.x

              #7
              What size should this image be? I am assuming I can shrink one in photoshop and then upload the image. What file has to be changed? (realizing I am new to all this) What does C S S stand for? I am assuming that I can just plunk the image url into the code somewhere just like I did the background on the pages.

              Comment

              • Lynne
                Former vBulletin Support
                • Oct 2004
                • 26255

                #8
                I would keep the image the same size.

                CSS - Cascading Style Sheets. http://www.w3schools.com/

                I am still unclear on which icon. The "the second row from bottom first icon" doesn't look like a "scratch pad note" to me. The scratch pad note looks like the fourth one on the bottom to me. If you can clarify which icon, or better yet, link me to a page with it, then I can possible help with the CSS.


                Please don't PM or VM me for support - I only help out in the threads.
                vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                Want help modifying your vbulletin forum? Head on over to vbulletin.org
                If I post CSS and you don't know where it goes, throw it into the additional.css template.

                W3Schools <- awesome site for html/css help

                Comment

                • Mrs blueskyracer
                  Senior Member
                  • Jul 2009
                  • 100
                  • 3.8.x

                  #9
                  Lynne it is like a little cartoon caption box, where if you were an newspaper cartoon you would see what you had to say. I am thinking I will table this for now given the other issues. Maybe another weekend. I thought it would be fun to make it a little hydroplane since that is what our site is about!

                  Comment

                  • Lynne
                    Former vBulletin Support
                    • Oct 2004
                    • 26255

                    #10
                    So it isn't actually in front of the posts, it is the little thing on the main forum page that is in front of the forum names? And it is blue if there are new posts?

                    Please don't PM or VM me for support - I only help out in the threads.
                    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                    Want help modifying your vbulletin forum? Head on over to vbulletin.org
                    If I post CSS and you don't know where it goes, throw it into the additional.css template.

                    W3Schools <- awesome site for html/css help

                    Comment

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

                      #11
                      Yeah, it looks like the forum icons not the post icons.

                      Add this in css_additional.css template:

                      Code:
                      /* forum icon for forums with no new posts */
                      .forum-list-container .forum-item .cell-forum .icon {
                          background: transparent url("images/plane.png") no-repeat;
                      }
                      
                      /* forum icon for forums with new posts */
                      .forum-list-container .forum-item.new .cell-forum .icon {
                          background: transparent url("images/plane_new.png") no-repeat;
                      }
                      Change the image paths accordingly. The image size should be 16px (width) by 15px (height).

                      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


                      • IggyP
                        IggyP commented
                        Editing a comment
                        good tip, thanks for posting

                        i have some larger ones im hoping to use tho, is that just not happening in vb5 atm? 15px is pretty small, cant even resize em without ruining em

                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        You can actually use a bigger icon but you have to adjust some margins to fix the alignment. If you let me know the image size you want, I can figure out what margins need to be adjusted for you.

                      • IggyP
                        IggyP commented
                        Editing a comment
                        wow thats very cool of you glenn...tbh it is something thats been bugging me a bit....a have some on my vb4 i really like and would be great with my vb5 style but wasnt sure how long id have to wait.........

                        i will get back to you tho, im extra insane busy right now, which is why i never replied about the floating bar topic, but will get back to you on both issues incase you want a place to test that over https or anything..

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

                      #12
                      Originally posted by IggyP
                      hello,
                      i did a quick check for icon size and they are 40 x 42
                      im not sure if i will have much time to test this for a couple days but that much was easy enough, lol...

                      really appreciate this..i think it will be good to post too, i bet alot of people would want to do this if it was demystified a bit more

                      respect
                      Try this:
                      Code:
                      .forum-list-container .forum-item .cell-forum .icon {
                          transparent url("path to image here") no-repeat; /* forum icon for forums with old posts */
                          width: 40px;
                          height: 42px;
                      }
                      .forum-list-container .forum-item.new .cell-forum .icon {
                          background: transparent url("path to image here") no-repeat; /* forum icon for forums with new posts */
                      }
                      .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
                          padding-{vb:stylevar left}: 48px; /* icon width + 8 */
                      }
                      .forum-list-container .forum-item .cell-forum .forum-desc {
                          margin-{vb:stylevar left}: 48px; /* icon width + 8 */
                      }
                      If {vb:stylevar left} doesn't work, then just hardcode it to left (or right if you are using RTL).

                      Note that since the icon height is too high, there is a big gap between forum name and description.
                      Last edited by glennrocksvb; Wed 9 Apr '14, 10:27am. Reason: Fixed typo

                      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

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

                        #13
                        I was able to figure out how to fix the big gap between forum name and description. I also fixed left padding of subforums as well as responsive.

                        Code:
                        /* Forums */
                        .forum-list-container .forum-item .cell-forum .icon {
                            background: transparent url("path to image here") no-repeat; /* forum icon for forums with old posts */
                            width: 40px; /* icon width */
                            height: 42px; /* icon height */
                        }
                        .forum-list-container .forum-item.new .cell-forum .icon {
                            background: transparent url("path to image here") no-repeat; /* forum icon for forums with new posts */
                        }
                        .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
                            padding-{vb:stylevar left}: 48px; /* icon width + 8 */
                        }
                        .forum-list-container .forum-item .cell-forum .forum-desc {
                            margin-{vb:stylevar left}: 48px; /* icon width + 8 */
                            margin-top: -25px; /* 17 - icon height */
                        }
                        /* Sub Forums */
                        .forum-list-container .subforum-list > td {
                            padding-{vb:stylevar left}: 53px; /* icon width + 13 */
                        }
                        /* Responsive */
                        @media only screen and (max-width: 768px) {
                            .forum-list-container .forum-item .cell-forum .forum-desc {
                                margin-{vb:stylevar left}: 48px; /* icon width + 8 */
                            }
                            .forum-list-container .subforum-list > td {
                                padding-{vb:stylevar left}: 73px; /* icon width + 33 */
                            }
                        }
                        Last edited by glennrocksvb; Wed 9 Apr '14, 11:25am.

                        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

                        • alexxxmk
                          New Member
                          • Apr 2014
                          • 3
                          • 5.0.X

                          #14
                          Hi Glenn theres any possibility to assign images to specific forums? Like for forum ids (or channels id)? Because right now the code will let you change the status icons but for all forums but I would like to have a different image for each or several the same.

                          how can I add the data-widget-id information on the code?

                          Comment

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

                            #15
                            Prepend the above CSS rules above with: .canvas-widget[data-widget-id="xxxx"]

                            For example, in the vB5 Connect forums at http://www.vbulletin.com/forum/forum...etin-5-connect, you can see the widget id in the widget markup as 1771

                            Code:
                            <div class="canvas-widget subchannel-widget widget-no-border widget-no-header" [COLOR=#FF0000]data-widget-id="1771"[/COLOR] data-widget-instance-id="12">
                            The CSS rule would be:

                            Code:
                            [COLOR=#FF0000].canvas-widget[data-widget-id="1771"][/COLOR] .forum-list-container .forum-item .cell-forum .icon {
                                background: transparent url("path to image here") no-repeat; /* forum icon for forums with old posts */
                                width: 40px; /* icon width */
                                height: 42px; /* icon height */
                            }
                            But as I told you in the PM that AFAIK the widget ids change when you upgrade or re-install so using it to distinguish forum widgets is not reliable.
                            Last edited by glennrocksvb; Wed 9 Apr '14, 10:20am. Reason: Fixed typo again

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