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 (Part 2)

More Simple css featured thread styled blocks

  1. Shelley

    Shelley Well-Known Member

  2. Shelley

    Shelley Well-Known Member

    I didn't like the purple version I did which is posted in the release part as I thought the transition between the gradients weren't subtle enough so re-done it again. Because I can't leave this sitting in my EXTRA.CSS, and will have to delete it from there, I'll just post it here (with the exception) I've added a featured tag on this one which can easily be removed.


    Screenshot_10.png
    Install: Same rule, Paste in your EXTRA.CSS template.
    Code:
    /* START Featured Thread Enhancement PURPLE START Start Featured Thread Enhancement PURPLE START */
    
    .ctaFtBlock .sectionMain.ctaFtContainer {
    background: #683fa0; /* Old browsers */
    background: -moz-linear-gradient(top, #683fa0 0%, #492b72 50%, #412157 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#683fa0), color-stop(50%,#492b72), color-stop(100%,#412157)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #683fa0 0%,#492b72 50%,#412157 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #683fa0 0%,#492b72 50%,#412157 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #683fa0 0%,#492b72 50%,#412157 100%); /* IE10+ */
    background: linear-gradient(to bottom, #683fa0 0%,#492b72 50%,#412157 100%); /* W3C */
      border: 1px solid #232300;
      box-shadow: 0 0 1px #b095d6 inset;
      border-radius: 4px; }
    
    .ctaFtThreadTitle  {border-bottom: 1px solid #442869; box-shadow: 0 1px 0 #724da3;}
    .ctaFtContainer a.ctaFtThreadTitleLink { color: #e1cbff; text-shadow: 0 1px 3px #153513; text-decoration: none; }
    .ctaFtContainer a.ctaFtThreadTitleLink:hover { opacity: 0.5; }
    
    .ctaFtThreadText { color: #b6a3d0; margin-top: 2px; }
    .ctaFtContainer  .ctaFtThreadText a { color: #e1cbff; font-weight: bold; }
    
    .ctaFtContainer .avatar .img {
    border: 1px solid #2f1b4a;
    background-color: #6b4b98;
    box-shadow: 0 0 3px #2f1b4a inset;  }
    
    
    .ctaFtBlock a.ctaFtReadMoreLink { color: #e1cbff; }
    .ctaFtFooter .ctaFtFeaturedThreadText { color: #e1cbff;  }
    
    .ctaFtBlock .ctaFtThreadTitle:after {
      background-color: #997ebf;
      border: 1px solid #472e6a;
      box-shadow: 0 2px 3px #432c62;
      color: #331f4f;
      content: "Featured";
      font-size: 11px;
      margin-left: 5px;
      padding: 0 5px;
      position: relative;
      top: -4px;
    }
    
    /* END Featured Thread Enhancement PURPLE END Start Featured Thread Enhancement PURPLE END */
    
    
     
    Last edited: Dec 13, 2013
    Mirovinger likes this.
  3. motowebmaster

    motowebmaster Active Member

    I created this alternative to light blue, but it isn't styling the featured thread text:

    Code:
    /* START Featured Thread Enhancement Blue START Start Featured Thread Enhancement Light Blue START */
    
    .ctaFtBlock .sectionMain.ctaFtContainer, .ctaFtBlockPage .sectionMain.ctaFtContainerPage {
      background: #4572b6; /* Old browsers */
      background: -moz-linear-gradient(top, #4572b6 0%, #36598d 50%, #2b4671 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4572b6), color-stop(50%,#36598d), color-stop(100%,#2b4671)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #4572b6 0%,#36598d 50%,#2b4671 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #4572b6 0%,#36598d 50%,#2b4671 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #4572b6 0%,#36598d 50%,#2b4671 100%); /* IE10+ */
      background: linear-gradient(to bottom, #4572b6 0%,#36598d 50%,#2b4671 100%); /* W3C */
      border: 1px solid #1f3352;
      box-shadow: 0 0 1px #a3badd inset;
      border-radius: 4px; }
    
    .ctaFtThreadTitle, .ctaFtThreadTitlePage  {border-bottom: 1px solid #2d4973; box-shadow: 0 1px 0 #5881bf;}
    .ctaFtContainer a.ctaFtThreadTitleLink, .ctaFtContainerPage a.ctaFtThreadTitleLinkPage { color: #c7d8f2; text-shadow: 0 1px 3px #111111; text-decoration: none; }
    .ctaFtContainer a.ctaFtThreadTitleLink:hover, .ctaFtContainerPage a.ctaFtThreadTitleLinkPage:hover { opacity: 0.5; }
    
    .ctaFtThreadText, .ctaFtThreadTextPage { color: #9eaec7; margin-top: 2px; }
    .ctaFtContainer  .ctaFtThreadText, .ctaFtContainerPage  .ctaFtThreadTextPage a { color: #c7d8f2; font-weight: bold; }
    
    .ctaFtContainer .avatar .img, .ctaFtContainerPage .avatar .img {
      border: 1px solid #2c4469;
      background-color: #5680c1;
      box-shadow: 0 0 3px #283e60 inset;  }
    
    a.ctaFtReadMoreLink, a.ctaFtReadMoreLinkPage { color: #c7d8f2; }
    .ctaFtFooter .ctaFtFeaturedThreadText, .ctaFtFooterPage .ctaFtFeaturedThreadTextPage { color: #c7d8f2; }
    
    /* END Featured Thread Enhancement Blue END Start Featured Thread Enhancement Light Blue END */
    It is wrapped in a DIV called:
    Code:
    <div class="ctaFtThreadTextAvatarPage a.ctaFtThreadTextAvatarPage baseHtml">
    Can't figure out how to change the color to a lighter color, it is currently dark. Probably due to something in my style properties but thought extra.css would over-ride that.
     
  4. Shelley

    Shelley Well-Known Member


    Add a closing div?

    Code:
    </div>
     

Share This Page