Recent thread CSS

kankan

kankan

Well-known member
Hello,

How do i design the top bar of the recent thread block ?
So that it looks like the top bar of the other modules (taigachat, forums etc)
Please see screen attached.
Thank you for your answer.

Kindest regards,
Nicolas
 

Attachments

  • recent.webp
    recent.webp
    54.1 KB · Views: 33
Sort by date Sort by votes
I just took a look at your site and you want to be looking at adding this into the extra.css template and modifying it to your preference. By changing the hex value to your preference and inputting any preference to the way you want to style it.

Code: 
#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
    background: url("styles/flexile/xenforo/gradients/navigation-tab.png") repeat-x scroll center top #F1F1EC; }

Ps. Really liking the jingling christmas bells you have spanned across the top of your forums. Nice touch. (y)
 
Upvote 0 Downvote
Thank you Shelly for the quick answer :
Just added the CSS code you provided into extra.css, but seems not to take effect.
I can send you the package for top christmas animation if interested ;)
 
Upvote 0 Downvote
kankan said:
Thank you Shelly for the quick answer :
Just added the CSS code you provided into extra.css, but seems not to take effect.
I can send you the package for top christmas animation if interested ;)
Click to expand...

It seemed to work with me in firebug. Perhaps adding the !important?

You'll have to change the hexvalue the one below is your flexille one. But i'm sure you did that already and input your custom hexvalue.

Code: 
#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
    background: url("styles/flexile/xenforo/gradients/navigation-tab.png") repeat-x scroll center top #F1F1EC !important; }
 
Upvote 0 Downvote
As you can see from the screenshot below it seemed to work for me. If the important didn't work perhaps checking your extra.css incase the classes i provided above don't already reside in your extra.css template already, if they do simply alter them and modify to your preference.

kanken.webp
 
Upvote 0 Downvote
Hooo :)

Seems not working for me :

Here is the content of my extra.css

I removed all the content except the CSS call, but no chance
there might be another css call somewhere for recent thread

Code: 
#content.forum_list .titleBar { display: none; }
#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
    background: url("http://www.forum-des-portables-asus.fr/www/styles/flexile/xenforo/gradients/category-bar-gradient.png") repeat-x scroll center top #F1F1EC !important; }
 
.portaCopy { display: none; }
 
/* Sidebar Shadow & Visitor Panel without Overflow */
.sidebar .section .secondaryContent {
  box-shadow:-4px 3px 2px #B3B3B3; // pour obtenir une ombre a gauche utiliser 4px au lieu de -4px, pour obtenir une ombre plus sombre modifier la couleur #B3B3B3
}
.sidebar .visitorPanel {
  padding-bottom: 30px; //jouer avec ce paramètre jusqu'à ce qu'il s'adapte à vos besoins
  width: 250px
}
 
.messageUserBlock h3.userText {
text-align: center;
@property "messageUserText";
padding: 0px;
@property "/messageUserText";
}
 
.UserOnline
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/Connecter.png') no-repeat !important;
        }
 
.UserOffline
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/Deconnecter.png') no-repeat !important;
        }
 
.UserOnlineInvisible
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/invisible.png') no-repeat !important;
        }
 
.footnote { position: relative; top: -0.5em; font-size: 80%; font-weight: 700;}
.footnote_list {display: block;}
.footnote_list_item { list-style-type: decimal !important; }
 
#waindigoCopyrightNotice { display: none; }
 
.barre_invitation {
position:absolute;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-moz-box-shadow:0 0 25px @primaryMedium;
-webkit-box-shadow:0 0 25px @primaryMedium;
padding:10px;
padding-left:15px;
color: @primaryDarker;
background-color: @primaryLighter;
font-size:12px;
z-index: 99999;
}
 
/* SHELLEY EDIT THREAD TITLE ENHANCEMENTS FIX FOR FLEXILLE */
 
.thread_view .titleBar {
    border: 1px solid #f9c480;
    border-radius: 5px;
    background: url("@imagePath/xenforo/gradients/threadview-bg.png") repeat-x scroll bottom #891010 !important;
    background-color: #fac47e!important;
    margin: 15px auto;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 0 1px #ffffff inset;
}
.thread_view .titleBar  #pageDescription , .thread_view .titleBar p{
    color: #8c8c8c;
}
 
.thread_view .titleBar h1 {
    margin-top: 0 !important;
}
 
.thread_view .titleBar #pageDescription a{
  color: #8c8c8c;
  font-weight: bold;
}
 
