Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Add simple css and fontawesome userbars for usertitle
#11
(09-17-2018, 06:51 PM)vintagedaddyo Wrote: You can simply try something like this for simple fontawesome css userbars.

In headerinclude add:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

in postbit and postbit_classic find:

{$post['usertitle']}


replace with:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>



In member_profile find:


({$usertitle})<br />



Replace with:

<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />



Add to global.css:



.grouptag {
	display: inline-block;
	padding: 3px 5px;
	border-radius: 3px;
	font-family: "FontAwesome";
	font-weight: 600;
}

.grouptag.Administrator:before {
	content: "\f013";
}

.grouptag.Moderator:before {
	content: "\f0e3";
}

.grouptag.Member:before {
	content: "\f007";
}

.grouptag.Administrator {
	border: 1px solid green;
	background: green;
	color: #ffffff;
}

.grouptag.Moderator {
	background: purple;
	border: 1px solid purple;
	color: #ffffff;
}

.grouptag.Member {
	background: blue;
	border: 1px solid blue;
	color: #ffffff;
}


You can then simply modify and expand upon that...


Hi vintagedaddyo, thank you for the tutorial, its amazing!  Cool


i have a issue, in mi test forum, used that code, and work perfect, can check a test thread.

But when used that code in my personal web, not working  Huh , can check a thread

Note:
The files with the code its ok, can see the pics:
- HeaderInclude Template
- Posbit Templante
- Global.css file


Thanks in advance for the support

bye
Reply
#12
(09-22-2018, 01:50 AM)DiegoPino Wrote:
(09-17-2018, 06:51 PM)vintagedaddyo Wrote: You can simply try something like this for simple fontawesome css userbars.

In headerinclude add:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

in postbit and postbit_classic find:

{$post['usertitle']}


replace with:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>



In member_profile find:


({$usertitle})<br />



Replace with:

<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />



Add to global.css:



.grouptag {
	display: inline-block;
	padding: 3px 5px;
	border-radius: 3px;
	font-family: "FontAwesome";
	font-weight: 600;
}

.grouptag.Administrator:before {
	content: "\f013";
}

.grouptag.Moderator:before {
	content: "\f0e3";
}

.grouptag.Member:before {
	content: "\f007";
}

.grouptag.Administrator {
	border: 1px solid green;
	background: green;
	color: #ffffff;
}

.grouptag.Moderator {
	background: purple;
	border: 1px solid purple;
	color: #ffffff;
}

.grouptag.Member {
	background: blue;
	border: 1px solid blue;
	color: #ffffff;
}


You can then simply modify and expand upon that...


Hi vintagedaddyo, thank you for the tutorial, its amazing!  Cool


i have a issue, in mi test forum, used that code, and work perfect, can check a test thread.

But when used that code in my personal web, not working  Huh , can check a thread

Note:
The files with the code its ok, can see the pics:
- HeaderInclude Template
- Posbit Templante
- Global.css file


Thanks in advance for the support

bye

Have you tried adding something like the class:

"Administrador.del.Sitio.Web.Personal"

.grouptag.Administrador.del.Sitio.Web.Personal:before {
content: "\f013";
}
.grouptag.Administrador.del.Sitio.Web.Personal {
border: 1px solid green;
background: green;
color: #ffffff;
}

Also after viewing your links, this:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>


Should have a:

<br />

After it so that stars sit below rather than beside it.

Anyhoo, the one downside to the first method I shared is that the usertitle must be defined exactly in the css..., so custom usertitles wont be styled unless exactly defined in the css.


The gid method in theory does not require defining usetitle  and should pull any gid # that is defined in the css
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#13
(09-22-2018, 11:32 PM)vintagedaddyo Wrote: Have you tried adding something like the class:

"Administrador.del.Sitio.Web.Personal"

.grouptag.Administrador.del.Sitio.Web.Personal:before {
content: "\f013";
}
.grouptag.Administrador.del.Sitio.Web.Personal {
border: 1px solid green;
background: green;
color: #ffffff;
}

Also after viewing your links, this:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>


Should have a:

<br />

After it so that stars sit below rather than beside it.

Anyhoo, the one downside to the first method I shared is that the usertitle must be defined exactly in the css..., so custom usertitles wont be styled unless exactly defined in the css.


The gid method in theory does not require defining usetitle  and should pull any gid # that is defined in the css

Big Grin  Thank Yo So Much vintagedaddyo.  Now can fix the issue!

