MyBB Community Forums
[For 1.8] [Tutorial] Flat Thread Prefix :) - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] [Tutorial] Flat Thread Prefix :) (/thread-162078.html)

Pages: 1 2

[Tutorial] Flat Thread Prefix :) - Shaniya - 2014-10-30

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  Heart

RE: [Totorial] Flat Thread Prefix :) - iturdu - 2014-12-24

Great Tutorial For Mybb 1.8 Lovers .

RE: [Totorial] Flat Thread Prefix :) - terzier - 2014-12-25

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

RE: [Totorial] Flat Thread Prefix :) - jinbatsu - 2015-01-09

Thanks, nice one.

RE: [Totorial] Flat Thread Prefix :) - koob - 2015-03-05

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

RE: [Totorial] Flat Thread Prefix :) - bekircem - 2015-04-25

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

Edit: It works now. Cache. Smile

RE: [Totorial] Flat Thread Prefix :) - Hectic - 2015-06-17

(2014-10-30, 03:28 PM)Shaniya Wrote: 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  Heart

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

RE: [Totorial] Flat Thread Prefix :) - eNvy - 2015-06-18

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;
}

Toungue

RE: [Totorial] Flat Thread Prefix :) - Crazycat - 2015-06-19

(2015-06-18, 05:02 PM)eNvy Wrote: 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;
}

Toungue

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.

RE: [Totorial] Flat Thread Prefix :) - eNvy - 2015-06-19

(2015-06-19, 08:01 AM)Crazycat Wrote:
(2015-06-18, 05:02 PM)eNvy Wrote: 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;
}

Toungue

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.