XF 1.4 Custom CSS User Ranks Not Working

Hi,

I've been having a few problems when trying to add my own user ranks that I have made, here is the code below that is in EXTRA.css, it doesn't show up on my forums despite the user being a part of the "test" user group. Not quite sure what the problem is, any help appreciated. Thanks! :D


Code:
.test
{
color: transparent;
background-image: url('http://gyazo.com/9f2bca891105101971ab177623063fc6.png');
display: block;
height: 25px;
width: 121.5px;
margin-top: -4px;
}
 
The code definitely works, you just need an image that actual size as it does not resize it for you I believe (not on my forum anyway using your image URL) so once you fix the template issue it should work.
 
I am slightly confused. Why are you making a new template for these?

Add this to the top of your EXTRA.css (as in the top of the template code area)

Code:
.test
{
color: transparent;
background-image: url('http://gyazo.com/9f2bca891105101971ab177623063fc6.png');
display: block;
height: 25px;
width: 121.5px;
margin-top: -4px;
}

And on the usergroup in the custom class name use: test

If you are trying to use another template for your code above then it needs to go into that new template, if it is not made, make a new template and then paste it inside of that else remove the template from EXTRA.css.
 
I am slightly confused. Why are you making a new template for these?

Add this to the top of your EXTRA.css (as in the top of the template code area)

Code:
.test
{
color: transparent;
background-image: url('http://gyazo.com/9f2bca891105101971ab177623063fc6.png');
display: block;
height: 25px;
width: 121.5px;
margin-top: -4px;
}

And on the usergroup in the custom class name use: test

If you are trying to use another template for your code above then it needs to go into that new template, if it is not made, make a new template and then paste it inside of that else remove the template from EXTRA.css.


I thought that is required as the image is from a url,
This is what it looks like, I have tried it without the extra "test.css" and it still did not work

859df9effa26f30382d1f951e4d53280.png
 
I only have access to my tablet at the moment unfortunately.

1. You have registered users as your primary usergroup
2. You have a user added to 'Test' as a secondary usergroup
3. Banner stacking is enabled (else it will only show the highest prioritised one)
4. On test usergroup on the custom css field for banners you have: test
5. In EXTRA.css (for the correct style) you have pasted the following code:

Code:
.test {
color: transparent;
background: url("http://gyazo.com/9f2bca891105101971ab177623063fc6.png") no-repeat;
height: 25px;
width: 121.5px;
margin-top: -4px;
display: block;
}

No other code should be in there, the image is called via the URL but as I mentioned, it needs resizing as it does not auto stretch so will only show 25px x 121.5px of the image.

That is how I have it on my forum exactly and it works.
 
I only have access to my tablet at the moment unfortunately.

1. You have registered users as your primary usergroup
2. You have a user added to 'Test' as a secondary usergroup
3. Banner stacking is enabled (else it will only show the highest prioritised one)
4. On test usergroup on the custom css field for banners you have: test
5. In EXTRA.css (for the correct style) you have pasted the following code:

Code:
.test {
color: transparent;
background: url("http://gyazo.com/9f2bca891105101971ab177623063fc6.png") no-repeat;
height: 25px;
width: 121.5px;
margin-top: -4px;
display: block;
}

No other code should be in there, the image is called via the URL but as I mentioned, it needs resizing as it does not auto stretch so will only show 25px x 121.5px of the image.

That is how I have it on my forum exactly and it works.

Sorry questions already, registered users as a primary usergroup, is this something on by default? if not how would i go about doing that?

(Also I really appreciate you taking the time to help! :))
 
It is the primary group and should be for all users, add them to secondary groups or use user promotions to allow higher permission access.

Use Brogan's guide https://xenforo.com/community/resources/implementing-permissions-across-multiple-user-groups.358/ for setting up usergroups also.

The only reason I can not see the banner showing is because you have no added a user to the test usergroup, banner stacking is not enabled and something has higher priority or your EXTRA.css edits are directed to another template and anything else inside EXTRA.css will not work if so.
 
It is the primary group and should be for all users, add them to secondary groups or use user promotions to allow higher permission access.

Use Brogan's guide https://xenforo.com/community/resources/implementing-permissions-across-multiple-user-groups.358/ for setting up usergroups also.

The only reason I can not see the banner showing is because you have no added a user to the test usergroup, banner stacking is not enabled and something has higher priority or your EXTRA.css edits are directed to another template and anything else inside EXTRA.css will not work if so.

Went back and checked through your list to see if everything is correct and it is and it is still not showing :(
 
It is the primary group and should be for all users, add them to secondary groups or use user promotions to allow higher permission access.

Use Brogan's guide https://xenforo.com/community/resources/implementing-permissions-across-multiple-user-groups.358/ for setting up usergroups also.

The only reason I can not see the banner showing is because you have no added a user to the test usergroup, banner stacking is not enabled and something has higher priority or your EXTRA.css edits are directed to another template and anything else inside EXTRA.css will not work if so.

Just checked not even regular banners are working on my forum, quite strange no idea what has happened. Thanks for your help though it has been appreciated a lot! :) (will help me in the future once everything is up and running again!)
 
I mean the issue why it never worked?

Also not sure I understand. The image you originally linked was really big, it won't resize it in the code, it will just take that specific section space from the image (did on my forums at least) so you'll need to make an image on the pixel size you defined I think.
 
I mean the issue why it never worked?

Also not sure I understand. The image you originally linked was really big, it won't resize it in the code, it will just take that specific section space from the image (did on my forums at least) so you'll need to make an image on the pixel size you defined I think.

Oh I have resized it and it does work (thank you btw! :D) the edges were more smoothed, when I re-size them in Photoshop it cuts of the smooth edges, I don't think there is much I can do about this though. Thanks so much for your help though it has been very much appreciated! :D
 
Top Bottom