XF 1.x A Few More Styling Questions

Grimes

Customer
I am loving Xenforo and Apex together. I'm finding my way around pretty well, but have a few other styling questions for you @Russ.

1. I'd like to add a font awesome icon to the quote bbcode, but can't figure out how to make that happen.

2. I was hoping to make the login/sign up button a gradient via css but when I include the code in the button misc. css, it doesn't change the appearance. I'm fine with just making a vector button if I can't accomplish this.

3. Lastly, I'd like to do something similar to what this site is doing with the center background image.
2015-07-08_15-31-38.jpg

They are using one of your styles (I'm not sure which one).
I know it's not Apex, but I would think this can be achieved with Apex, too. Can it? And if so, is it still possible if I am using a repeating background texture image? Sorry for all the questions. :sorry:
 

Russ

Pixel Exit Staff
1.) Could you screenshot where you want the FA added?

2.) Check Style Properties -> Buttons -> Sign up Now Inner
It's Outer/Inner by default, but the background color usually comes from the inner state.

3.) It's our Legendary style :) it's easy to do though:

Code:
#logoBlock .pageContent { background: url(@imagePath/xenforo/bgnamehere.png) repeat-x 0 0; }

Put that in extra.css
 

Russ

Pixel Exit Staff
Code:
.bbCodeQuote .quoteContainer .quote:before
{
   color: #000;
   content: "\f10d";
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}

Result:

Screenshot_3.png


Something like that?
 

Grimes

Customer
Something like that?
Yes, thanks @Russ. I was trying to add the code in the wrong place. Once I added it to extra.css it did the trick. Doing it the way in your example, how would I apply FA styles? Normally I would do something like:

Code:
class="fa fa-quote-left fa-3x pull-left fa-border"
 

Grimes

Customer
3.) It's our Legendary style :) it's easy to do though:

Code:
#logoBlock .pageContent { background: url(@imagePath/xenforo/bgnamehere.png) repeat-x 0 0; }

Put that in extra.css
It ended up working great- it's almost there. I used-
Code:
background-repeat: no-repeat;
background-position: center top;
I used the image dimensions the site in the example used, but the bottom of my image keeps getting cut off. How do I make the logoblock a little bigger to get a little more room? Oh wait...is it relative to the logo image size?
 

Russ

Pixel Exit Staff
May need to just do a template edit to make it easy:

bb_code_tag_quote
Code:
<blockquote class="quoteContainer"><div class="quote">

Add it in like normal html:

Code:
<blockquote class="quoteContainer"><i class="fa fa-quote-left fa-3x pull-left fa-border"></i><div class="quote">

See if that works for you.
 

Grimes

Customer
Alright, I've got another one. To use custom node icons, do I just turn off Font Awesome for node icons and substitute my own for the default ones in node-sprite.png?
 

Grimes

Customer
Revisiting this- how do I hide the logoBlock image from mobile browsers. I tried a media query, but I can only assume I was doing it wrong as it hid both the logo and the logoBlock image.

Separate question- If I wanted to, how would I move the logo from the left to the center position?
 

Grimes

Customer
Sorry for bombarding you with questions, but I also have a question about the login dropdown on mobile. I noticed the text and name entry fields are "smooshed" over on the left hand side of the screen. How do I fix this?
 

Russ

Pixel Exit Staff
The media query should be:

Code:
@media (max-width:@maxResponsiveWideWidth) {
   #logoBlock img { display: none; }
}

which would keep the logo block, but hide the image itself.

For the login smooshed problem do you have a link? Can PM it as well.
 

Grimes

Customer
The media query should be:

Code:
@media (max-width:@maxResponsiveWideWidth) {
   #logoBlock img { display: none; }
}

which would keep the logo block, but hide the image itself.

For the login smooshed problem do you have a link? Can PM it as well.
Thanks, Russ. Adding that hides the logo, but leaves the logoBlock image. Here's what I have in the Extra.css for that.
Code:
#logoBlock .pageContent {
    background-image: url(@imagePath/xenforo/image.png);
    background-repeat: no-repeat;
    background-position: center top;
    margin-left: 30px;
}

I'll check on the smooshing. I thought it was better, but maybe only because I had registrations turned off.
 

Grimes

Customer
The media query should be:

Code:
@media (max-width:@maxResponsiveWideWidth) {
   #logoBlock img { display: none; }
}

which would keep the logo block, but hide the image itself.

For the login smooshed problem do you have a link? Can PM it as well.
How do I swap it so the logo shows, but the background image is hidden?
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.