How to edit this area?

[Bruges]

in the admin panel CSS manager i can’t control the right & left area of the instance

see the below picture for more details or simple check live demo

[tophee]

You could try the Custom Layouts Plugin

Custom Layouts Plugin

Repository: GitHub - angusmcleod/discourse-layouts Example screenshot: [image] Superficially, this plugin is similar to existing Discourse sidebar plugins, i.e.: Dynamic Sidebar Plugin Discourse Sidebar Blocks Simple Sidebar Theme Curated Home Plugin Sidebar Plugin (widget driven) However its code and purpose are quite different. This plugin is intended to provide the infrastructure for custom Discourse layouts, the primary custom layout being the addition of sidebars. It does this by …

[Bruges]

in the admin panel CSS manager i can’t control the right & left area of the instance

see the below picture for more details or simple check live demo

I’m not sure of this plugin will work in the last version of discourse.

i’m concern that it could rise some issues

[angus]

If you have any issues with the plugin just post in the plugin topic and we can work them out.

[Bruges]

If you have any issues with the plugin just post in the plugin topic and we can work them out.

Hi Angus, is the plugin the only way to do this adjustment to the theme?

thank you,

[Bruges]

If you have any issues with the plugin just post in the plugin topic and we can work them out.

@angus

also, if you noticed the areas in the right & left are not a plain color rather an image

is possible for the plugin to support images as well?

[Murat_Demirten]

You need to set background propery of the body element:

body {
    background:url('/uploads/default/original/1X/bf7c6bc6836a7b23da4162d958c5af69d4495783.png');
}

[angus]

Explain a little more what exactly you want to do. As @Murat_Demirten mentioned, the body element on your instance is currently using an image as the background. But you added this yourself, and it seems you’re not yet happy with the current style. Tell us exactly what you want to do and we can point you in the right direction.

[Bruges]

@Murat_Demirten

hi Murat

I’m glad to see you joining the discussion.

i did added the code you provided but it not reflected

it keeps showing me the code it self in each page.

see the below pic

[Bruges]

Explain a little more what exactly you want to do. As @Murat_Demirten mentioned, the body element on your instance is currently using an image as the background. But you added this yourself, and it seems you’re not yet happy with the current style. Tell us exactly what you want to do and we can point you in the right direction.

hi @angus

biscally i would like to use this the below pic to be the background of the whole instance, exactly as used in Linux tips

[angus]

Go to Admin > Customize > CSS/HTML. Create a new style. Add any CSS you want. Make sure your style is enabled E.g.

Equals

[Bruges]

@angus

worked well, thank you so much the issue was with the image link wasn’t complete

unfortunately the overall look is different because now the image is covering every thing

the way my instance now

the way i want it

notice that one subject with light brown & the other is wight just like an excel sheet

thank you again Angus

[Bruges]

@angus
@Murat_Demirten

any tips for the last inquiry؟

thank you

[MarkoK]

Alternating rows can be achieved with css. There is a topic for that:

How do you set alternating colors in the list of topics

You can achieve this with a CSS customization. Here’s an example to get you started: .topic-list-item:nth-child(even) { background-color: #EEE; } .topic-list-item:nth-child(odd) { background-color: #FFF; } Here’s how this looks on Meta: [image]

And the different background and content area can be done via css also. I have this css in my Discourse installation:

body {
    background:rgba(210, 224, 233, 0.4);
}

#main-outlet {
    background:#FFF;
}

I recommend using dev tools of the browser to figure out right elements and try colors etc.
Chrome: Chrome DevTools Overview - Google Chrome
Firefox: Firefox Developer Tools | MDN