Announcement

Collapse
No announcement yet.

Change "online and message" button color

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

  • pacinofurioso
    replied
    Thanks Glenn.

    Leave a comment:


  • Glenn Vergara
    replied
    Originally posted by pacinofurioso View Post
    What is the purpose of the RTR one?
    That's for the Right-to-Left languages.

    Btw, modified existing images will be overwritten when you upgrade. You will have to apply the changes every time you upgrade.

    My recommended solution is to not edit existing images and just use custom css to override the icons. For example,

    Code:
    .b-icon__status--green {
        background: transparent url('/path/to/the/image.png') no-repeat;    
        width: 15px; /* specify width if not 12px */
        height: 15px; /* specify height if not 12px */
    }
    
    .b-icon__status--gray {
        background: transparent url('/path/to/the/image2.png') no-repeat;
        width: 15px; /* specify width if not 12px */
        height: 15px; /* specify height if not 12px */
    }

    Leave a comment:


  • pacinofurioso
    replied
    Using filezilla, I found the sprites images and I edited them in photoshop. I just changed the color and then uploaded the file back to my root folder in the CSS folder. The sprites are working exactly as I wanted.

    But I have one question. In the root folder of my site in the CSS folder IMAGES there are TWO SPRITE SHEETS. One is a mirror left image of the other. Why are there two sprite sheets, one that is named

    sprite_icons_vb_ltr

    the other is named

    sprite_icons_vb_rtr


    I edited only the LTR one and the sprites are working fine. What is the purpose of the RTR one?

    thanks

    Leave a comment:


  • pacinofurioso
    replied
    Hi Pro Sports

    So I found that sprite image you are talking about. (I cant remember where I found it, but looking through my site, I found it.)

    The image I found is this: sprite_icons_vb_ltr

    I edited it with photoshop and it looks good (I only changed the colors, didn't move any images, etc. ). If I want to experiment and replace it temporarily over the original one, where does the image go in my public_html folder?

    Can you help me find where the original one is so that I can temporarily try this new edited one?

    Thanks

    Leave a comment:


  • pacinofurioso
    replied
    Hopefully vbulletin will update this in the future and make it more userfriendly and allow users to change these things.

    Leave a comment:


  • josealbertocll
    replied
    Well ok, in this case I am not going to change it because I donīt have this knowledge about these image editor. I just want to change the color of 2 button, I appreciate your help.

    Thanks

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by josealbertocll View Post
    Ok, I have seen the file, but how can i change some icons? For example to change a button color? I mean, copy and paste a new icon instead the former icon? How can I know the icon size?

    Thanks
    You'll need an image editor such as Photoshop or GIMP and some knowledge of image modes and layers. In order to replace an individual image on a sprite sheet you'll have to either replace the existing images or duplicate the original sprite sheet and use layer modes to change the color(s). To determine the dimensions of a specific image there are measuring tools included within these programs.

    This is not something I would recommend unless you have some experience. If what you're wanting is a simple request I may be able to help you out free of charge.

    Leave a comment:


  • josealbertocll
    replied
    Ok, I have seen the file, but how can i change some icons? For example to change a button color? I mean, copy and paste a new icon instead the former icon? How can I know the icon size?

    Thanks

    Leave a comment:


  • In Omnibus
    replied
    Here's an example sprite sheet of a color change to the online status icons. As you can see, there isn't any margin for error.

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by pacinofurioso View Post
    Thanks ProSports. So even if I look in my images directory in my site root and find the image that says /images/css/sprite_icons_vb_ltr.png and if I were to create my own image and put it in the same folder and "overwrite" the image with my new one, it would not change the image? (I have to edit a sprite sheet?)
    That sprite sheet has over 100 images on it. In order to edit a sprite sheet you have to be familiar with how image coordinate mapping works. Your image would have to be the identical size to the existing one and in the identical location, otherwise you could have issues with it displaying properly or with it overlapping other sprite images.

    Leave a comment:


  • IggyP
    replied
    the image IS a sprite sheet
    which is basically just an image with many other images sourced off the one, which is why u have to edit it exactly correct

    Leave a comment:


  • pacinofurioso
    replied
    Thanks ProSports. So even if I look in my images directory in my site root and find the image that says /images/css/sprite_icons_vb_ltr.png and if I were to create my own image and put it in the same folder and "overwrite" the image with my new one, it would not change the image? (I have to edit a sprite sheet?)

    Leave a comment:


  • josealbertocll
    replied
    Wel, itīs ok. I refer the button which is situated near the username.

    Thanks

    Leave a comment:


  • In Omnibus
    replied
    The "online" button is .b-icon on the /images/css/sprite_icons_vb_ltr.png sprite sheet. You would need to edit the sprite sheet or edit the background URL for both .b-icon and .b-icon__status--green.

    To which "Message" button are you referring?

    Leave a comment:


  • josealbertocll
    replied
    Ok, I hope to get the answer

    Leave a comment:

Related Topics

Collapse

Working...
X