Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #23595

    Hi, for my company I’m tweaking the UI to be a more FLAT UI. It’s going well to remove button gradients etc. (although I hope there is a more efficient way than adding everything in the tiny Custom CSS field and add !important to every statement?)

    But what I need is that I get the white content by standard and have the light grey background as alternate content. It’s easy to change the background-color of both, but I know it’s more complicated than that as many styles change with it.

    So I then I don’t have to add the Alternate Content to every single page. Doesn’t matter if I must change it in PHP or whatever.

    Thanks in advance,


    Hi DavyE,

    I’m not really sure what you mean. You can just style the main content however you want in the style tab and the alternate the same.

    If you are doing a full re-styling, you shouldn’t need to (and shouldn’t much anyway) use !important everywhere. Use selectors and add your own css to the custom.css file in the css folder of the theme files.

    So for example, if you wanted to change the color of a button you wouldn’t use:

    background: #333 !important;

    Because that would do a force change on all background values across all elements. Instead, you would do something more like:

    #top #footer .widget .button.newsletter {
    background-color: #333;

    So that the priority with the css would be given to your new css and only effect the #footer then the .widget classes and then inside those the .button.newsletter (a fictional example).




    Sorry for my unclear explanation, let me try to explain better:

    In the Advanced Layout Builder you have Layout elements and then Content Section. When you edit the Content Section you have Main Content and Alternate Content, amongst others. The Main Content having a background color of #F8F8F8 and Alternate Content of #FFFFFF. I can just change the background-color css of both so that Main Content is #FFFFFF and Alternate Content is #F8F8F8, but the problem is that many elements within that Content Section have some different settings too.

    For example some buttons and text are slightly darker in the Main Content section to keep up the contrast on that light gray background. If I just switch the background color, these other colors will not change with it, meaning that the darker colors of the Main Content will now seem even darker on the white background and the lighter text and button colors of the Alternate Content will now be much less visible on the light gray background.

    So as to switch the styles as a whole I was wondering if there was a better way to switch the standard Content Section. I hope it’s clear now?


    But indeed, I forgot the Styling section of the template where I can change both sections. I think that solves my issue. Thanks a lot and sorry for the misunderstanding!

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Switch standard Content Section to Alternate Content instead of Main Content’ is closed to new replies.