XF 1.x Footer + Prefixes

[Zynektic]

Is there a way to disable the advanced footer when on mobile? I am stripping it down as much as possible on mobile view so this would help if it can be achieved in some way. I believe another user asked for it too.

Is there also any idea when Fusion Gamer will have the prefixes redone so we do not need to apply additional code to EXTRA.css to resize them? I'll probably go into the fusiongamer classfile and adjust them all here if not or use custom ones.

 

[Russ]

For the footer use a media query to hide it in mobile:

@media (max-width:@maxResponsiveWideWidth) {
.Responsive .extraFooter { display: none; }
}

Or use: @maxResponsiveMediumWidth // @maxResponsiveNarrowWidth depending on where you want it hidden at.

Are you talking about the font size of the prefix being a little bit too large? If it's the font size I apply an easy fix here:

https://pixelexit.com/threads/fusion-gamer-custom-thread-prefixes-user-titles.1821/#post-8412

We're looking to resolve the prefix issues on the next update.

 

[Zynektic]

I'll mess around with the footer thing, wanted to hide it all on mobile view.

As with the prefixes, I had some code before you had given me to resize them but they are still a little big. I'll use the custom ones you showed me last time for a bit I guess, thanks.

 

[Zynektic]

Also, I was using something like this for our new ribbons and whilst it worked for the bigger ribbon, the smaller one does not center, is there a way to center this as adding it to the end of the URL bit or adding a text align with center does not seem to work.

.admin {
background: url("/styles/fusiongamer/ribbons/admin.png") no-repeat;
height: 23px;
width: 114px;
text-indent: -10000em;
display: block;
}

Thanks.

 

[Russ]

Try:

background: url("/styles/fusiongamer/ribbons/admin.png") no-repeat center center;

Unless I'm missing the question

 

[Zynektic]

Oh, I had a single center, that might be why - I'll give it a go, cheers!

The first code for the footer works by removing it also, makes the responsive view a lot easier to look at, thanks.

 

[Zynektic]

In regards to the prefixes questions on XF forums which you replied to @Russ are either you or @Steve able to help me modify these following colours so they look better (some are random colours but you can see the prefix name to match what I want) based on Fusion Gamer prefix colours.

Preferably all with white text if possible too so it matches, thanks.

.babyblue {
    background-color: #50A6C2;
    border: 1px solid #B0E0E6 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.blue {
    background-color: #1381BE;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.red {
    background-color: #AF0202;
    border: 1px solid #DD0A0A !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.orange {
    background-color: #FF6103;
    border: 1px solid #FF7722 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.teal {
    background-color: #05cb95;
    border: 1px solid #699864 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.green {
    background-color: #02af06;
    border: 1px solid #E0E0E0 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.silver {
    background-color: #cbcbcb;
    border: 1px solid #333333 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.purple {
    background-color: #7d26cd;
    border: 1px solid #B0E0E6 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}
.yellow {
    background-color: #ecea28;
    border: 1px solid #699864 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding: 0 4px;
    vertical-align: middle;
}