[masterbeatParticipant]

Hi, we’re considering changing from Avada over to X as X seems to be a lot more streamlined, faster, and, well a few other things…

BUT, we are definitely missing some of the deep customizations built into Avada like abilities to turn off headers and footers by page, change from boxed to wide/full by page, etc – there seems to be a lot more individual page customizations built in. Probably we will soon learn workarounds for the few we need.

Right now, the important quesiton is we’re trying to figure out how to set the background color of the ‘content’area on our pages when using BOXED mode. The background color set for pages in the customizer seems to only set the color for the outer areas outside boxed mode, which we have covered with images.

We want to be able to change the content area background color to black, or ideally, a transparent setting so that the background images appear sublty below.

Here is a page on our site done with Avada:
http://masterbeat.com/event/mayhem-3-the-halloweenie-afterhours/

You can see how we are set to boxed mode, there is a full screen background image, and the center area is the ‘content’ area (box) and it is set to a black color with a slight transparency so that you see the page background image underneath.

Here is a test page set up in X where we are trying to accomplish the same thing. We have page background set to black in Customizer, but the content area stays white. Where can we set the content bg color to a transparent black in X?

http://x.masterbeat.com/index.php/test/

Thanks!

[RadModerator]

Hi there,

Thanks for posting in.

Glad to hear that you’re switching over, and there will be more features to come 🙂

About your question, should it be applied to the entire box content or just the content (exclude the header and footer)?

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-boxed-layout-active .site {
    background-color: rgba(0, 0, 0, .4);
}
.x-navbar {
    background-color: transparent;
}
.x-colophon {
    background-color: transparent;
}

And to remove that inner boxes, you can switch your page template to Blank – No Container | Header, Footer within your Page Attributes meta box in admin. You may use this tools for manually picking your color http://www.hexcolortool.com/

X theme has multiple stacks, and some features are only specific to each stack. X theme main is a theme framework for and meant for development without bloat features. Hence, simple changes don’t need a boat option and that improves the performance of the site. Design and cosmetic changes are usually permanent when done unless redesigning it.

Thanks!

[masterbeatParticipant]

Hey!

Thanks so much for the quick response and detailed answer. This fixed it perfectly. We are definitely excited about the possibilities of moving over to X from Avada, getting better support and having a cleaner and more ‘standards’ based Theme.

Excited to hear there are more features coming. If you will allow me to request the biggest thing I think is missing that would really help you get Avada customers away and take you to the next level is to build a bit more “PAGE LEVEL” customizations into Cornerstone or the page settings (when adding/editing a new page) – ie: the ability to EASILY change things like Page Title on/off, boxed/full-width on/off (at the page level), header placement, menu choice, etc settings at the PAGE level, page title settings/customizations at the page level, etc. You already go a bit there with background images – i can see (hope) you build a lot more into that area to easily customize things at the page level.

I’m sure you check out the competitors and may already be familiar with how Avada does this (see attached screenshots) but we have quite a few sites that use the ability to change these things at the page level quite heavily, and it’s missing a bit from X.

It also looks like you rely on customizing things like this (and my original request above) on custom CSS – kind of like – well, we don’t have this ability yet in the theme options, but it can be done with custom CSS. Problem for developers like us is we only know enough CSS to be dangerous, we can kind of figure out what might need to be changed but actually doing it quickly and properly can be difficult. Having more of these options in the theme options or page settings or customizer makes the theme more accessible to people like us that don’t want to have to ask for the custom CSS everytime we say “how do we do this?”

But, until then, if you don’t mind some quesitons coming as we try to re-build our Avada sites on X to get the custom CSS needed from you, we should be fine! And hopefully you’ll take these suggestions to the developers and emulate some things that Avada does well and then do them even better!

[JoaoModerator]

Hi There,

Thanks for your words.

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Feel free to reach us whenever you need help and will be a pleasure to guide you or answer any questions,

Joao

[Author]

Posts