XF 1.5 User Banner question

[Tattooed Theist]

So I'm following @Brogan's CSS user banner guide.

I've attached images that show exactly what I've done.
The image wont show up.

My image is here http://skepticalgeneration.com/images/userranks/support.gif

 

[Tattooed Theist]

bump, anything for this question?

 

[Wrye]

Capitalization?

 

[Martok]

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.

 

[Tattooed Theist]

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.

 

[Martok]

At a computer now and I've been able to have a proper look at this. This is the code you need:

.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.

 

[Tattooed Theist]

It definitely changed something, but still no image
This seems very odd that it's being this difficult.

 

[Martok]

@Tattooed Theist apologies for the typo in my code I also had one set of single quotes. I've edited my post so try copying it again.

 

[Tattooed Theist]

@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.

I really appreciate your help, by the way!

This is what I have in there

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

 

[Martok]

@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.

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

 

[Tattooed Theist]

That did it!
You're the best man.
Now I'll just mess with it to get it centered and make the transparent boarder fit snugly with it.

I really do appreciate your help!

 

[Martok]

No problem.

CSS background properties are here so should help.

http://www.w3schools.com/cssref/css3_pr_background.asp

 

[Tattooed Theist]

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)

 

[Martok]

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).

 

[Tattooed Theist]

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!

 

[Martok]

@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]

@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.