Resource icon

Simple CSS Featured Thread Blocks

Overview Reviews (3) Discussion
Yeah, I saw that but assumed it was a limitation of doing it all in CSS. Without the avatar taking up space it does go all the way across. Your example in the purple version is the same way.
 
The Sandman said:
Yeah, I saw that but assumed it was a limitation of doing it all in CSS. Without the avatar taking up space it does go all the way across. Your example in the purple version is the same way.
Click to expand...

Not sure what your getting at. What is it you wanted the border to stop at the avatar like above? If so try adding the following obviously you'll have to add in your own preference of colour and box-shadow if you choose to add that in.

Code: 
.ctaFtBlock .ctaFtThreadContent {
border-bottom: 1px solid red;}

Screenshot_1.webp
 
Shelley said:
Not sure what your getting at. What is it you wanted the border to stop at the avatar like above? If so try adding the following obviously you'll have to add in your own preference of colour and box-shadow if you choose to add that in.
Click to expand...
Yes, that's it, the border stopping at the avatar as in your example. But, when I pasted your code in my template the border still went all the way across, under the avatar.
 
The Sandman said:
Yes, that's it, the border stopping at the avatar as in your example. But, when I pasted your code in my template the border still went all the way across, under the avatar.
Click to expand...

One sec, just about to apply the dark block on my dev site and i'll get back to you in a moment.
 
The Sandman said:
Yes, that's it, the border stopping at the avatar as in your example. But, when I pasted your code in my template the border still went all the way across, under the avatar.
Click to expand...

Okay, try the following. This seems to work though I had to add in a media query for responsive.

Screenshot_2.webp
Screenshot_3.webp

Code: 
/* START Featured Thread Enhancement dark START Start Featured Thread Enhancement dark START */

.ctaFtBlock .sectionMain.ctaFtContainer {
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #373737 50%, #181818 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#373737), color-stop(100%,#181818)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%,#373737 50%,#181818 100%); /* W3C */
  border: 1px solid #0c0c0c;
  box-shadow: 0 0 1px #b2b2b2 inset;
  border-radius: 4px; }

