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

Simple CSS Featured Thread Blocks

A variety of simple featured Thread blocks.

  1. Shelley

    Shelley Well-Known Member

    resonansER, Inkman and Mirovinger like this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Very nice!
     
    Shelley likes this.
  3. Inkman

    Inkman Active Member

    This looks brilliant, could you possibly tell me how i could make it match my site at wirraltalk.co.uk not good on that type of thing. :(
     
  4. Shelley

    Shelley Well-Known Member

    I'm not sure what colour your aiming to go for? If it's the blue variation on your default style then it's easy enough to insert the hexvalues of that colour and placing them into any one of the existing blocks to complement your style.
     
    Last edited: Dec 5, 2013
  5. Shelley

    Shelley Well-Known Member

    If the following is something like what your looking for let me know and I'll post it up and edit the release part of this resource and add the css for it.

    Screenshot_19.png
     
    Inkman likes this.
  6. Inkman

    Inkman Active Member

    Ooooh yes that is perfect thank you @Shelley really looks good.
     
  7. Shelley

    Shelley Well-Known Member

    Your welcome.

    That's now been added in the release part of this thread.
     
    Inkman likes this.
  8. Shelley

    Shelley Well-Known Member

    Update: Added Green Featured thread block in the release part of this thread.

    Screenshot_21.png
     
  9. Shelley

    Shelley Well-Known Member

    I think in the next version there will be a block appearing in the forum_view area if you choose to enable it so I'd strongly advise you change the following so when the update comes your forum_view blocks will inherit the styling.

    Code:
    .forum_list .sectionMain.ctaFtContainer
    
    and change it to
    Code:
    .ctaFtBlock .sectionMain.ctaFtContainer
    
    I'm about to go in and edit the resource so it complies with the new update when it arrives. Anyone else that is using this prior to this post I'd strongly encourage you to make the changes.
     
    Last edited: Dec 5, 2013
    Inkman likes this.
  10. Inkman

    Inkman Active Member

    Thank you, i have just edited it. the new update sounds good, cannot wait.
     
    Shelley likes this.
  11. The Sandman

    The Sandman Well-Known Member

    Thanks Shelley!

    I'm using the dark version on AdEx. I tried the rich red but it's not quite right with my existing red palatte. Any recommendations for changing the hexvalues to make the reds match up better?
     
  12. Shelley

    Shelley Well-Known Member

    I've got some time to kill today so I might get started on some more and post them. I'll take a look at your reds on your style later and once I've done a few more I'll submit.

    Screenshot_2.png
     
    Lisa and The Sandman like this.
  13. The Sandman

    The Sandman Well-Known Member

    As you might have presumed, the bright red turned out to be way too much for the Featured Threads block so I ended up going back to the dark design but with a few touches of the bright red color.

    Thanks!

    Is there a way to put an accent line between the Featured Thread text and Read More link similar to the line between the Featured Thread title and the body of the text? I'd be interested to see how that would look.
     
  14. Shelley

    Shelley Well-Known Member

    Not sure whether this will display correctly but you could try the following

    Code:
    .ctaFtBlock .ctaFtThreadText {border-bottom: 1px solid #232323; box-shadow: 0 1px 0 #595959;}
     
  15. The Sandman

    The Sandman Well-Known Member

    Doesn't seem to work unless I'm putting it in the wrong spot or something.
     
  16. Shelley

    Shelley Well-Known Member

    Try adding the following to EXTRA this works on my version.

    Code:
    .ctaFtBlock  .ctaFtFooter { border-top: 1px solid #595959; box-shadow: 0 -1px 0 #232323, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent ;
    margin-top: 5px;}
     
  17. Shelley

    Shelley Well-Known Member

    Did you get it working?
    Screenshot_2.png
     
    Lisa likes this.
  18. The Sandman

    The Sandman Well-Known Member

    That one works!
     
  19. The Sandman

    The Sandman Well-Known Member

    It's not the same effect as the line under the Featured Thread title though. On your purple example they look similar enough, but on the dark style the difference is more obvious.
     
  20. Shelley

    Shelley Well-Known Member

    Adjust the colouring slightly to compensate for the darker gradient since it starts at the bottom.
     
    The Sandman likes this.

Share This Page