A Few More Styling Questions

[Grimes]

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.

 

[Russ]

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:

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

Put that in extra.css

 

[Grimes]

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]

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

Result:

Something like that?

 

[Grimes]

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:

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

 

[Grimes]

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

#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-

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?

 

[Grimes]

Scratch that last message. I figured it out. It's set in the Header and Navigation properties.

 

[Russ]

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

bb_code_tag_quote

<blockquote class="quoteContainer"><div class="quote">

Add it in like normal html:

<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]

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

bb_code_tag_quote

See if that works for you.

Super easy. Thank you. I'm convinced that you are a wizard.

 

[Russ]

Super easy. Thank you. I'm convinced that you are a wizard.

Awesome let us know if you need anything else

 

[Grimes]

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]

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

 

[Grimes]

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]

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?

 

[Grimes]

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

Scratch this one. I just added it to extra.css. The other questions are still puzzling me though @Russ and @Steve.

 

[Grimes]

Bump.

 

[Russ]

The media query should be:

@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]

The media query should be:

@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.

#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]

The media query should be:

@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?

 

[Grimes]

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

How do I swap it so the logo shows, but the background image is hidden?

Bump.