Simple CSS Featured Thread Blocks (Part 2)

[Shelley]

Shelley submitted a new resource:

Simple CSS Featured Thread Blocks (Part 2) - More Simple css featured thread styled blocks

You will need to have Purchased and installed the Featured Thread add-on by Brogan for this enhancement to work. ​

View attachment 62944
Summary: A bright red style featured thread block using a css3 gradient and background-color fall back for older browsers.

Note: most if not all of this can be styled via the...

Read more about this resource...

 

[Shelley]

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.



Install: Same rule, Paste in your EXTRA.CSS template.

/* 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 */

 

[motowebmaster]

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

/* 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:

<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.

 

[Shelley]

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

/* 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:

<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.

Add a closing div?

</div>