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.

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
 

Grimes

Customer
1. Sure thing. Nothing fancy, just at the beginning of the quote.

2. Awesome, that did the trick.
3. Sweet! I'll give it a go later. Thanks!
 

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?
 

Steve

Pixel Exit Staff
Yes basically, if you need to adjust them once you have images you can use the default style properties, Node Icons
 

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.