Announcement

Collapse
No announcement yet.

Post "Icon"

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

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

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


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

      GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

      Comment


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


        • #5
          Originally posted by Mrs blueskyracer View Post
          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


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

            GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

            Comment


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


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


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


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


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

                      GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and 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

                      • Glenn Vergara
                        Glenn Vergara 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

                    • #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 Glenn Vergara; Wed 9th Apr '14, 10:27am. Reason: Fixed typo

                      GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                      Comment


                      • #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 Glenn Vergara; Wed 9th Apr '14, 11:25am.

                        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                        Comment


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


                          • #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" data-widget-id="1771" data-widget-instance-id="12">
                            The CSS rule would be:

                            Code:
                            .canvas-widget[data-widget-id="1771"] .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 Glenn Vergara; Wed 9th Apr '14, 10:20am. Reason: Fixed typo again

                            GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                            Comment

                            Related Topics

                            Collapse

                            Working...
                            X