MyBB Community Forums

Full Version: Make userbars using css
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hello everyone!

I was trying to make some good userbars using this tutorial

After making the neccessary modifications,i'm having some issues as the userbars are being shown only on the forum's index page,where i'm currently using the Adavanced sidebox 3.1.12 plugin.

[attachment=40821]

So,you can see that there it is working.

My problem is that i'm not able to see the changes on the profile page and in the postbit.

[attachment=40819]
[attachment=40820]
[attachment=40822]

My forum is running the latest version of MyBB with Dark1.8 theme.

Any help would be really appreciated.

Regards.
Does it work on the default theme?

If it works in one place, and not somewhere else, that would suggest that the code for usertitles have been removed in the relevant templates.

Check your theme's member_profile template for this variable

({$usertitle})
(2018-09-09, 12:00 PM)kbilly Wrote: [ -> ]Hello everyone!

I was trying to make some good userbars using this tutorial

After making the neccessary modifications,i'm having some issues as the userbars are being shown only on the forum's index page,where i'm currently using the Adavanced sidebox 3.1.12 plugin.


So,you can see that there it is working.

My problem is that i'm not able to see the changes on the profile page and in the postbit.


My forum is running the latest version of MyBB with Dark1.8 theme.

Any help would be really appreciated.

Regards.

No need to do the <div> thing. It's not necessary. (in my opinion)

Look at the 2nd screenshot and you'll see how I have it done.

I stylized the username this way: 

<span style="background: url(images/rainbow.gif) repeat-x scroll 0% 0% transparent; color: red;text-shadow: 0px 0px 5px #c90a0a, 0px 0px 6px #c90a0a;"><em>{username}</em></span>

[Image: ed42fa03638eb545908357dbda5f6ba9.png]  There are rotating sparkling things that go around the username. You can see it on my website.

[Image: 5ea859cd69ae73cb28eeb8e624921a36.png]
(2018-09-09, 12:21 PM)Serpius Wrote: [ -> ]
(2018-09-09, 12:00 PM)kbilly Wrote: [ -> ]Hello everyone!

I was trying to make some good userbars using this tutorial

After making the neccessary modifications,i'm having some issues as the userbars are being shown only on the forum's index page,where i'm currently using the Adavanced sidebox 3.1.12 plugin.


So,you can see that there it is working.

My problem is that i'm not able to see the changes on the profile page and in the postbit.


My forum is running the latest version of MyBB with Dark1.8 theme.

Any help would be really appreciated.

Regards.

No need to do the <div> thing. It's not necessary. (in my opinion)

Look at the 2nd screenshot and you'll see how I have it done.

I stylized the username this way: 

<span style="background: url(images/rainbow.gif) repeat-x scroll 0% 0% transparent; color: red;text-shadow: 0px 0px 5px #c90a0a, 0px 0px 6px #c90a0a;"><em>{username}</em></span>

[Image: ed42fa03638eb545908357dbda5f6ba9.png]  There are rotating sparkling things that go around the username. You can see it on my website.

[Image: 5ea859cd69ae73cb28eeb8e624921a36.png]

My username is also styled

[attachment=40823]

But that isn't what i'm trying to do,i'm trying to make the userbars for my forum using css.

I need to style that user title,it works but only on the index page as i wrote in the above post.

@Ashley1,it is there:

[attachment=40824]
(2018-09-09, 12:29 PM)kbilly Wrote: [ -> ]But that isn't what i'm trying to do,i'm trying to make the userbars for my forum using css.

I need to style that user title,it works but only on the index page as i wrote in the above post.

@Ashley1,it is there:

If you want user bars like this...

[Image: 77e9dab8ad0035f23b4dc9b2c8d20a8f.png]

... create your own usergroup bar images. It's not hard to do.
Brother,you are right but i really don't have any knowledge about it and i don't have a poweful pc to use programs like photoshop.

I have downloaded some usergroup bars and also used them today but i would say it honestly that it is a lot of fun making all those userbars/stars work with css using fontawesome and that is what i want to do..
(2018-09-09, 05:39 PM)kbilly Wrote: [ -> ]Brother,you are right but i really don't have any knowledge about it and i don't have a poweful pc to use programs like photoshop.

I have downloaded some usergroup bars and also used them today but i would say it honestly that it is a lot of fun making all those userbars/stars work with css using fontawesome and that is what i want to do..

I didn't use Photoshop to make those userbars.

I used the FREE GIMP HERE. Easy to use and does a lot of the same stuff that PaintShop Pro can do.
Thanks a lot...i will try that too.
Finally,i was able to make the userbars using css.

The result on postbit is:

[attachment=40844]

But i have one problem,it isn't working on the user's profile page.

The code i use in the member_profile page is:


<div class="userbar gid_{$usergroup['gid']}">{$usertitle}</div>

Strange thing is that the same code is working on the postbit:


<div class="userbar gid_{$usergroup['gid']}">{$post['usertitle']}</div>

The result on the member profile page is:

[attachment=40845]

Any ideas?

Thanks for your help in advance.
Have you tried simply something like this for simple fontawesome css userbars?

in postbit and postbit_classic find:

{$post['usertitle']}


replace with:

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



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


and simply modify and expand upon that?
Pages: 1 2