Announcement

Collapse
No announcement yet.

Topic icons

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

  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post
    You're dealing with background images so you need to position them as such.

    https://developer.mozilla.org/en-US/...round-position
    Thanks. I will have a look.

    Leave a comment:


  • Wayne Luke
    replied
    You're dealing with background images so you need to position them as such.

    https://developer.mozilla.org/en-US/...round-position

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post
    There are probably padding or margins that need to be changed. Will try to look if I get time.
    I managed to fix myself Wayne, the only issue is, the icon on mobile version is not on the middle.

    The code which I used, is:

    Code:
     .l-narrow-column .topic-list-container .topic-list .topic-item, .l-small .topic-list-container .topic-list .topic-item {
    display: block;
    position: relative;
    overflow: auto;
    }
    .topic-list-container .topic-list .topic-item {
    background: #fff none;
    }
    .l-small .topic-list-container .topic-list .cell-topic-image {
    height: 38px!important;
    }
    .topic-list-container .topic-list .topic-item .cell-topic {
    padding-top: 15px;
    }
    
    .topic-list-container .topic-list .topic-item .cell-topic {
    position: center;
    padding-left: 0px;
    }
    .topic-list-container .topic-list .topic-item td {
    border-top: 0px solid #e6e6e6;
    }
    .l-small .topic-list-container .topic-list .cell-topic-image {
    float: left;
    clear: left;
    padding-top: 10px;
    padding-right: 10px;
    box-sizing: content-box;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    }
    l-narrow-column .topic-list-container .topic-list .cell-topic-image, .l-narrow-column .topic-list-container .topic-list .cell-topic, .l-narrow-column .topic-list-container .topic-list .cell-count, .l-narrow-column .topic-list-container .topic-list .cell-lastpost, .l-narrow-column .topic-list-container .topic-list .cell-inlinemod-item, .l-small .topic-list-container .topic-list .cell-topic-image, .l-small .topic-list-container .topic-list .cell-topic, .l-small .topic-list-container .topic-list .cell-count, .l-small .topic-list-container .topic-list .cell-lastpost, .l-small .topic-list-container .topic-list .cell-inlinemod-item {
    padding: 0 25px;
    display: block;
    color: #252C2F;
    }
    topic-list-container .topic-list .topic-item .cell-topic-image {
    vertical-align: top;
    white-space: nowrap;
    min-width: 16px;
    padding: 10px;
    }
    .topic-list-container .topic-list .topic-item td {
    border-top: 1px solid #e6e6e6;
    }
    
    
    
    .l-narrow-column .topic-list-container .topic-list .topic-item, .l-small .topic-list-container .topic-list .topic-item {
    display: block;
    position: relative;
    overflow: auto;
    }
    
    .topic-list-container .topic-list .topic-item:first-child {
    border-top: 0;
    }
    .topic-list-container .topic-list .topic-item {
    background: #fff none;
    }

    Is there anything wrong ? Thanks

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post
    There are probably padding or margins that need to be changed. Will try to look if I get time.
    Is there any reason why all topic icons disappearing when using this code Wayne?

    Code:
      .unread .vb-icon-topic-status {
    background-image: url('/images/forumicons/hoturead.png');
    background-position: 0 0;
    }

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post
    There are probably padding or margins that need to be changed. Will try to look if I get time.
    Yes please. If that's ok.

    Leave a comment:


  • Wayne Luke
    replied
    There are probably padding or margins that need to be changed. Will try to look if I get time.

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post
    Add a background-position value under each background-image attribute.

    All the positions should be:
    Code:
    background-position: 0 0;
    Thanks a lot Wayne,


    I have an other issue with the PNG images, because they are all 32x32 px, and vb icons are 16x16px, I have problem with icons when accessing the forum from mobile, the icons are a bit into topic tittle. I would like to ask how can I fix that issue? I need a css code oto fix it?

    Leave a comment:


  • Wayne Luke
    replied
    Add a background-position value under each background-image attribute.

    All the positions should be:
    Code:
    background-position: 0 0;
    Click image for larger version

