Creating custom user group banner CSS

[Shelley]

Alright, lets see if I can explain this right. At first I couldn't get anything to show up but I kept messing around with it myself until I got it working. So now it does show up. However, the problem is that the entire image isn't showing up. It's only showing up for as long as the title is.

Like if I wrote the title as "this is a very very long title" then the image will display as this:
View attachment 52341

If I write the title as "short title" then the image will display as this:
View attachment 52342
Also, I used the transparency color however, if I highlight over the image, the title is still visible.

I'm trying to get the entire image to show which is 140x28 and I'm trying to completely remove the title.

Try adding in display: block;

With regards to the title the only solution i'm aware of is the above one i posted so can't help you any further on that. @Brogan might have a solution when he gets online.

 

[xIsabel38]

Display block did help to show the entire image, thanks!

 

[Shelley]

Display block did help to show the entire image, thanks!

FWIW - I would like to see an option for banners where your not forced to add in a title. Not sure whether @Mike would ever implement this option or whether it could be done but it's something I'd welcome.

 

[MasterPiece]

I'm having issue with this one. Sometime the badge colour shows and then disappear. Could someone tell me what i am doing wrong please

 

[Paul B]

Impossible to say without further information and a link to a page where it isn't showing but should be.

 

[MasterPiece]

Impossible to say without further information and a link to a page where it isn't showing but should be.

okay so here what's going on i made a group call Web Developer
Then i added userBanner web-dev in the user group


After that i went in extra.css and added the code

.userBanner.web-dev
{
color: black;
background-color: DeepSkyBlue;
border-color: DeepSkyBlue;
}

then i saved

But the other one already pre-made work perfectly like admin i've choose the red one. ect...
Here a link to that badge http://theblazingtech.com/forums/members/themotions97.24/ and you'll need to login with these credential
username is test and the password is test thanks and i know the Xenforo 1.2.0 rc2 is in unsupported stage but i'm asking if someone has clue if not it is not a big deal. thanks

 

[Paul B]

I don't see the web-dev class anywhere in the CSS.

Ensure there are no errors in EXTRA.css with any other data such as missing } or other issues.

 

[MasterPiece]

I don't see the web-dev class anywhere in the CSS.

Ensure there are no errors in EXTRA.css with any other data such as missing } or other issues.

thanks this helped me i found why it wasnt working.. im using colorful theme and i had accidently removed a } from one of his code in extra so probably cause of that it made the color not show but now it works. thanks

 

[Malchus]

Thanks so much for this guide, Brogan.

My ribbons are not looking proper. Check out the attached - you'll see what I mean.

Does anyone have any suggestions for fixing this issue? I can't seem to pinpoint the problem.

Thanks so much.

 

[Malchus]

@Brogan Do you think the issue may lie in my preferred style?

 

[Paul B]

Undoubtedly.

Impossible to tell what the issue is from a screenshot though.

 

[Malchus]

@Brogan Would a link help?
Any tips or suggestions would be more than appreciated. Thanks so much.

 

[Slind]

I used this http://livetools.uiparade.com/ribbon-builder.html# to create a banner but the ----- are not visible in the forum. Is it possible to get them visible?
Or someone knows a better builder?

 

[bobs409]

I love this resource and made custom banners with no problem but I don't think the wrap around part is looking correct. Mine look like square blocks as in this screen shot:



I noticed too that my admin banner below has the same thing. (I made no changes to that, it's right out of the latest version upgrade)



Any ideas?


Thanks,

Bob

 

[Paul B]

Are you using Internet Explorer?

 

[bobs409]

Yep, IE.

 

[Paul B]

IE doesn't support some of the CSS declarations used.

Try Chrome or Firefox.

 

[bobs409]

Thanks.

 

[Amaury]

Is it always "my-style" in the custom CSS field or is it the actual name of your style (e.g., Winter)?

 

[Paul B]

You can name it however you wish - that is the CSS class name.