.ctaFtThreadTitle  {border-bottom: 1px solid #232323; box-shadow: 0 1px 0 #595959;}
.ctaFtContainer a.ctaFtThreadTitleLink { color: rgb(123,164,85); text-shadow: 0 1px 3px #111111; text-decoration: none; }
.ctaFtContainer a.ctaFtThreadTitleLink:hover { opacity: 0.5; }

.ctaFtThreadText { color: #b2b2b2; margin-top: 2px; }
.ctaFtContainer  .ctaFtThreadText a { color: rgb(123,164,85); font-weight: bold; }

.ctaFtContainer .avatar .img { border: 1px solid #232323; background-color: #2e2e2e; }

a.ctaFtReadMoreLink { color: rgb(123,164,85); }

.ctaFtBlock .ctaFtThreadContent { border-bottom: 1px solid #000; box-shadow: 0 1px 0 #3e3e3e; margin-left: 110px;}
.ctaFtBlock .ctaFtFooter { padding-top: 5px; }

@media (max-width:@maxResponsiveNarrowWidth)
{ .ctaFtBlock .ctaFtThreadContent {margin-left: 0; !important;} }

/* END Featured Thread Enhancement dark END Start Featured Thread Enhancement dark END */
 
Awesome work Shelly! Thank you!

If you happen to look at the Featured Threads on AdEx let me know your opinion on the colors - I'm thinking I could use a different color for the Featured Thread Title Link but I have no idea which way to go with it.
 
The Sandman said:
Awesome work Shelly! Thank you!

If you happen to look at the Featured Threads on AdEx let me know your opinion on the colors - I'm thinking I could use a different color for the Featured Thread Title Link but I have no idea which way to go with it.
Click to expand...

I think the title colour looks alright. But if you wanted to break the red out a little perhaps changing the following to

Code: 
.ctaFtFeaturedThreadText {
color: #B2B2B2;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< That's the text directly under the avatar.
 
Shelley said:
I think the title colour looks alright. But if you wanted to break the red out a little perhaps changing the following to

Code: 
.ctaFtFeaturedThreadText {
color: #B2B2B2;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< That's the text directly under the avatar.
Click to expand...
You don't happen to have a red colored link icon in your bag of tricks, do you? I'm thinking of a red link icon and the Read More text the same color as the Featured Thread text.
 
I do have various link icons but won't re-colour it red since I don't think it'll look good and secondly don't want this thread bombarded with requests. I would suggest searching though via google where I'm sure you'll find such an icon which fits this criteria or perhaps request for such a graphic in the Resources & Add-ons request area. Mainly because I don't think it'll look all that great, sorry.
 
The Sandman said:
You don't happen to have a red colored link icon in your bag of tricks, do you? I'm thinking of a red link icon and the Read More text the same color as the Featured Thread text.
Click to expand...

Just a sidenote. I don't know how your feature block looks the way it does but it just doesn't look right.

This is how it should look
Screenshot_4.webp


This is how it currently looks.
Screenshot_5.webp

The padding looks off on your version, with the "featured thread" text and "Read More..." text doesn't look aligned. Also, if you contract the block and re-size your browser in narrow responsive width your Ribbon still remains, you want to set it to disappear via media query when the browser hits narrowwidth responsive.
Screenshot_6.webp
 
Shelley said:
Just a sidenote. I don't know how your feature block looks the way it does but it just doesn't look right.
Click to expand...

I've removed all of the customizations on the Featured Threads except for the code you posted in Post #27 above. Could it be some kind of a conflict with my custom style?
 
The Sandman said:
I've removed all of the customizations on the Featured Threads except for the code you posted in Post #27 above. Could it be some kind of a conflict with my custom style?
Click to expand...

Not sure.

But i did have a fix ready but since you removed some of it I'm not sure whether this will still apply but the following will display it correctly though backup your featured thread code just in case since you have removed some stuff.

Add the following padding to
Code: 
.ctaFtBlock .sectionMain.ctaFtContainer { padding: 10px 10px 5px; }



Change the following values to
Code: 
.ctaFtBlock .helper { top: 65px; left: 8px;}



Change the following padding to
Code: 
.ctaFtContainer a.ctaFtReadMoreLink { padding: 0 5p 5px 20px; }



Look for the following
Code: 
@media (max-width:@maxResponsiveNarrowWidth)
{ .ctaFtBlock .ctaFtThreadContent {margin-left: 0; !important;} }



And replace it with the following
Code: 
@media (max-width:@maxResponsiveNarrowWidth)
{ .ctaFtBlock .ctaFtThreadContent {margin-left: 0; !important;}
.ctaFtBlock .helper, .ctaFtBlock .ctaFtThreadTitle:after {display: none !important;}  }



Change the following
Code: 
.forum_list .ctaFtThreadTitle:after


Replace it with
Code: 
.ctaFtBlock .ctaFtThreadTitle:after
 
I didn't discard the other customizations, just removed them for troubleshooting. I can put it back exactly as it was.
 
There's something wrong with the HTML/CSS.
The main .ctaFtBlock li encompasses the board title.

I have just checked in the default style (and AdEx 2.0) and it's fine, so it's an issue with the custom style you are using.
 
Thanks Brogan!

Here's the entirety of the code in my Extra.css pertaining to the Featured Threads. I'm sure I messed something up in there:
Code: 
.forum_list .ctaFtThreadTitle:after {
  background-color: #BE4F4F;
  border: 1px solid #902B2B;
  border-radius: 2px;
  color: white;
  content: "Featured";
  font-size: 10px;
  margin-left: 5px;
  padding: 0 5px;
  vertical-align: middle; }

  .ctaFtBlock .helper  {
  background: url("@imagePath/xenforo/icons/featured-ribbon.png") no-repeat scroll 0 0 transparent;
  content: "";
  height: 56px;
  position: relative;
  width: 56px;
  top: 58px;
  left: 6px;
  display: block;
  margin-top: -56px;
  z-index: 1;}

  .forum_view .ctaFtFeaturedThreadList {
  background: url("@imagePath/xenforo/icons/featured-icon.png") no-repeat 0 0 transparent;
  border: 0 solid #fff;
  width: 16px;
  height: 16px;
  font-size: 0; }

  .ctaFtContainer a.ctaFtReadMoreLink {
background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  padding: 5px 5px 5px 20px;}

  .ctaFtBlock .ctaFtThreadTitle:after {
  padding: 10px 10px 5px
  background-color: #BE4F4F;
  border: 1px solid #902B2B;
  border-radius: 2px;
  color: white;
  content: "Featured";
  font-size: 10px;
  margin-left: 5px;
  padding: 0 5px;
  vertical-align: middle; }

  .ctaFtBlock .helper  {
  background: url("@imagePath/xenforo/icons/featured-ribbon.png") no-repeat scroll 0 0 transparent;
  content: "";
  height: 56px;
  position: relative;
  width: 56px;
  top: 65px;
  left: 8px;
  display: block;
  margin-top: -56px;
  z-index: 1;}

  .forum_view .ctaFtFeaturedThreadList {
  background: url("@imagePath/xenforo/icons/featured-icon.png") no-repeat 0 0 transparent;
  border: 0 solid #fff;
  width: 16px;
  height: 16px;
  font-size: 0; }

  .ctaFtContainer a.ctaFtReadMoreLink {
background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  padding: 0 5px 5px 20px;}

/* START Featured Thread Enhancement dark START Start Featured Thread Enhancement dark START */

.ctaFtBlock .sectionMain.ctaFtContainer {
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #373737 50%, #181818 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#373737), color-stop(100%,#181818)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%,#373737 50%,#181818 100%); /* W3C */
  border: 1px solid #0c0c0c;
  box-shadow: 0 0 1px #b2b2b2 inset;,
  border-radius: 4px; }

.ctaFtThreadTitle  {border-bottom: 1px solid #232323; box-shadow: 0 1px 0 #595959;}
.ctaFtContainer a.ctaFtThreadTitleLink { color: rgb(212,51,51); text-shadow: 0 1px 3px #111111; text-decoration: none; }
.ctaFtContainer a.ctaFtThreadTitleLink:hover { opacity: 0.5; }

.ctaFtThreadText { color: #b2b2b2; margin-top: 2px; }
.ctaFtContainer  .ctaFtThreadText a { color: rgb(123,164,85); font-weight: bold; }

.ctaFtContainer .avatar .img { border: 1px solid #232323; background-color: #2e2e2e; }

a.ctaFtReadMoreLink { color: rgb(212,51,51); }

.ctaFtBlock .ctaFtThreadContent { border-bottom: 1px solid #000; box-shadow: 0 1px 0 #3e3e3e; margin-left: 110px;}
.ctaFtBlock .ctaFtFooter { padding-top: 5px; }

@media (max-width:@maxResponsiveNarrowWidth)
{ .ctaFtBlock .ctaFtThreadContent {margin-left: 0; !important;}
.ctaFtBlock .helper, .ctaFtBlock .ctaFtThreadTitle:after {display: none !important;}  }

/* END Featured Thread Enhancement dark END Start Featured Thread Enhancement dark END */
 
The Sandman said:
Thanks Brogan!

Here's the entirety of the code in my Extra.css pertaining to the Featured Threads. I'm sure I messed something up in there:
Code: 
.forum_list .ctaFtThreadTitle:after {
  background-color: #BE4F4F;
  border: 1px solid #902B2B;
  border-radius: 2px;
  color: white;
  content: "Featured";
  font-size: 10px;
  margin-left: 5px;
  padding: 0 5px;
  vertical-align: middle; }

  .ctaFtBlock .helper  {
  background: url("@imagePath/xenforo/icons/featured-ribbon.png") no-repeat scroll 0 0 transparent;
  content: "";
  height: 56px;
  position: relative;
  width: 56px;
  top: 58px;
  left: 6px;
  display: block;
  margin-top: -56px;
  z-index: 1;}

  .forum_view .ctaFtFeaturedThreadList {
  background: url("@imagePath/xenforo/icons/featured-icon.png") no-repeat 0 0 transparent;
  border: 0 solid #fff;
  width: 16px;
  height: 16px;
  font-size: 0; }

  .ctaFtContainer a.ctaFtReadMoreLink {
background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  padding: 5px 5px 5px 20px;}

  .ctaFtBlock .ctaFtThreadTitle:after {
  padding: 10px 10px 5px
  background-color: #BE4F4F;
  border: 1px solid #902B2B;
  border-radius: 2px;
  color: white;
  content: "Featured";
  font-size: 10px;
  margin-left: 5px;
  padding: 0 5px;
  vertical-align: middle; }

  .ctaFtBlock .helper  {
  background: url("@imagePath/xenforo/icons/featured-ribbon.png") no-repeat scroll 0 0 transparent;
  content: "";
  height: 56px;
  position: relative;
  width: 56px;
  top: 65px;
  left: 8px;
  display: block;
  margin-top: -56px;
  z-index: 1;}

  .forum_view .ctaFtFeaturedThreadList {
  background: url("@imagePath/xenforo/icons/featured-icon.png") no-repeat 0 0 transparent;
  border: 0 solid #fff;
  width: 16px;
  height: 16px;
  font-size: 0; }

  .ctaFtContainer a.ctaFtReadMoreLink {
background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  padding: 0 5px 5px 20px;}

/* START Featured Thread Enhancement dark START Start Featured Thread Enhancement dark START */

.ctaFtBlock .sectionMain.ctaFtContainer {
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #373737 50%, #181818 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#373737), color-stop(100%,#181818)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#373737 50%,#181818 100%); /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%,#373737 50%,#181818 100%); /* W3C */
  border: 1px solid #0c0c0c;
  box-shadow: 0 0 1px #b2b2b2 inset;,
  border-radius: 4px; }

.ctaFtThreadTitle  {border-bottom: 1px solid #232323; box-shadow: 0 1px 0 #595959;}
.ctaFtContainer a.ctaFtThreadTitleLink { color: rgb(212,51,51); text-shadow: 0 1px 3px #111111; text-decoration: none; }
.ctaFtContainer a.ctaFtThreadTitleLink:hover { opacity: 0.5; }

.ctaFtThreadText { color: #b2b2b2; margin-top: 2px; }
.ctaFtContainer  .ctaFtThreadText a { color: rgb(123,164,85); font-weight: bold; }

.ctaFtContainer .avatar .img { border: 1px solid #232323; background-color: #2e2e2e; }

a.ctaFtReadMoreLink { color: rgb(212,51,51); }

.ctaFtBlock .ctaFtThreadContent { border-bottom: 1px solid #000; box-shadow: 0 1px 0 #3e3e3e; margin-left: 110px;}
.ctaFtBlock .ctaFtFooter { padding-top: 5px; }

@media (max-width:@maxResponsiveNarrowWidth)
{ .ctaFtBlock .ctaFtThreadContent {margin-left: 0; !important;}
.ctaFtBlock .helper, .ctaFtBlock .ctaFtThreadTitle:after {display: none !important;}  }

/* END Featured Thread Enhancement dark END Start Featured Thread Enhancement dark END */
Click to expand...

add padding-top to the

Code: 
.ctaFtBlock .sectionMain.ctaFtContainer {padding-top: 10px;}
 
You must log in or register to reply here.
Top Bottom