Very Good the Performance and tutorial  Cool

Best Regards!
Reply
#14
(09-22-2018, 11:32 PM)vintagedaddyo Wrote:
(09-22-2018, 01:50 AM)DiegoPino Wrote:
(09-17-2018, 06:51 PM)vintagedaddyo Wrote: You can simply try something like this for simple fontawesome css userbars.

In headerinclude add:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

in postbit and postbit_classic find:

{$post['usertitle']}


replace with:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>



In member_profile find:


({$usertitle})<br />



Replace with:

<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />



Add to global.css:



.grouptag {
	display: inline-block;
	padding: 3px 5px;
	border-radius: 3px;
	font-family: "FontAwesome";
	font-weight: 600;
}

.grouptag.Administrator:before {
	content: "\f013";
}

.grouptag.Moderator:before {
	content: "\f0e3";
}

.grouptag.Member:before {
	content: "\f007";
}

.grouptag.Administrator {
	border: 1px solid green;
	background: green;
	color: #ffffff;
}

.grouptag.Moderator {
	background: purple;
	border: 1px solid purple;
	color: #ffffff;
}

.grouptag.Member {
	background: blue;
	border: 1px solid blue;
	color: #ffffff;
}


You can then simply modify and expand upon that...


Hi vintagedaddyo, thank you for the tutorial, its amazing!  Cool


i have a issue, in mi test forum, used that code, and work perfect, can check a test thread.

But when used that code in my personal web, not working  Huh , can check a thread

Note:
The files with the code its ok, can see the pics:
- HeaderInclude Template
- Posbit Templante
- Global.css file


Thanks in advance for the support

bye

Have you tried adding something like the class:

"Administrador.del.Sitio.Web.Personal"

.grouptag.Administrador.del.Sitio.Web.Personal:before {
content: "\f013";
}
.grouptag.Administrador.del.Sitio.Web.Personal {
border: 1px solid green;
background: green;
color: #ffffff;
}

Also after viewing your links, this:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>


Should have a:

<br />

After it so that stars sit below rather than beside it.

Anyhoo, the one downside to the first method I shared is that the usertitle must be defined exactly in the css..., so custom usertitles wont be styled unless exactly defined in the css.


The gid method in theory does not require defining usetitle  and should pull any gid # that is defined in the css
i have a question still kinda question on the gid method where do I put it?
Reply
#15
(09-23-2018, 03:21 PM)DevLife Wrote: i have a question still kinda question on the gid method where do I put it?

@devlife

The question can be asked here as both options were posted in this tutorial. As long as one clarifies using the non-gid or gid method it should be fine and allow me to know what  the end-user is asking about. Also the end user can quote and reply from the specific instructions if that makes it easier to clarify.

For example:

Non-GID Method

GID Method
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#16
I'm again here to ask for something more difficult now.

Currently,my forum is using fontawesome userbars,as you already know.

Is it possibile to assign more userbars to one user using fontawesome?

Now,i can say that the userbars can be made easily after your brilliant tutorial but how to assign more than one userbar to the same user using fontawesome?

I read something about php and template conditionals but i couldn't get the results i'm currently looking for.

Thanks in advance.
Reply
#17
@kbilly

Yes it is possible but it would not be related to this tutorial and here is why: this tutorial modifies the usertitle and does not touch the groupimage. Also as this is usertitle focus just note that a user only has one usertitle. Groupimage is completely different and there can be more than one group image. Now this type of thing could also be done to the groupimage to replace image with fa and css but that indeed would be a seperate tutorial as the focus is on a completely different item. So as far as this tutorial is concerned, I will not focus on an unrelated item. Anyhoo, just a thought but, the labeltext plugin I mentioned before to you allows to have 2 group images in theory and in theory the plugin could be modified with css and fa. Also, in theory the 2 groupimage without plugin tutorial that uses php in templates plugin or php and template conditionals plugin could be modified to use css and fa rather than image.
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#18
Thanks for clearing my doubts,i got confused between these two things,usertitle and userimage.

So,let me see what i can do with the plugins you mentioned and in case,i can't,i will open a separate thread.

Thankyou as always.
Reply
#19
(09-30-2018, 03:07 PM)kbilly Wrote: Thanks for clearing my doubts,i got confused between these two things,usertitle and userimage.

I am cofused too about that... but Nevermind the perfotmance in theme its AMaAIZING!
Reply
#20
Does not work I added a VIP rank it displays nothing https://imgur.com/a/Ne2mZDt
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)