XF 1.3 Prefix styles

drastic

drastic

Well-known member
Anyone have a css code I can borrow to make my prefixes have a flat look...and change some colors?

I want to make them match my style a bit more.

thanks!
 
Sort by date Sort by votes
That indicates there is a problem somewhere in your EXTRA.css template.

If you paste it here in a code block I should be able to tell you what it is.
 
  • Like
Reactions: sbj
Upvote 0 Downvote
Brogan said:
If you paste it here in a code block I should be able to tell you what it is.
Click to expand...
Hi Brogan
Here it is:
/* Donation link color in navigation */

.navTabs .navTab.donations.PopupClosed .navLink {
color: #F90 !important;

}
.navTabs .navTab.nodetab131.PopupClosed .navLink {
color: #019875 !important;
}

.navTabs .navTab.arcade.PopupClosed .navLink {
color: #318CE7 !important;
}
/* Donation link color in navigation */

.navTabs .navTab.donations.PopupClosed .navLink {
color: #f9bc6d!important;
}

/* Text Link Image */
.message .messageText a, .bbCodeQuote a, .Notice a {
padding-right: 5px;
margin-right: 0px;

background-position: right;
-moz-transition: all 0.7s ease-out 0s;
-o-transition: all 0.7s ease-out 0s;
-webkit-transition: all 0.7s ease-out 0s;
transition-duration: 0.7s;
transition-timing-function: ease-out;
transition-delay: 0;
color: #e68c17;
}
.message .messageText a:hover, .bbCodeQuote a:hover, .Notice a:hover {
padding-left: 23px;
padding-right: 5px;
margin-left: 0;
color: #000;
background: url("http://www.forum-des-portables-asus.fr/forums/img/link-icon.png") no-repeat scroll left transparent;
box-shadow: none !important;
-moz-transition: all 0.7s ease-in-out 0s;
-o-transition: all 0.7s ease-in-out 0s;
-webkit-transition: all 0.7s ease-in-out 0s;
transition-duration: 0.7s;
transition-timing-function: ease-in-out;
transition-delay: 0;
opacity: 0.8;
}
.bbCodeQuote a, .bbCodeQuote a:hover
{
@property "baseHtml signature ugc";
padding-left: 5px !important;
background: none transparent !important;
@property "/baseHtml signature ugc";
}

/* File Attached Box Design */

.attachedFiles {
border: 1px solid #@secondaryMedium!important;
margin: 1em 0px 1em 0 !important;
}
.attachedFiles .attachedFilesHeader {
background: none repeat-x scroll center top @quattroGridBorder !important;
border-bottom: 0px solid #A5CAE4 !important;
color: #3f5426 !important;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
font-size: 10px;
}
.attachedFiles .attachmentList {
background: none repeat-x scroll center top @quattroTextBoxBckg !important;
border-radius: 0px 0px 5px 5px !important;
overflow: hidden;
padding: 5px 10px 0 !important;
}
.attachment .boxModelFixer {
background-color: none !important;
background:url("@imagePath/xenforo/gradients/attach-gradient.png") repeat-x scroll center bottom #fce4c4!important;
border: 1px solid @quattroGridBorder !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 5px 5px 5px 5px;
color: #000;
font: bold 5px/5px Arial,sans-serif !important;

padding: 5px;
}
.attachment .thumbnail {
border-right: 1px solid #f7d09d!important;
box-shadow: 1px 0px 0px 0px #fff4e5;
}
.attachment .attachmentInfo .filename a {

font: bold 12px/10px Arial,sans-serif;
color: @dimmedTextColor!important;
}
.attachment .boxModelFixer .pairsJustified dt {
color: @dimmedTextColor !important;
}
.attachment .thumbnail .genericAttachment {
background: url("@imagePath/xenforo/icons/download.png") no-repeat scroll 0 0 transparent !important;
}
.attachment .thumbnail .genericAttachment {
background: url("/www/img/download2.png") no-repeat scroll 0 0 transparent !important;



.Tinhte_XenTag_TagsInlineEditor a {
display: inline-block;
height: 21px;
margin: 0 10px 0 0;
padding: 0 7px 0 14px;
white-space: nowrap;
position: relative;
background-color: #DADBDF;
color: rgb(82, 82, 82);
font: bold 11px/21px Arial, Tahoma, sans-serif;
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.4);
border-top: 1px solid #CACACB;
border-bottom: 1px solid #CACACB;
border-right: 1px solid #CACACB;
border-radius: 1px 3px 3px 1px;
}


