What can I put in my custom css to change these little icons?
New post/last post icons - how can I change them?
Collapse
X
-
Tags: None
-
-
-
It seems you want to change a number of default icons. Why don't you just modify the default sprite icon file?
If you modify the file, then you don't have to add custom CSS to use different icons.
Comment
-
-
Oh you're in vBCloud. In vBCloud, there is an option to upload images for use in CSS (AdminCP > vBCloud Upload CSS > Manage Files). After you upload your own version of the sprite icon file, you need to add this in css_additional template or in Sitebuilder > Style > CSS Editor.
Code:.b-icon { background-image: url("/path/to/the/sprite.png"); }
Comment
-
-
OK I've edited and uploaded the sprite sheet. I used your code... but it didn't seem to change anything. I also created a replacement variable - changing images/css/sprite_icons_vb_ltr.png to my file path. No dice. Do you think it just takes time to update? I've cleared all my cache and everything too.Comment
-
Upload the individual new icons and then write CSS to use that icon. For instance, the first one (go to new post), upload the new image and then add CSS like:
HTML Code:.topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread { background:url(http://url.to.new.image) 0 0 no-repeat scroll transparent; display:inline-block; height:aapx; width:bbpx; }
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 helpComment
-
Last edited by BugOutGirl; Thu 12 Mar '15, 7:59pm.Comment
-
In chrome, right click on the icon and click inspect element. It works the same way in firefox. This will bring up the dev-tools so you can view the raw html and css. If you are planning on doing a lot more customization, you should consider learning how to use this tool. Here is a link to the docs on how to use it. https://developer.chrome.com/devtools
-
-
Add these:
Code:.topic-list-container .topic-list .topic-item .cell-lastpost .go-to-last-post { background-image: url("/core/css/0/0/1/3/7/7/images/sprite.png"); } .topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread { background-image: url("/core/css/0/0/1/3/7/7/images/sprite.png"); }
Code:.topic-list-container .topic-list .topic-item .cell-topic .topic-wrapper .go-to-first-unread { background: url(core/css/0/0/1/3/7/7//images/newpost.gif) 0 0 no-repeat scroll transparent; display: inline-block; height: 11px; width: 11px; }
Comment
-
-
I originally suggested you to add this in CSS Editor:
Code:.b-icon { background-image: url("/path/to/the/sprite.png"); }
Code:.b-icon, .vb-icon { background-image: url("/path/to/the/sprite.png"); }
Comment
-
Related Topics
Collapse
-
by MondyHi all -
Just moved our test site to B20 and noticed that all my ckeditor icons have vanished.
Applies to Blogs & Forum. Also to SiteBuilder, as shown in attachment 3. ...-
Channel: Support Issues & Questions
Tue 4 Dec '12, 11:51pm -
-
by BugOutGirlI would like to change the new post icon, last post icon, and the thread icons beside each thread. I have a new file for each that I am ready to link but I don't know what do put in my css file (I am...
-
Channel: Support Issues & Questions
Sat 7 Mar '15, 4:06pm -
-
hi ,
i want to change the first icons of vbulletin 5.3.0 to some icons likes
Normal
i need it Different like :
...-
Channel: Support Issues & Questions
Tue 13 Jun '17, 4:45pm -
Comment