Editing the background color & image

[Jim McClain]

I sure wish xF themes were as easy to edit as WordPress themes. I can't seem to find where to edit the background color of my pages. I've edited the header and the footer, but I can't figure out where the main body color is located. I woulda thought

body {background: #D7D0C4;}

But no. I can't even search for the color code and find it in a template.

Can you help me out?

 

[Emanon]

Appearance>Styles>Style properties>Page Setup

Then scroll all the way down to: Page Background.

This is default.

 

[Jim McClain]

Appearance>Styles>Style properties>Page Setup

Then scroll all the way down to: Page Background.

This is default.

Thanks for the reply. I wanted to use a repeating image, so I found I had to do that in EXTRA.css.

 

[Russ]

Thanks for the reply. I wanted to use a repeating image, so I found I had to do that in EXTRA.css.

XF comes with just the image url for the properties, but you can add in the EXTRA box:

background-repeat: repeat;

Or whatever other CSS you need specific to that property.

 

[Jim McClain]

XF comes with just the image url for the properties, but you can add in the EXTRA box:

background-repeat: repeat;

Or whatever other CSS you need specific to that property.

I just did it quick & dirty in EXTRA.css:

body
{
    background: #D6CDBC url(@imagePath/xenforo/sources/bg.jpg) repeat;
}

If there is a better alternative, I would prefer that. I feel like I am flying by the seat of my pants editing the style properties in xF. Thanks.

 

[Emanon]

I wanted to use a repeating image, so I found I had to do that in EXTRA.css

Is this a PixelExit style you're editing? Asking because I never had to use any extra code in extra.less to get bg images to repeat.

 

[Jim McClain]

Is this a PixelExit style you're editing?

Yes, sorry, I thought that was obvious, or even required to get support here. The path you described wasn't in my theme, but I did find a Page Background (pageBackground) as part of the Color Palette, but no way to add a repeating image to the body of the site without doing it via EXTRA.css.

Thanks.

 

[Emanon]

Yes, sorry, I thought that was obvious, or even required to get support
here. The path you described wasn't in my theme, but I did find a Page Background (pageBackground) as part of the Color Palette, but no way to add a repeating image to the body of the site without doing it via EXTRA.css.

Hmm. Did you also get the XenBase Framework? It has the "Design Mode" that gives tooltips on hover, with links to take you to right where any element can be edited in ACP.

The path you described wasn't in my theme,

It's not right here?

Linking an image in the blank indicated, makes it automatically repeat. That's also true of the footer image, header bg image, and so on. Content (post) bgs, everywhere. That's true of the native xF default style and also all PE styles.

I thought that was obvious, or even required to get support here.

Well, yeahbut this is a public forum and on the site itself, anyone can register and post in this particular forum. You don't have to be an existing customer. So I try never to assume.

 

[Russ]

Yes, sorry, I thought that was obvious, or even required to get support here. The path you described wasn't in my theme, but I did find a Page Background (pageBackground) as part of the Color Palette, but no way to add a repeating image to the body of the site without doing it via EXTRA.css.

Thanks.

Really no right/wrong way when it comes to CSS to an extent. Extra.less is fine for most things. XF has this property by default and you can add additional CSS to help with things that the property won't cover inside the Extra field. Like this:

 

[Jim McClain]

Hmm. Did you also get the XenBase Framework? It has the "Design Mode" that gives tooltips on hover, with links to take you to right where any element can be edited in ACP.

I have XenBase, Core and my customized style. By "Design Mode" you mean the "Layout Editor" I see this on my forum home page and there's no way to change the site background or even the header.

It's not right here?

View attachment 9381

No, I see nothing even similar to that. Are you referring to the styles for xF 1.5, as I indicated? Here's what mine looks like:

Well, yeahbut this is a public forum and on the site itself, anyone can register and post in this particular forum. You don't have to be an existing customer. So I try never to assume.

This is the Customer Support forum. I assumed only customers could post here, as opposed to other forums on PixelExit.

 

[Russ]

You know it helps if I actually read the 1.x prefix

For this, you'll want to use Style properties -> General -> Body

You can set the image + repeat + position here in the property.

Sorry about the confusion.

 

[Jim McClain]

Really no right/wrong way when it comes to CSS to an extent. Extra.less is fine for most things. XF has this property by default and you can add additional CSS to help with things that the property won't cover inside the Extra field. Like this:
View attachment 9382

Is that in the style I purchased for xF 1.5? I don't see anything like that in my ACP.

 

[Jim McClain]

You know it helps if I actually read the 1.x prefix

For this, you'll want to use Style properties -> General -> Body

You can set the image + repeat + position here in the property.

Sorry about the confusion.

I didn't pay close enough attention to that section anyway, or I'da seen that Body tab. DOH!

 

[Emanon]

You know it helps if I actually read the 1.x prefix

Same here!

 

[Emanon]

This is the Customer Support forum. I assumed only customers could post here, as opposed to other forums on PixelExit.

My erroneous assumption was you were working on a version 2.1 style! But yeah, I never just assume it's a PE product we're talking about, since anyone can post in the Customer Support Forum.