Simple CSS Featured Thread Blocks

[Shelley]

Better?

Yup, that seems to have corrected it.

 

[The Sandman]

Yup, that seems to have corrected it.

Thanks for all the help - that was a tricky one!

 

[Allan]

For display on page (version 1.4.2 of CTA)
Change:

/* START Featured Thread Enhancement Blue START Start Featured Thread Enhancement Blue START */

.ctaFtBlock .sectionMain.ctaFtContainer {
  background: #0a7691; /* Old browsers */
  background: -moz-linear-gradient(top, #0a7691 0%, #064d5f 50%, #042f3a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a7691), color-stop(50%,#064d5f), color-stop(100%,#042f3a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* IE10+ */
  background: linear-gradient(to bottom, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* W3C */
  border: 1px solid #021e25;
  box-shadow: 0 0 1px #8dbfcb inset;
  border-radius: 4px; }

.ctaFtThreadTitle  {border-bottom: 1px solid #053e4c; box-shadow: 0 1px 0 #1c7e97;}
.ctaFtContainer a.ctaFtThreadTitleLink { color: #acd7e2; text-shadow: 0 1px 3px #111111; text-decoration: none; }
.ctaFtContainer a.ctaFtThreadTitleLink:hover { opacity: 0.5; }

.ctaFtThreadText { color: #88b8c4; margin-top: 2px; }
.ctaFtContainer  .ctaFtThreadText a { color: #acd7e2; font-weight: bold; }

.ctaFtContainer .avatar .img {
  border: 1px solid #062e38;
  background-color: #167f99;
  box-shadow: 0 0 3px #04313c inset;  }

a.ctaFtReadMoreLink { color: #acd7e2; }
.ctaFtFooter .ctaFtFeaturedThreadText { color: #88b8c4; }

/* END Featured Thread Enhancement Blue END Start Featured Thread Enhancement Blue END */

By:

/* START Featured Thread Enhancement Blue START Start Featured Thread Enhancement Blue START */

.ctaFtBlock .sectionMain.ctaFtContainer, .ctaFtBlockPage .sectionMain.ctaFtContainerPage {
  background: #0a7691; /* Old browsers */
  background: -moz-linear-gradient(top, #0a7691 0%, #064d5f 50%, #042f3a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a7691), color-stop(50%,#064d5f), color-stop(100%,#042f3a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* IE10+ */
  background: linear-gradient(to bottom, #0a7691 0%,#064d5f 50%,#042f3a 100%); /* W3C */
  border: 1px solid #021e25;
  box-shadow: 0 0 1px #8dbfcb inset;
  border-radius: 4px; }

.ctaFtThreadTitle, .ctaFtThreadTitlePage  {border-bottom: 1px solid #053e4c; box-shadow: 0 1px 0 #1c7e97;}
.ctaFtContainer a.ctaFtThreadTitleLink, .ctaFtContainerPage a.ctaFtThreadTitleLinkPage { color: #acd7e2; text-shadow: 0 1px 3px #111111; text-decoration: none; }
.ctaFtContainer a.ctaFtThreadTitleLink:hover, .ctaFtContainerPage a.ctaFtThreadTitleLinkPage:hover { opacity: 0.5; }

.ctaFtThreadText, .ctaFtThreadTextPage { color: #88b8c4; margin-top: 2px; }
.ctaFtContainer  .ctaFtThreadText, .ctaFtContainerPage  .ctaFtThreadTextPage a { color: #acd7e2; font-weight: bold; }

.ctaFtContainer .avatar .img, .ctaFtContainerPage .avatar .img {
  border: 1px solid #062e38;
  background-color: #167f99;
  box-shadow: 0 0 3px #04313c inset;  }

a.ctaFtReadMoreLink, a.ctaFtReadMoreLinkPage { color: #acd7e2; }
.ctaFtFooter .ctaFtFeaturedThreadText, .ctaFtFooterPage .ctaFtFeaturedThreadTextPage { color: #88b8c4; }

/* END Featured Thread Enhancement Blue END Start Featured Thread Enhancement Blue END */

In this example, for blue version. Take example for other colors.

 

[wickedstangs]

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.
View attachment 62938

@Shelley , can you give me a hand trying to make my List Notices look like the red one? Is this possible?