Changing Status Icons

[Flash04jv]

I have found tons of info on this, but nothing is working for me. I want to make unread topics our customized dark logo, and read topics our greyed out logo. We had this before we switched to the cloud.

It seems I can only do this in the SiteBuilder, and not in Admin CP. I found this code and tried to put a URL or HTML link in there, but it just makes the current little notepad logos disappear.

Is it even possible to put an HTML in there as a logo? I tried to paste it in the ( path to the background ) area. Can I link an Image Hosting Site like Photobucket? Or how do I make a path for it to find the logo since we are using vbcloud?


/* unread topics*/ .topic-item .vb-icon.vb-icon-topic-status { background: transparent url("/path/to/the/background.png") no-repeat; }

/* read topics*/ .topic-item.read .vb-icon.vb-icon-topic-status { background: transparent url("/path/to/the/background.png") no-repeat; }

[glennrocksvb]

vBCloud has vBCloud File Manager in AdminCP where you can upload files. So upload your icon and it will show you the URL of the uploaded image. Copy the URL and use it in the CSS.

[Flash04jv]

Thanks so much!! Why did I not come to you sooner... Unread and Read topic icons function perfectly!

The largest I could make them was 15 pixels by 15 pixels in Photoshop. Any larger and they get cut off, they are teeny tiny that size. Is it possible for me to make that area larger so the icons can be larger?




Last question about this. Is there a code for the icons on the modules, main forums on the home page?

[glennrocksvb]

http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size

[Flash04jv]

I found a lot of people are having success with forumicon_size style var. But increasing that is doing nothing for me? It is as 48 px right now.

[Flash04jv]

Oops, posted at about the same time Glenn, let me try that and update you.

[glennrocksvb]

Is there a forumicon_size stylevar? I can't find it in 5.1.8 and 5.1.9.

[napy8gen]

there should not be any because forumicon is from sprite image. it is not resizable.vb4 yes there is . vb5 no.

[glennrocksvb]

Yeah I thought the OP was referring to vB5 as he said he increased the value of that stylevar.

[Flash04jv]

Here is a screen shot of what I was referring to. Changing it didn't seem to do anything for me.

[Flash04jv]

Holy Cow! Man are things looking up since our transfer to VB Cloud, wasn't sure this stuff was going to work. Especially since I have never done anything like this before, between me and another guy trying our hardest every day, it's finally coming together!

I had to change a lot of the code that was provided in that link for it to work for me, the descriptions and info headers were all over the place and on top of the logo. The parts that had {vb:stylevar } did nothing until I removed them as shown. I'm sure there is a lot of not needed stuff in there but it looks amazing so I'm not touching anymore. But that code made things look nicer on other pages as well, the sub-forum sections look so nice now.


Thanks a ton Glenn, you da man!

/* start custom forum icons */
/* Forums */
.forum-list-container .forum-item .cell-forum .icon, .forum-list-container .forum-item.sub.new .cell-forum .icon {
background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/Read40x40.png) 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, .forum-list-container .forum-item.sub .cell-forum .icon {
background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/40x40.png) no-repeat; /* forum icon for forums with new posts */
width: 40px; /* icon width */
height: 42px; /* icon height */
}
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
padding-left: 48px; /* icon width + 8 */
}
.forum-list-container .forum-item .cell-forum .forum-desc, .forum-list-container .forum-item.sub .cell-forum .forum-desc {
margin-left: 48px;
margin-top: -25px;
}
/* Sub Forums */
.forum-list-container .subforum-list > td {
padding-left: 53px; /* icon width + 13 */
}
/* Responsive */
[USER="3396"]media[/USER] only screen and (max-width: 768px)  {
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-left: 48px; /* icon width + 8 */
}
.forum-list-container .subforum-list > td {
padding-left: 73px; /* icon width + 33 */
}
/* end custom forum icons */

[Flash04jv]

Would it be possible to have all the text be in alignment with the line I drew here? It looks ok, but I would like the headline wrap and Topics/Last Post to be even with each other.

I'm thinking I could add a logo code with the margins or padding into the responsive braces somewhere so text doesn't go that far left. Idk, hopefully there is something I can do for our mobile view.

[glennrocksvb]

Try adding this:

@media only screen and (max-width: 768px) {
    .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
        vertical-align: middle;
        display: table-cell;
        padding-left: 51px;
    }
    .forum-list-container .forum-item .cell-forum .rx-forum-stats, .forum-list-container .forum-item .cell-forum .rx-lastpost-info { margin-left: 51px; }
}

[Flash04jv]

Incredible. Worked perfectly. Thanks again!