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!

First of all a big thanks for taking time to reply in this thread.

My problem is that i'm not able to see the userbars on the members profile page,the rest is working fine.

So,i would like to recieve your suggestions/help in the member profile template.

Thanks.....


(2018-09-18, 03:06 PM)kbilly Wrote: [ -> ]Hello!

First of all a big thanks for taking time to reply in this thread.

My problem is that i'm not able to see the userbars on the members profile page,the rest is working fine.

So,i would like to recieve your suggestions/help in the member profile template.

Thanks.....

Cool beans, glad that worked for you so far. As for your member profile question...
See response here
(2018-09-18, 06:27 PM)vintagedaddyo Wrote: [ -> ]

(2018-09-18, 03:06 PM)kbilly Wrote: [ -> ]Hello!

First of all a big thanks for taking time to reply in this thread.

My problem is that i'm not able to see the userbars on the members profile page,the rest is working fine.

So,i would like to recieve your suggestions/help in the member profile template.

Thanks.....

Cool beans, glad that worked for you so far. As for your member profile question...
See response here

To be honest,i didn't use your css bars as mine are working fine but the problem remains the profile page.

So,i would try to use your css bars too,to make the profile page work too and let you know.

EDIT:

I tried adding the css to the global.css and then replaced the line in the member_profiile template,as you told.

Here is the result:

[attachment=40852]

Somehow,these userbars aren't working on the profile page.

With mine css,the result is:

[attachment=40853]

Any idea?

Thankyou again.
(2018-09-18, 06:47 PM)kbilly Wrote: [ -> ]
(2018-09-18, 06:27 PM)vintagedaddyo Wrote: [ -> ]

(2018-09-18, 03:06 PM)kbilly Wrote: [ -> ]Hello!

First of all a big thanks for taking time to reply in this thread.

My problem is that i'm not able to see the userbars on the members profile page,the rest is working fine.

So,i would like to recieve your suggestions/help in the member profile template.

Thanks.....

Cool beans, glad that worked for you so far. As for your member profile question...
See response here

To be honest,i didn't use your css bars as mine are working fine but the problem remains the profile page.

So,i would try to use your css bars too,to make the profile page work too and let you know.

EDIT:

I tried adding the css to the global.css and then replaced the line in the member_profiile template,as you told.

Here is the result:



Somehow,these userbars aren't working on the profile page.

With mine css,the result is:



Any idea?

Thankyou again.

Is it a custom user group? If so you would have to add the custom usergroup name to the css  like the existing css has for existing usergroups

Example:


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

.grouptag.Developer {
    border: 1px solid red;
    background: red;
    color: #ffffff;
}

Also not sure if this is the case for you but you might want to make sure  your span has a closing >
Example </span>  and not </span
No,it isn't a custom usergroup.

The profile userbars aren't working for any usergroup.(I tried both,yours and mine css)

Now,i am again using the following string:


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


By using the function "gid" ,i'm avoiding all problems which may be caused by custom usergroups ecc ecc.

The result remains the same on profile page:

[attachment=40855]


Working on postbit:

[attachment=40856]

So,the problem remains the user profile page for me,the rest it working fine.

Thanks
(2018-09-19, 04:12 PM)kbilly Wrote: [ -> ]No,it isn't a custom usergroup.

The profile userbars aren't working for any usergroup.(I tried both,yours and mine css)

Now,i am again using the following string:


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


By using the function "gid" ,i'm avoiding all problems which may be caused by custom usergroups ecc ecc.

The result remains the same on profile page:




Working on postbit:



So,the problem remains the user profile page for me,the rest it working fine.

Thanks

I can only speculate as I would have to see your modified code: ie: css also of the other code you used.
Just a thought but, have you tried perhaps changing this in member_profile:

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


To:  

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



Anyhoo, my previous instructions are for usertitle styling not usergroupimage styling..., based on your image your theme has no usertitle displayed with or without styling? I assume it is missing based on your image because it normally goes usertitle, userrank, groupimage.

Note: that using:

{$usergroup['gid']}

in member_profile can also cause the non display issue.

For member_profile:

{$memprofile['usergroup']}

should be used.

Anyhoo, back to why I offered the usertitle alternative instructions  in the first place. See, with modifying usertitle to have the styling exactly how I previously had suggested it allows you to have a usergroupimage and then seperately a usertitle css  styling with fontawesome. Or if you use the labeltext plugin it in theory allows you to have 2 group images plus with the usertitle styling in theory 3. I have not had the time to look at your code that you used for usergroupimage styling so I would have to look at that to determine what is the issue. Also as a non member i cannot view profiles at the link you sent me in pm. I do know that using my instructions the usertitle will be styled and using my later instructions the usertitle will be styled and displayed on the profile as I tried it quickly on the cerise theme via my mobile phone localhost.

Also, just a thought, seeing as the tutorials you are using do not call a gid and gid would be number based for example 3, 4, 6, etc and without that in your css identifiers it clearly would not work..., if you want to use  gid perhaps look at an example of its usage. Yes, though this: https://community.mybb.com/thread-134747-post-1254404.html#pid1254404 is not related to groupimages it does show how to use group id and css to work together in say for example postbit background coloring.., so perhaps you could use it as a further rough idea on how to utilize gid and css styling for your own needs.

Modifying slightly my previous shared instructions to utilize gid or what not for quick example:



In headerinclude add:

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


Add to global.css


/** CSS FA Usertitle Postbit & Profile by Vintagedaddyo **/

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

.grouptag4:before {
    content: "\f013";
}

.grouptag6:before {
    content: "\f0e3";
}

.grouptag3:before {
    content: "\f0e3";
}

.grouptag2:before {
    content: "\f007";
}

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

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

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

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



In postbit and postbit_classic find:


{$post['usertitle']}<br />


Replace with:


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


In member_profile find:


({$usertitle})<br />


Replace with:


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


Now, you can keep adding to this by adding additional "gids" to the css.

MyBB default "gids" are:

 [ 1 ] _ Guests
 [ 2 ] _ Registered
 [ 3 ] _ Super Moderators
 [ 4 ] _ Administrators
 [ 5 ] _ Awaiting Activation
 [ 6 ] _ Moderators
 [ 7 ] _ Banned

And same can be done by further adding your non default "gids" to the css
O man,thanks for your time and for detailed explaination.

I would like to inform you that this did the job:


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


To:  

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

Here is the proof of working userbars on the profile page.


[attachment=40862]

I will also be trying your code this weekend.

I would like to thankyou again.

Regards.
(2018-09-20, 04:19 PM)kbilly Wrote: [ -> ]O man,thanks for your time and for detailed explaination.

I would like to inform you that this did the job:


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


To:  

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

Here is the proof of working userbars on the profile page.




I will also be trying your code this weekend.

I would like to thankyou again.

Regards.

Cool beans and no worries. Glad you got it sorted out. Smile
Pages: 1 2