a.Tinhte_XenTag_TagLink {
background: url(https://*******.com/styles/*******/brv4/xenforo/tag.png) no-repeat left;
padding-left: 21px !important;
padding-right: 10px !important;
margin: 0 5px !important;
color: #ff7800;
display: inline-block;
font-weight: normal;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

/* Template Wiki */
.subHeading2 {
color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;
}


.kankan {
background-color: #1381BE;
border: 1px solid #278EDF !important;
border-radius: 0px !important;
box-shadow: 0 0 1px #F9F9F9 inset;
color: #FFFFFF;
display: inline-block;
font-size: 12px;
font-family:Georgia,Times New Roman,serif;
font-weight: bold;
line-height: 18px;
padding: 0 12px;
vertical-align: middle;
}
.kankan:before
{
content: "\f0eb";
font-family: FontAwesome;
margin-right: 5px;
font-weight: normal;
font-size: 110%;
}
Click to expand...
 
Upvote 0 Downvote
You are missing a closing } here:
Code: 
.attachment .thumbnail .genericAttachment {
background: url("/www/img/download2.png") no-repeat scroll 0 0 transparent !important;

I don't know why you have that declared twice anyway:
Code: 
.attachment .thumbnail .genericAttachment {
background: url("@imagePath/xenforo/icons/download.png") no-repeat scroll 0 0 transparent !important;
}
.attachment .thumbnail .genericAttachment {
background: url("/www/img/download2.png") no-repeat scroll 0 0 transparent !important;
 
Upvote 0 Downvote
Yes this is a duplicate. thanks for mentioning :)

Another question for CSS designer expert :

Prefix displayed in Thread list is correct :

2015-03-14 00_06_29-Corbeille et Bac à sable _ Le forum des portables Asus.webp

But when displayed on Thread page, there is some kind of blur effect on letters :

2015-03-14 00_06_50-kankan - test de prefixe _ Le forum des portables Asus.webp

My code :

.kankan {
background-color: #1381BE;
border: 1px solid #278EDF !important;
border-radius: 0px !important;
box-shadow: 0 0 1px #F9F9F9 inset;
color: #FFFFFF;
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 0 12px;
vertical-align: middle;
}
.kankan:before
{
content: "\f0eb";
font-family: FontAwesome;
margin-right: 5px;
font-weight: normal;
font-size: 110%;
}
Click to expand...

Anyway to fix this ?
 
Last edited:
Upvote 0 Downvote
Found the cause but not fixed the issue

When i remove color: #FFFFFF; from extra.css
white text is still displayed in prefix bloc in thread and is ok without bluring effect but in thread list text disappeared.
seems there is a doublon, white text is already present by default prefix in thread list.
 
Last edited:
Upvote 0 Downvote
Steve F said:
View attachment 73911

Code: 
.suggestion {
    background-color: #1381BE;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}

With Font Awesome icon before title.

Code: 
.suggestion:before
{
    content: "\f0eb";
    font-family: FontAwesome;
    margin-right: 5px;
    font-weight: normal;
    font-size: 110%;
}
Click to expand...

Hi Steve,

Is there a way to add this into another file other than EXTRA.css? I use Fusion Gamer and notice your prefix/banner code is in another template which I've been adding custom colours too but I'd like a fresh template just for prefixes if possible.

Thanks
 
Upvote 0 Downvote
Zynaphix said:
Hi Steve,

Is there a way to add this into another file other than EXTRA.css? I use Fusion Gamer and notice your prefix/banner code is in another template which I've been adding custom colours too but I'd like a fresh template just for prefixes if possible.

Thanks
Click to expand...

Create a new template and include it at the top of extra.css:

Code: 
<xen:include template="customtemplate.css" />
 
Upvote 0 Downvote
Russ said:
Create a new template and include it at the top of extra.css:

Code: 
<xen:include template="customtemplate.css" />
Click to expand...

Hmm, since you've modified my templates, is it the xb_custom_style.css on the dark theme or xenbase I would add this to to apply it globally and once done, on a prefix do I just use the name on a custom prefix, so if my .css file has .Blue I use Blue on the prefix field?
 
Upvote 0 Downvote
Zynaphix said:
Hmm, since you've modified my templates, is it the xb_custom_style.css on the dark theme or xenbase I would add this to to apply it globally and once done, on a prefix do I just use the name on a custom prefix, so if my .css file has .Blue I use Blue on the prefix field?
Click to expand...

I think it would be, I'm not at my computer but I believe that would be appropriate.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Mr Lucky
  • Question Question
XF 2.2 2.3.0 beta Convert pre-existing style to have alternate light/dark mode
Replies
1
Views
180
Chris D
Chris D
Geiri
  • Question Question
Prefix permission for users
Replies
4
Views
757
mjda
mjda
R
  • Question Question
XF 2.2 Font colors in editor?
Replies
0
Views
146
Robert9
R
M
  • Question Question
css file location for styles
Replies
4
Views
439
Mr Lucky
Mr Lucky
Mr Lucky
Making a custom style (for absolute beginners)
Replies
6
Views
654
Wildcat Media
Wildcat Media
Top Bottom