[For 1.8] [Tutorial] Flat Thread Prefix :)

[Shaniya]

If you want have a flat thread prefix like this (     )

first)
Templates & Style > Themes > Your Theme > Global.css > Edit Stylesheet: Advanced Mode

Add this code under codes.

.niyaprefix {
height: 4px;
line-height: 4px;
vertical-align: middle;
display: inline-block;
padding: 5px;
font-size: 9px;
font-weight: bold;
color: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-repeat: repeat-x;
background-position: 0 -1px;
margin-bottom: 3PX;
}

second)
Configuartion > Thread Prefixes > Add New Thread Prefix

Prefix : For Example
Display Style :

<span class="niyaprefix" style="color:white;background: #flatcolorhash;">For example </span>

For give flatcolorhash view Flat Ui Colors.

Thank you  

[iturdu]

Great Tutorial For Mybb 1.8 Lovers .

[terzier]

already know how to make it. but, thank you for sharing and reminded again. 

[jinbatsu]

Thanks, nice one.

[koob]

Amazing. I thought I needed a plugin! Thank you for sharing!

[bekircem]

It works on Mozilla Firefox but don't work on Google Chrome. Why?

Edit: It works now. Cache.

[Hectic]

If you want have a flat thread prefix like this ()

first)
Templates & Style > Themes > Your Theme > Global.css > Edit Stylesheet: Advanced Mode

Add this code under codes.

.niyaprefix {
height: 4px;
line-height: 4px;
vertical-align: middle;
display: inline-block;
padding: 5px;
font-size: 9px;
font-weight: bold;
color: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-repeat: repeat-x;
background-position: 0 -1px;
margin-bottom: 3PX;
}

second)
Configuartion > Thread Prefixes > Add New Thread Prefix

Prefix : For Example
Display Style :

<span class="niyaprefix" style="color:white;background: #flatcolorhash;">For example </span>

For give flatcolorhash view Flat Ui Colors.

Thank you  

I tried this, except mine isnt rounded it's just rectangle? even though i copied it exactly?

[eNvy]

I don't get why you use a "style" property directly on the element when you can simply put the color and the background in the class, like this:

.niyaprefix {
    color: #FFFFFF !important;
    background: #00b4ff;
}

[Crazycat]

I don't get why you use a "style" property directly on the element when you can simply put the color and the background in the class, like this:

.niyaprefix {
    color: #FFFFFF !important;
    background: #00b4ff;
}

The css part is done to have rounded prefix, but the style in the element is to allow the admin to have the colors he wants in the prefix, because he probably don't want to have all his prefix with the same colors.
But having a default color & background in the CSS is not a bad idea.

[eNvy]

I don't get why you use a "style" property directly on the element when you can simply put the color and the background in the class, like this:

.niyaprefix {
    color: #FFFFFF !important;
    background: #00b4ff;
}

The css part is done to have rounded prefix, but the style in the element is to allow the admin to have the colors he wants in the prefix, because he probably don't want to have all his prefix with the same colors.
But having a default color & background in the CSS is not a bad idea.

I assume you won't be using the same class for each prefix... but I get the point.