Resolved Is it possible to change the background color as light grey as my forum?

[maplegt88]

Is it possible to change the background color as light grey as my forum? My current forum background color is light grey.

 

[Bob]

Is it possible to change the background color as light grey as my forum? My current forum background color is light grey.

My addons use Core XF CSS Classes and Style Properties. You'd have to adjust those OR you'd have to edit templates and change any Core XF Classes to your own custom classes.

You can also try applying your own CSS via Extra.less, which is a popular way of customization (tons of information at XenForo.com on how to do that).

Another option is hiring someone like @Russ from Pixel Exit.

 

[Bob]

I get an answer from Chatgpt for Extra.less . Is it right? Otherwise I have to ask for help in xenforo


.ams-article-container {
background-color: #D3D3D3;
}

Where are you finding that CLASS name? That is not an AMS CSS Class name.

Did you use your Browser Inspect tool on the element to see what AMS CSS Class names are being used for that element?

It might help if you tell us what page and what element on that page you are asking about. There are several 100 individual pages in AMS and literally 1000's of individual elements. At least provide a screenshot of the page and which the element on that page (circled in RED).

 

[cdub]

Another option is hiring someone like @Russ from Pixel Exit.

Highly recommend @Russ ! He's AWESOME!

 

[maplegt88]

yeah I try the answer from chatgpt but it doesn't work as my expect


The color of container,the article background

I want to change the color same as my forum below


background-color: #D3D3D3

Many thanks

 

[Bob]

yeah I try the answer from chatgpt but it doesn't work as my expect

Probably a good idea to avoid using that service for things like this

provide a screenshot of the page and which the element on that page (circled in RED).

You post a screenshot that contains dozens of elements and multiple containers and don't identify the specific element or container by circling it in RED (or some other color).

You really need to learn how to use your browsers inspection tool. There are 1000's of You Tube videos on how to do this with Chrome, FireFox etc...

Probably best at this point that you seek some designer help. Ask @Russ , he knows AMS inside and out and loves helping people customize styles

 

[maplegt88]

ok. Hmmm I am using the theme from Themeforest
I may ask themeforest for help first
thanks any way

The color of container,the article background of AMS is white.
I want to change the color same as my forum,which is light grey (background-color: #D3D3D3)
with extra.less

 

[Bob]

There are multiple containers in that area. Start by targeting the lowest container in the hierarchy and if that doesn't work, target the next higher and so on.

block-container

block-body​

articleBody​

articleBody-main​

bbWrapper​

Since the lowest target class is widely used generic class for 1000's of XenForo containers, you need include a higher class, so that its more unique and doesn't affect other elements that are also using a generic class (like in this case, posts, profile posts, conversation posts etc).

So instead of targeting .bbWrapper {} you'd want to target .articleBody-main .bbWrapper {} to ensure that it only targets the bbWapper Class when that generic class is within the AMS articleBody-main Class.

Keep in mind, these containers are NOT the same as the Thread/Post Containers, so trying to MATCH the look and feel of a Post might be a bit challenging and it could cause viewing issue with other elements within the Article Container that will now blend in with the modified background color (which is why in this particular case, I'd recommend hiring a Designer like @Russ from Pixel Exit to assist you in this customization).

This is about as basic of a CSS customization as it gets.

Learn how to use your Browsers Inspection Tools, so that you can inspect an area to see all the containers and elements along with their classes.

 

[maplegt88]

Thanks a lot. I got the solution from themeforest and it works

Here are the code in extra.less:

.ams-article-container {
background-color: #D3D3D3;
}

.xa_ams_articleBlock > .block-container {
background-color: @xf-contentAltBg
}

 

[Bob]

Glad your style designer was able to help you out!

I've marked this as "Resolved".