Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Webmaster Mybb - Prefixes Display Style
#1
1-Prefix:Plain text version of the prefix to be displayed in selection menus.
[Image: 68747470733a2f2f6934312e73657276696d672e...302e6a7067]
2-Display Style:This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use text .
Some examples
[Image: 68747470733a2f2f6934312e73657276696d672e...312e6a7067]
Tutorial
Code:
<span class="anonprefix" style="color:white;background-color: #00FF00;border-radius: 30px;border: 2px solid #00FF00;">Tutorial</span>
Translations
 
Code:
<span class="anonprefix" style="color:white;background-color: #E6E6FA;border-radius: 30px;border: 2px solid #E6E6FA;">Translations</span>
 

Theme
 
Code:
<span class="anonprefix" style="color:white;background-color: #7B68EE;border-radius: 30px;border: 2px solid #7B68EE;">Theme</span>
 

Information
 
Code:
<span class="anonprefix" style="color:white;background-color: #0000CD;border-radius: 30px;border: 2px solid #0000CD;">Information</span>
 

Important
Code:
<span class="anonprefix" style="color:white;background-color: red;border-radius: 30px;border: 2px solid red;">Important</span>
 

Plugin
Code:
<span class="anonprefix" style="color:white;background-color: #BA55D3;border-radius: 30px;border: 2px solid #BA55D3;">Plugin</span>
if you like those examples just change the color to whatever you want and the border radius

YouTube video
[Image: gf947PF.png]
#2
Awesome tutorial! Thanks Mastersly!
#3
The reason i dont add the css in global.css in because  i have a problem and when i add css in global.css it dont work.. its like I didn't put it there..but i think it more easy like this i think..
I am gonna add more tutorials these days
[Image: gf947PF.png]
#4
(01-10-2020, 09:28 AM)Mastersly Wrote: The reason i dont add the css in global.css in because  i have a problem and when i add css in global.css it dont work.. its like I didn't put it there..but i think it more easy like this i think..
I am gonna add more tutorials these days

CSS can be tricky. Every theme is different too so there's no universal way. Whatever works.

Any and all are appreciated!
#5
I add a YouTube video too
[Image: gf947PF.png]
#6
In this Thread i am gonna share my prefixes style i have on my forum

HTML
Code:
<span class="Tutorialprefix1"><i class="fa fa-gear" style="font-size:16px"></i>1.6</span>
Code:
<span class="MobilePhoneprefix1"><i style="font-size:16px" class="fa">&#xf10a;</i>Android</span>
Code:
<span class="Forumprefixe1"><i style="font-size:16px" class="fa">&#xf0e6;</i>Blog</span>
Code:
<span class="adminprefixeds1"><i style="font-size:16px" class="fa">&#xf005;</i>Information</span>
css
Code:
.Tutorialprefix1 {
background-color: #bd9c52!important;
    border-color: #a3833e!important;
    color: #fff!important;
    padding: 0 4px 0 2px;
}

.Forumprefixe1 {
background-color: #ff9800!important;
    border-color: #cc7a00!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0 1px 0 1px;
}

.MobilePhoneprefix1{
background-color: #03a9f4!important;
    border-color: #0287c3!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0px 1px 0 1px;
}

.adminprefixeds1{
background-color: #692525!important;
    border-color: #581222!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0px 1px 0 1px;
}

Of course you can use them

Example
[Image: FS4bJql.png]
[Image: h5lBDzp.png]
[Image: Oe0qLmo.png]
[Image: c8k2gKb.png]
[Image: oUIdPxi.png]
[Image: gf947PF.png]
#7
Nice guide, keep up the good work.
#8
Very nice tutorial! I enjoyed it to be honest very informative and easy to follow. Keep the good work I will be looking out for your threads.
#9
thanks guys, I will post more tutorials soon
[Image: gf947PF.png]


Forum Jump:


Users browsing this thread: 1 Guest(s)


Powered by © 2002-2020 MyBB Group.
Theme by CreWix. Fixed by Tomik. Customized for Aeowulf.