.thread_view .titleBar h1 {
  color: #000000;
  text-shadow: 0 0 0 transparent, 1px 1px 0 #CCCCCC!important;
}
 
/* SHELLEY EDIT THREAD TITLE ENHANCEMENTS FIX FOR FLEXILLE */
 
/* Add Facebook login button to visitor panel */
.cta_fbButton {
margin: 10px 30px;
text-align: center;
}
 
.messageUserBlock:before {
    background: url("http://www.forum-des-portables-asus.fr/www/styles/flexile/xenforo/overlay/avatar_snow.png") no-repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 25px;
    margin-top: 4px;
    position: absolute;
    right: -4px;
    top: -14px;
    width: 133px;
    z-index: 1;
}
.messageUserBlock .helper {
    background: url("http://www.forum-des-portables-asus.fr/www/styles/flexile/xenforo/overlay/xmasball.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 123px;
}
.sidebar .section:before {
    content: "";
    display: block;
    height: 25px;
    margin-top: 5px;
    background: url("@imagePath/xenforo/overlay/sidebar_xmas.png") no-repeat scroll left transparent;
}
/* ****** Guirlande de Noel ***** */
body{position:relative;z-index:0;margin:0;padding:0 0 1em 0;}
.b-page__content{min-height:120px}
 
.b-head-decor{display:none}
.b-page_newyear .b-head-decor{
    position:absolute;
    top:0;
    left:0;
    display:block;
    height:115px;
    width:100%;
    overflow:hidden;
    background:url('ny_garlands/images/balls/b-head-decor_newyear.png') repeat-x 0 0
}
.b-page_newyear .b-head-decor__inner{position:absolute;top:0;left:0;height:115px;display:block;width:373px}
.b-page_newyear .b-head-decor::before{content:'';display:block;position:absolute;top:-115px;left:0;z-index:3;height:115px;display:block;width:100%}
.b-page_newyear .b-head-decor__inner_n2{left:373px}
.b-page_newyear .b-head-decor__inner_n3{left:746px}
.b-page_newyear .b-head-decor__inner_n4{left:1119px}
.b-page_newyear .b-head-decor__inner_n5{left:1492px}
.b-page_newyear .b-head-decor__inner_n6{left:1865px}
.b-page_newyear .b-head-decor__inner_n7{left:2238px}
 
.b-ball{position:absolute}
.b-ball_n1{top:0;left:3px;width:59px;height:83px}
.b-ball_n2{top:-19px;left:51px;width:55px;height:70px}
.b-ball_n3{top:9px;left:88px;width:49px;height:67px}
.b-ball_n4{top:0;left:133px;width:57px;height:102px}
.b-ball_n5{top:0;left:166px;width:49px;height:57px}
.b-ball_n6{top:6px;left:200px;width:54px;height:70px}
.b-ball_n7{top:0;left:240px;width:56px;height:67px}
.b-ball_n8{top:0;left:283px;width:54px;height:53px}
.b-ball_n9{top:10px;left:321px;width:49px;height:66px}
.b-ball_n1 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n1.png') no-repeat}
.b-ball_n2 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n2.png') no-repeat}
.b-ball_n3 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n3.png') no-repeat}
.b-ball_n4 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n4.png') no-repeat}
.b-ball_n5 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n5.png') no-repeat}
.b-ball_n6 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n6.png') no-repeat}
.b-ball_n7 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n7.png') no-repeat}
.b-ball_n8 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n8.png') no-repeat}
.b-ball_n9 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_n9.png') no-repeat}
.b-ball_i1 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i1.png') no-repeat}
.b-ball_i2 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i2.png') no-repeat}
.b-ball_i3 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i3.png') no-repeat}
.b-ball_i4 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i4.png') no-repeat}
.b-ball_i5 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i5.png') no-repeat}
.b-ball_i6 .b-ball__i{background:url('ny_garlands/images/balls/b-ball_i6.png') no-repeat}
.b-ball_i1{top:0;left:0;width:25px;height:71px}
.b-ball_i2{top:0;left:25px;width:61px;height:27px}
.b-ball_i3{top:0;left:176px;width:29px;height:31px}
.b-ball_i4{top:0;left:205px;width:50px;height:51px}
.b-ball_i5{top:0;left:289px;width:78px;height:28px}
.b-ball_i6{top:0;left:367px;width:6px;height:69px}
.b-ball__i{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    -o-transform-origin:50% 0;
    transform-origin:50% 0;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    pointer-events:none
}
.b-ball_bounce .b-ball__right{position:absolute;top:0;right:0;left:50%;bottom:0;z-index:9}
.b-ball_bounce:hover .b-ball__right{display:none}
.b-ball_bounce .b-ball__right:hover{left:0;display:block!important}
.b-ball_bounce.bounce>.b-ball__i{-webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);-o-transform:rotate(-9deg);transform:rotate(-9deg)}
.b-ball_bounce .b-ball__right.bounce+.b-ball__i{-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}
.b-ball_bounce.bounce1>.b-ball__i{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);transform:rotate(6deg)}
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i{-webkit-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-o-transform:rotate(-6deg);transform:rotate(-6deg)}
.b-ball_bounce.bounce2>.b-ball__i{-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}
.b-ball_bounce.bounce3>.b-ball__i{-webkit-transform:rotate(1.5deg);-moz-transform:rotate(1.5deg);-o-transform:rotate(1.5deg);transform:rotate(1.5deg)}
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i{-webkit-transform:rotate(-1.5deg);-moz-transform:rotate(-1.5deg);-o-transform:rotate(-1.5deg);transform:rotate(-1.5deg)}
 
