XF 1.4 Clickable user banners?

[kontrabass]

Does anyone know if it's possible to make user banners clickable? Would love to have our premium upgrade user banners link to account/upgrades....

TIA!

 

[ixodie]

Can anyone help me figure how to make all my user banners clickable (all going to the same URL) without having to statically set the banners to images like above?

 

[Aaron1981]

Can anyone help me figure how to make all my user banners clickable (all going to the same URL) without having to statically set the banners to images like above?

I'm using XF2. I have very basic experience with html and CSS but I was finally able to figure it out. Here is a link on my site that shows it off...here

Here are the steps:
Edit this template... app_user_banner.less

Put this code in:
a {
display: block;
background: transparent;
text-align: center;
color: white;
}

Insert it in the section where I typed "INSERTED here" in the code below. Save of course. Then use html to hyperlink the user banner text in the Usergroup section of Admin panel. From there, your entire banner should be clickable and linked to a site of your choice!

.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);
    border-radius: @xf-borderRadiusMedium;

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-size: 11px;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;

INSERTED here.


    strong
    {
        font-weight: inherit;
    }

 

[ixodie]

I'm using XF2. I have very basic experience with html and CSS but I was finally able to figure it out. Here is a link on my site that shows it off...here

Here are the steps:
Edit this template... app_user_banner.less

Put this code in:
a {
display: block;
background: transparent;
text-align: center;
color: white;
}

Insert it in the section where I typed "INSERTED here" in the code below. Save of course. Then use html to hyperlink the user banner text in the Usergroup section of Admin panel. From there, your entire banner should be clickable and linked to a site of your choice!

.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);
    border-radius: @xf-borderRadiusMedium;

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-size: 11px;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;

INSERTED here.


    strong
    {
        font-weight: inherit;
    }

It doesn't show where to enter the URL. I'm a bit confused about how to use this.

 

[Aaron1981]

It doesn't show where to enter the URL. I'm a bit confused about how to use this.

You enter it in this box below:

In this case, my user group name is "Agnostic". I placed the hyperlink html coding in the same box.

 

[Travis-Mc]

I'm using XF2. I have very basic experience with html and CSS but I was finally able to figure it out. Here is a link on my site that shows it off...here

Here are the steps:
Edit this template... app_user_banner.less

Put this code in:
a {
display: block;
background: transparent;
text-align: center;
color: white;
}

Insert it in the section where I typed "INSERTED here" in the code below. Save of course. Then use html to hyperlink the user banner text in the Usergroup section of Admin panel. From there, your entire banner should be clickable and linked to a site of your choice!

.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);
    border-radius: @xf-borderRadiusMedium;

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-size: 11px;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;

INSERTED here.


    strong
    {
        font-weight: inherit;
    }

I did something similar, but wanted the text to stay the original color, I didn't want it underlined unless on hover.

.userBanner a {
    color: inherit;
    text-decoration: inherit;
}
.userBanner a:hover {
    color: inherit;
    text-decoration: underline;
}