mumer8637

Customer
I'm trying to change the stock layout of Core (Dark) theme to look like this (layout only):

9682


I've gone through most options however it seems as this can't be done with the color palette.
I'm guessing the border padding needs to go away somewhere?

Can someone please suggest how this can be done?


P.S. Here is the stock Core (Dark) layout (with the extra background on forums that the above example doesn't have):

9683
 

Russ

Pixel Exit Staff
Few steps to get a look like that, on your child style, go to the Color Palette.

Change

Color 1 to: rgb(16, 16, 16)

Neutral 1 and 2 to: rgb(32, 32, 32)

Then go to Basic Colors, change Main content background to: #2C2C2C

Finally, Style properties -> Node/Forum list -> Uncheck: Node alternating background color

See if that helps.
 

mumer8637

Customer
Many thanks for that but actually I already got that far before.
Apologies that I failed to clear that before.

These changes would get me to here (which looks much cooler to my eye already ;)):

9684


However in the following design, the Categories both have an individual bounding box i.e. 8WayRun and Community Center:

9685


This is what I am trying to achieve.

Any ideas how this can be done?
 

Russ

Pixel Exit Staff
So few things:

That light grey bar at the bottom of each category is actually: Style properties -> Node/forum list-> Enable category footer. You can use the style property at the bottom of the same page to color it.

Additionally, you may need to add this in to your extra.less:

Code:
.XenBase body[data-template="forum_list"] .p-body-pggageContent
{
background-color: transparent;
border-width: 0;
box-shadow: none;
padding: 0;
}

We add a background around all the categories which may be throwing you off. That site you're referencing removes them.
 
Last edited:

mumer8637

Customer
So few things:

That light grey bar at the bottom of each category is actually: Style properties -> Node/forum list-> Enable category footer. You can use the style property at the bottom of the same page to color it.

Additionally, you may need to add this in to your extra.less:

Code:
.XenBase body[data-template="forum_list"] .p-body-pggageContent
{
background-color: transparent;
border-width: 0;
box-shadow: none;
padding: 0;

We add a background around all the categories which may be throwing you off. That site you're referencing removes them.
Thanks a lot for this. I had a lot of other mods in mind but this post put me in the right direction.
The above works like a charm however it should be .p-body-pageContent (typo) and needs closing bracket in end.

Thanks again. Really appreciated.
 

Russ

Pixel Exit Staff
Thanks a lot for this. I had a lot of other mods in mind but this post put me in the right direction.
The above works like a charm however it should be .p-body-pageContent (typo) and needs closing bracket in end.

Thanks again. Really appreciated.
Thank you, I've added the closing bracket in case others need it. I missed it :D
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.