XF 1.5 User Banner question

Try background-image instead of background.

Edit: Just noticed, have you changed the Path to Images in ACP > Appearance > Style Properties > General? Depending on what you have set there could be the issue.
 
Last edited:
Try background-image instead of background.

Edit: Just noticed, have you changed the Path to Images in ACP > Appearance > Style Properties > General? Depending on what you have set there could be the issue.

Well, we moved forward a bit! But still have an issue. Check out the screen shots.
I've adjusted the path to the image to match the general settings in style properties.
 

Attachments

  • Screen Shot 2016-11-27 at 7.18.35 AM.webp
    Screen Shot 2016-11-27 at 7.18.35 AM.webp
    18.4 KB · Views: 28
  • Screen Shot 2016-11-27 at 7.16.31 AM.webp
    Screen Shot 2016-11-27 at 7.16.31 AM.webp
    7 KB · Views: 23
  • Screen Shot 2016-11-27 at 7.19.05 AM.webp
    Screen Shot 2016-11-27 at 7.19.05 AM.webp
    11.5 KB · Views: 22
  • Screen Shot 2016-11-27 at 7.24.01 AM.webp
    Screen Shot 2016-11-27 at 7.24.01 AM.webp
    12.7 KB · Views: 22
  • Screen Shot 2016-11-27 at 7.24.42 AM.webp
    Screen Shot 2016-11-27 at 7.24.42 AM.webp
    23.7 KB · Views: 22
At a computer now and I've been able to have a proper look at this. This is the code you need:

Code:
.userBanner.supporter
{
color: transparent;
background: url("styles/default/userranks/support.gif") no-repeat;
width: 140px;
height: 28px;
}

Note the color of the text needs to be transparent otherwise you will see the word "Supporter" over the banner. Also @imagepath needed to be removed from the url. I note that you corrected the first line as previously you had .userbanner.supporter instead of .userBanner.supporter as the case needs to match that in the User Group custom css banner box.

Hopefully that will work.
 
Last edited:
@Tattooed Theist apologies for the typo in my code, it should be background-image not background. I also had one set of single quotes. I've edited my post so try copying it again.
Shoot man. This is nuts. Still an issue. o_O

I really appreciate your help, by the way!

This is what I have in there
Code:
.userBanner.supporter
{
color: transparent;
background-image: url("styles/default/userranks/support.gif") no-repeat;
width: 140px;
height: 28px;
}
 

Attachments

  • Screen Shot 2016-11-27 at 3.29.56 PM.webp
    Screen Shot 2016-11-27 at 3.29.56 PM.webp
    20.8 KB · Views: 17
Last edited:
@Tattooed Theist I'm so sorry, I was incorrect with the background bit, the only error was the single quote. I've edited my previous posts but I'll post the correct code again here. It definitely works, I've just tested it on my site with your image.

Code:
.userBanner.supporter
{
color: transparent;
background: url("styles/default/userranks/support.gif") no-repeat;
width: 140px;
height: 28px;
}

upload_2016-11-27_20-35-52.webp
 
Last question, I promise!

I tested it on a dummy profile and the usergroup text title seems to be still showing through the image causing an awkward overlay
(attachments)

When I delete the "supporter" userbanner text the whole image disappears also.


Oh and it only happens on the users profile page, the post bit looks perfect still (image attached)
 

Attachments

  • Screen Shot 2016-11-28 at 11.25.50 AM.webp
    Screen Shot 2016-11-28 at 11.25.50 AM.webp
    7.1 KB · Views: 18
  • Screen Shot 2016-11-28 at 11.26.00 AM.webp
    Screen Shot 2016-11-28 at 11.26.00 AM.webp
    16.9 KB · Views: 17
  • Screen Shot 2016-11-28 at 11.26.18 AM.webp
    Screen Shot 2016-11-28 at 11.26.18 AM.webp
    21.8 KB · Views: 18
  • Screen Shot 2016-11-28 at 11.30.56 AM.webp
    Screen Shot 2016-11-28 at 11.30.56 AM.webp
    12.9 KB · Views: 13
I tested it on a dummy profile and the usergroup text title seems to be still showing through the image causing an awkward overlay
(attachments)
It shouldn't be showing through as you are using color: transparent to make the text transparent. Looking at the screenshot it only seems to be visible from that because you have selected the text?

When I delete the "supporter" userbanner text the whole image disappears also.
That's a limitation of the user banners, there must be some text there, leaving it blank means there's no user banner. You could minimise the text by putting in just a period instead of the text (unfortunately you can't use a space on its own as it considers this to be nothing).
 
It shouldn't be showing through as you are using color: transparent to make the text transparent. Looking at the screenshot it only seems to be visible from that because you have selected the text?


That's a limitation of the user banners, there must be some text there, leaving it blank means there's no user banner. You could minimise the text by putting in just a period instead of the text (unfortunately you can't use a space on its own as it considers this to be nothing).

Weird, I guess I'll just throw a period in there. That should be fine, it only shows through on the profile page so I suppose it's not a big deal.
Thank man!
 
@Tattooed Theist I've checked my profile page and it's not showing on there (I tested on both my style and the default style and no text was visible unless I selected it). Maybe it's related to your style. You should check the browser console and try to see what's causing it in the CSS there and then adjust accordingly.
 
@Tattooed Theist I've checked my profile page and it's not showing on there (I tested on both my style and the default style and no text was visible unless I selected it). Maybe it's related to your style. You should check the browser console and try to see what's causing it in the CSS there and then adjust accordingly.
I'll definitely mess with it, you've got me to the point of necessity things being good to go, so I'll work out the minor details now. Thanks brother.
 
Top Bottom