Name:	2020-02-19_10-58-20.png
Views:	36
Size:	20.5 KB
ID:	4434962

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post

    This is why I asked for the exact code you were using so I can troubleshoot the issue for you. Without the exact code there is no way to help.

    Hopefully you're able to find a solution.
    Sorry to bother you again.

    I tried the code again, looks working , but for some reason did not changed all icons.

    heres the code:

    Code:
     .vb-icon-topic-status {
    background-color: transparent;
    background-repeat: no-repeat;
    height: 32px; /* this is the height of default icons, remove it if the same */
    width: 32px /* this is the width of default icons, remove it if the same */
    }
    
    /* for hot unread topic */
    .hot-unread .vb-icon-topic-status {
    background-image: url('/images/forumicons/hoturead.png');
    }
    
    /* for hot read topic */
    .hot-read .vb-icon-topic-status {
    background-image: url('/images/forumicons/hotread.png');
    }
    
    /* for read topic */
    .read .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for closed topic */
    .closed .vb-icon-topic-status {
    background-image: url('/images/forumicons/closed-topic.png');
    }
    
    
    /* for unread topic where current user has posted to */
    .posted .vb-icon-topic-status {
    background-image: url('/images/forumicons/unread.png');
    }
    
    /* for read topic where current user has posted to */
    .posted.read .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for closed topic where current user has posted to */
    .posted.closed .vb-icon-topic-status {
    background-image: url('/images/forumicons/closed-topic.png');
    }

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Wayne Luke View Post

    This is why I asked for the exact code you were using so I can troubleshoot the issue for you. Without the exact code there is no way to help.

    Hopefully you're able to find a solution.
    Have a look above, that's the code which I've used.

    Leave a comment:


  • Wayne Luke
    replied
    Originally posted by Faustvasea97 View Post

    Yes I know, I replaces some of them, and as I said, images doesn't even appear. The url path was right, as I was checking them on browser...
    This is why I asked for the exact code you were using so I can troubleshoot the issue for you. Without the exact code there is no way to help.

    Hopefully you're able to find a solution.

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Mark.B View Post

    As Wayne and I have said, please post the exact code you are using. Complete and intact.

    Without this we will not be able to assist. As piecing it together from various bits is not necessarily going to give us what you are actually using.

    Also we cannot provide support via PM sorry.
    I have a bit of changes.
    So what I've done, I did put the same path to all topic images, to see. Did work, but not all topic icons has been changed,

    Any reason ?

    Code below
    Code:
     .vb-icon-topic-status {
    background-color: transparent;
    background-repeat: no-repeat;
    height: 32px; /* this is the height of default icons, remove it if the same */
    width: 32px /* this is the width of default icons, remove it if the same */
    }
    
    /* for hot unread topic */
    .hot-unread .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for hot read topic */
    .hot-read .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for read topic */
    .read .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for closed topic */
    .closed .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for deleted topic */
    .deleted .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for unread topic where current user has posted to */
    .posted .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for read topic where current user has posted to */
    .posted.read .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for closed topic where current user has posted to */
    .posted.closed .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }
    
    /* for deleted topic where current user has posted to */
    .posted.deleted .vb-icon-topic-status {
    background-image: url('/images/forumicons/read.png');
    }

    Leave a comment:


  • Mark.B
    replied
    Originally posted by Faustvasea97 View Post

    This is the path which works fine on browser, but doesn't work on css code

    /images/forumicons/read.png
    As Wayne and I have said, please post the exact code you are using. Complete and intact.

    Without this we will not be able to assist. As piecing it together from various bits is not necessarily going to give us what you are actually using.

    Also we cannot provide support via PM sorry.

    Leave a comment:


  • Hectorsky
    replied
    Originally posted by Mark.B View Post

    We need to see the EXACT code you are using on your site please, including the URLs.
    This is the path which works fine on browser, but doesn't work on css code

    /images/forumicons/read.png

    Leave a comment:


  • Mark.B
    replied
    Originally posted by Faustvasea97 View Post

    Yes I know, I replaces some of them, and as I said, images doesn't even appear. The url path was right, as I was checking them on browser...
    We need to see the EXACT code you are using on your site please, including the URLs.

    Leave a comment:

Related Topics

Collapse

Working...
X