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

Recent thread CSS

Discussion in 'Styling and Customization Questions' started by kankan, Dec 5, 2012.

  1. kankan

    kankan Active 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
     

    Attached Files:

  2. Shelley

    Shelley Well-Known Member

    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)
     
    Jake Bunce likes this.
  3. kankan

    kankan Active Member

    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 ;)
     
  4. Shelley

    Shelley Well-Known Member

    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; }
    
     
    Jake Bunce likes this.
  5. Shelley

    Shelley Well-Known Member

    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
     
    Jake Bunce likes this.
  6. kankan

    kankan Active Member

    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)}
    
     
  7. Shelley

    Shelley Well-Known Member

    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.
     
    Jake Bunce likes this.
  8. kankan

    kankan Active Member

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

    Shelley Well-Known Member

    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;
    }
    
     
    Jake Bunce likes this.
  10. kankan

    kankan Active Member

    Great. Working pretty good.
    Do you want the Xmas guarland script ?
     
    Jake Bunce and Shelley like this.
  11. Shelley

    Shelley Well-Known Member

    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. :)
     
    Jake Bunce likes this.
  12. kankan

    kankan Active Member

    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 ?
     
  13. Shelley

    Shelley Well-Known Member

    I don't seem to be able to view that style so unable to determine which colours the style category bars are using. Sorry/
     
  14. kankan

    kankan Active Member

    Seems to be :

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

Share This Page