Sticky Thread Enhancement v1

[Shelley]

Shelley submitted a new resource:

Sticky Thread Enhancement (version v1) - Sticky thread enhancement

Summary: A simply guide to enhance and make sticky thread listings distinguishable between standard threadlistings. This serves as a guide and you can style them in the colour of your choice.

Just place the following into your EXTRA.CSS Template:

/*STICKY THREAD  ENHANCEMENTS*/
 
.discussionList .sticky {
    background-color: #f7caca !important;
    border: 1px solid #d88585 !important;
}
 
.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {...

Read more about this resource...

 

[kkm323]

Thanks a lot! is there fourm_list enhancement coming any soon? I have to admit that you're the most talented designer I have seen thus far

 

[Shelley]

I haven't really been doing much with xenforo lately so I doubt anything with regards to the forum_list area will be done anytime soon. I did post some css and screenies to change each node area but this really isn't a significant change http://xenforo.com/community/thread...rounds-for-different-forum-nodes.38934/page-2

I dunno, I think there are better designers that could post better more significant changes/enhancements to revamp the forum_list

 

[surfsup]

Is there a way to do this just for a Normal thread? Thats what ive really been looking for, to highlight a normal thread...lemme know thx!

 

[kkm323]

for those who are looking for color to fit the default style LighBlue chnage the background for
.discussionListItem, .memberListItem {
background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll center bottom #F0F7FC !important;

 

[Koiranpentu]

This is really awesome, thank you! However, I'd like to use this for locked non-sticky threads instead of sticky threads. Is there any easy way to exclude sticky threads from this? Oh, or is there a way to style topics with a specific prefix with this? I tried something which didn't work.

 

[Shelley]

This is really awesome, thank you! However, I'd like to use this for locked non-sticky threads instead of sticky threads. Is there any easy way to exclude sticky threads from this? Oh, or is there a way to style topics with a specific prefix with this? I tried something which didn't work.

I did style locked threads also but never did release the css for it. The next time I log into my site I'll grab the css and post it here.

 

[Shelley]

This is really awesome, thank you! However, I'd like to use this for locked non-sticky threads instead of sticky threads. Is there any easy way to exclude sticky threads from this? Oh, or is there a way to style topics with a specific prefix with this? I tried something which didn't work.

Use at your own risk, unsure whether there will be any adverse effects but you shouldn't have any issues. Paste the following in the EXTRA.CSS template and style to your preference.

/* LOCKED THREAD ENHANCEMENTS */
 
.discussionList .locked  {
    background-color: #fff0d5 !important;
    border: 1px solid #e9cd9b !important;
}
.discussionListItem .iconKey span {
    background-color: transparent !important;
    border: 0px solid #e9cd9b !important;
}
.discussionList .locked .stats dl {
    border-left: 1px solid #e9cd9b !important;
    border-right: 1px solid #e9cd9b !important;
}
.discussionList .locked .title a, .discussionList .locked .DateTime, .discussionList .locked .EditControl {
    color: #6d4c12!important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbf4e8;
}
.discussionList .locked .username, .discussionList .locked .pairsJustified dt {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbf4e8;
}
.discussionList .locked .posterAvatar, .discussionList .locked .stats {
    background-color: #fff0d5 !important;
}
 
/*  LOCKED THREAD ENHANCEMENTS */

 

[oman]

Thanks Shelley! Was able to edit it to suit my style!:

 

[Koiranpentu]

Use at your own risk, unsure whether there will be any adverse effects but you shouldn't have any issues. Paste the following in the EXTRA.CSS template and style to your preference.

/* LOCKED THREAD ENHANCEMENTS */
 
.discussionList .locked  {
    background-color: #fff0d5 !important;
    border: 1px solid #e9cd9b !important;
}
.discussionListItem .iconKey span {
    background-color: transparent !important;
    border: 0px solid #e9cd9b !important;
}
.discussionList .locked .stats dl {
    border-left: 1px solid #e9cd9b !important;
    border-right: 1px solid #e9cd9b !important;
}
.discussionList .locked .title a, .discussionList .locked .DateTime, .discussionList .locked .EditControl {
    color: #6d4c12!important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbf4e8;
}
.discussionList .locked .username, .discussionList .locked .pairsJustified dt {
    color: #373737 !important;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #fbf4e8;
}
.discussionList .locked .posterAvatar, .discussionList .locked .stats {
    background-color: #fff0d5 !important;
}
 
/*  LOCKED THREAD ENHANCEMENTS */

It still effects stickies. I don't know if there is any simpler way to do it than writing the same code as above but tweaking it for .locked.sticky which effects only locked stickies and writing the same code again to effect not locked sticky threads too.

I'd like to use this for locked non-sticky threads instead of sticky threads. Is there any easy way to exclude sticky threads from this?

 

[Shelley]

It still effects stickies. I don't know if there is any simpler way to do it than writing the same code as above but tweaking it for .locked.sticky which effects only locked stickies and writing the same code again to effect not locked sticky threads too.

It shouldn't do, it's not using the sticky thread class unless you have something in extra overriding it. Bare in mind, if you have sticky closed threads then closed thread styling will take affect, atleast it does for my style.

 

[oman]

I just noticed that the only part I'm missing the gradient image on is here:

How do I fix up that area?

 

[oman]

I might make the blue a bit more subtle.

 

[Shelley]

I just noticed that the only part I'm missing the gradient image on is here:

How do I fix up that area?

I'm sure I uploaded the gradient in the download attachment.

 

[oman]

I'm sure I uploaded the gradient in the download attachment.

Yes, got that.

What I was saying was that the gradient image wasn't covering that part of the enhancement for both sticky and normal thread enhancement.

 

[AndreaMarucci]

Shelley submitted a new resource

Fantastic work as usual Shelley. Just a question. Instead to have the pink, I'd like to have the subtle yellow like the one used also here for the quotes. What I've to modify and how?

Thanks!!

 

[Shelley]

Change the following

.discussionList .sticky {
    background-color: #F9D9B0 !important;
   border: 1px solid #F9BC6D !important;
}

.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {
    background-color: #F9D9B0 !important; }

 

[AndreaMarucci]

Fantastic, thanks!

 

[fredrikse]

Great enhancements for the thread presentation!

I found one thing that breaks the design and that is when a thread is marked for moderation (see picture).

 

[Koiranpentu]

It shouldn't do, it's not using the sticky thread class unless you have something in extra overriding it. Bare in mind, if you have sticky closed threads then closed thread styling will take affect, atleast it does for my style.

Ehm, that was the thing I was trying to say. I have some sticky threads that are locked/closed such as some forum rule related threads.

Anyway, I know now what I should do with those topics. Thanks for replies!