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

XF 1.2 Featured Thread In Forum

Shelley

Shelley

Well-known member
#6
#6
Ji2myTran said:
Hi Guys,

Anyone know how to do the Featured Thread in forum like below forum. It is look like a very nice forum notice :D

http://cliptheapex.com/

Thanks!
Click to expand...
It's a nice enhancement I have to admit, rather than template edits I'd prefer to see it as a paid add-on @borbole :D (permission based with some other backend options) And also have the featured tag on the right hand side of the title instead of under the avatar.

Though if the template mod was posted I'd still use it.
 
J

Ji2myTran

Active member
#7
#7
ya! i'm willing to purchase for that add-on as well if someone is selling it :D

Hi @Shelley :

Since you here, i just want to ask if you could help me to get the completed codes for the Banner Styles of above forum such as premium contributor, contributor,...

Ex like this thread:

http://cliptheapex.com/threads/jenson-button.3460/page-68#post-220092

I tried to get it using google chrome Inspect Element function, i got the codes but when replace the Banner Styles in my forum (default) or even in extra CSS, it still doesn't display correctly.

I know u are an master in CSS :D

Thanks! :ROFLMAO:
 
Last edited:
Shelley

Shelley

Well-known member
#8
#8
Ji2myTran said:
ya! i'm willing to purchase for that add-on as well if someone is selling it :D

Hi @Shelley :

Since you here, i just want to ask if you could help me to get the completed codes for the Banner Styles of above forum such as premium contributor, contributor,...

Ex like this thread:

http://cliptheapex.com/threads/jenson-button.3460/page-68#post-220092

I tried to get it using google chrome Inspect Element function, i got the codes but when replace the Banner Styles in my forum (default) or even in extra CSS, it still doesn't display correctly.

I know u are an master in CSS :D

Thanks! :ROFLMAO:
Click to expand...
Just had a little try on my site. Rather than explain it you can get the example from the screenshots.You could probably remove the padding but style to your preference and see what you prefer.

Screenshot_11.png Screenshot_12.png
Code: 
.userBanner {margin-left: 0 !important; margin-right: 0 !important;}
.userBanner.wrapped span.after, .userBanner.wrapped span.before {display: none;}

.adminrank {
  background: none #ea8b8b;
  border: 1px solid #b54b4b;
  padding: 0 5px;
  color: white;
  text-shadow: 0 0 1px #500f0f;
  text-align: center;
  font-size: 11px;
  border-radius: 0;}
 
.memberrank {
  background: none #c68ae2;
  border: 1px solid #9862b2;
  padding: 0 5px;
  color: white;
  text-shadow: 0 0 1px #42284e;
  text-align: center;
  font-size: 11px;
  border-radius: 0;}
Output of that >> Screenshot_13.png
 
Last edited:
Brogan

Brogan

XenForo moderator
Staff member
#11
#11
To answer the original post, it's currently a template edit which I hope to turn into an add-on when I have the time (shut it Deeming!), and knowledge.

As it stands, it's a bit of a pain to manually update so I don't think releasing it as an edit would be very useful for most people.

I do though have all of the framework done such as Style Properties, options and permissions.
Only the actual php coding is left to do.

For the banners, I have this:
Code: 
/* User group banners */
.userBanner {
background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 4px;
font-size: 10px;
font-weight: bold;
box-shadow: none;
}

.messageUserBlock .userBanner {
margin-top: 4px;
margin-bottom: 4px !important;
margin-right: 0px !important;
margin-left: 0px !important;
padding: 1px;
}

.messageUserBlock .userBanner:last-child {
margin-bottom: 0px !important;
}

.userBanner.wrapped span {
height: 0px;
}

.xenOverlay.memberCard .cardUserBanner {
margin: 4px 0;
}

.userBanner.bannerStaff {
background-color: @secondaryMedium;
border-color: @secondaryMedium;
color: @contentBackground;
text-shadow: 1px 1px 1px @secondaryMedium;
}

.cta-banner-supporter {
background-color: #000099;
border-color: #000099;
color: @contentBackground;
text-shadow: 1px 1px 1px #000099;
}

.cta-banner-contributor {
background-color: #6600CC;
border-color: #6600CC;
color: @contentBackground;
text-shadow: 1px 1px 1px #6600CC;
}

.cta-banner-valued-member {
background-color: #CC0000;
border-color: #CC0000;
color: @contentBackground;
text-shadow: 1px 1px 1px #CC0000;
}

.cta-banner-premium-contributor {
background-color: #FF6600;
border-color: #FF6600;
color: @contentBackground;
text-shadow: 1px 1px 1px #FF6600;
}
Then in the user groups add the corresponding classes to the custom field, e.g. userBanner cta-banner-contributor, userBanner cta-banner-premium-contributor, etc.

The guide Shelley referred to is here: http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/
 
Last edited:
You must log in or register to reply here.