• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Recent thread CSS

kankan

Active member
#1
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

Shelley

Well-known member
#2
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)
 

kankan

Active member
#3
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 ;)
 

Shelley

Well-known member
#4
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 ;)
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; }
 

Shelley

Well-known member
#5
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.png
 

kankan

Active member
#6
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)}
 

Shelley

Well-known member
#7
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.
 

kankan

Active member
#8
Hey thank you Shelley
It's working pretty good :)
Do you know how to have a little border like in the forum categories ?
 

Shelley

Well-known member
#9
Hey thank you Shelley
It's working pretty good :)
Do you know how to have a little border like in the forum categories ?
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;
}
 

Shelley

Well-known member
#11
Great. Working pretty good.
Do you want the Xmas guarland script ?
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. :)
 

kankan

Active member
#12
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 ?
 

Shelley

Well-known member
#13
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 ?
I don't seem to be able to view that style so unable to determine which colours the style category bars are using. Sorry/
 

kankan

Active member
#14
Seems to be :

Code:
<div class="categoryText">
            <h3 class="nodeTitle">forum name</a></h3>
            <blockquote class="nodeDescription baseHtml"><p><br>Description</p></blockquote>