Upvote 0 Downvote
In your extra css change the following t0 (below code) you currently have "#F1F1EC"
Code: 
#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
    background: url("http://www.forum-des-portables-asus.fr/www/styles/flexile/xenforo/gradients/category-bar-gradient.png") repeat-x scroll center top #F9D9B0 !important; }

If you trust me I can check it out for you if the above is still not working but it should do. I would need access to the templates though.
 
Upvote 0 Downvote
kankan said:
Hey thank you Shelley
It's working pretty good :)
Do you know how to have a little border like in the forum categories ?
Click to expand...

If you insert all the following (below) this should fix your radius, text colour and borders. You may not need to add the !important but try that and that should sort everything ut.

Code: 
#recentNews .recentNews .subHeading, #recentThreads .sectionHeaders {
    background: url("http://www.forum-des-portables-asus.fr/www/styles/flexile/xenforo/gradients/category-bar-gradient.png") repeat-x scroll center top #F9D9B0 !important;
    border: 1px solid #F9D9B0 !important;
    border-radius: 6px !important;
    color: #6D3F03 !important;
}
 
Upvote 0 Downvote
kankan said:
Great. Working pretty good.
Do you want the Xmas guarland script ?
Click to expand...

Good to hear checking it and it seems to be all working. :)

Thanks for the offer Kanken But I'm not doing much with my site with regards to giving it a xmas feel this year but thanks anyway. :) I do recall 8thos asking for something similar and would/might be interested in some help and greatful if you offered it to him in this thread >> http://xenforo.com/community/threads/snowstorm-and-christmas-lights.41777/

I know your's is xmas balls but i'm sure he could change the image and sound file to his preference. :)
 
Upvote 0 Downvote
Hehe ok i will check the thread.
Another question if i can.
Do you know how to change the Police style in the recent thread top bar so that it looks like the same as in the forum header bar ?
 
Upvote 0 Downvote
kankan said:
Hehe ok i will check the thread.
Another question if i can.
Do you know how to change the Police style in the recent thread top bar so that it looks like the same as in the forum header bar ?
Click to expand...

I don't seem to be able to view that style so unable to determine which colours the style category bars are using. Sorry/
 
Upvote 0 Downvote
Seems to be :

Code: 
<div class="categoryText">
            <h3 class="nodeTitle">forum name</a></h3>
            <blockquote class="nodeDescription baseHtml"><p><br>Description</p></blockquote>
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Mr Lucky
Not a bug Alert of recent thread start when thread is many years old
Replies
4
Views
56
Mr Lucky
Mr Lucky
Orit
  • Suggestion Suggestion
In thread list- add an option to display a snippet of 5 of the recent posts under each thread
Replies
0
Views
69
Orit
Orit
Orit
Is there an add-on for an option to display a snippet of 5 of the recent posts under each thread in the thread list?
Replies
0
Views
78
Orit
Orit
Orit
  • Suggestion Suggestion
A recent posts widget to display the posts in a given thread(s)
Replies
0
Views
208
Orit
Orit
A
  • Question Question
XF 2.2 [Sidebar Widget] How to only show recent threads with attachments only
Replies
0
Views
379
aliahmadca
A
Back
Top Bottom