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?
Post "Icon"
Collapse
X
-
Tags: None
-
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 -
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.Comment
-
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
-
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
-
Lynn is right, that's the quicker and easier solution if that's the only icon you want to change.Comment
-
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
-
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 helpComment
-
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
-
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 helpComment
-
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; }
👍 1Comment
-
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 -
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. -
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
-
-
Originally posted by IggyPhello,
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
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 */ }
Note that since the icon height is too high, there is a big gap between forum name and description.Comment
-
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.👍 1Comment
-
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
-
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">
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 */ }
Comment
Related Topics
Collapse
-
by fcherubHi,
I've recently upgraded from 4.2.1 to 5.1.5 and now 5.1.6
I have set post icon permissions to admin only, but I have the following problems:
If I click on edit...3 Photos-
Channel: Support Issues & Questions
-
-
by hollyboyHi,
How do I replace the channel icon with another image?
Can't find the location of the image on my FTP
Thanks...1 Photo-
Channel: Support Issues & Questions
-
-
by bendieselHi ! I wonder if it is normal that this reduction button (or minimize icon) of the Content slider appears alone and not in the frame like the rest of modules frame?
- is there...-
Channel: Support Issues & Questions
-
Comment