Borders around widgets

Widgets:

.inside-left-sidebar {
      border: 1px solid #000;
      padding: 20px;
}

Post separator:

article.type-post {
      border-bottom: 1px solid #DDD;
}

Let me know if this helps or not ??

Try this:

https://www.ads-software.com/support/topic/how-to-change-widget-background?replies=10#post-6039386

But I don’t whether it works for your theme.

Thanks for the link!

That won’t work with GeneratePress as we don’t have a #secondary element.

I would also suggest going with the specific ID of the widget you want to alter instead of using selectors, except of course if want that styling to apply to every nth widget – not just a specific one.

The code I provided above should work perfect for what Monique is looking for ??

Thanks!
Tom

Off topic:

'That won't work with GeneratePress'

I feared that. –

But: Why is there no general standard for writing themes, (so that it would be easier to “read” [and understand] different themes) and so that a certain insertion into the style.css (or other change of the style.css) of any theme would work for all themes and would have the same effect for all themes?

where in the style.css should I paste the codes?

Everyone is different I guess – some developers prefer certain terminology etc.. While it can be a pain, it’s usually just a small tweak to be made by looking at the theme’s code. In this case, instead of #secondary, we use #right-sidebar and #left-sidebar.

If there is already written something for

.inside-left-sidebar

and

article.type-post,

then you have to modify the alreday written code.

If there is nothing like that, then you can insert the new code anywhere.

@moniqueeee21

This plugin should do the trick: https://www.ads-software.com/plugins/simple-custom-css/

@1a-spielwiese

Not sure what you mean? The code above will work for Monique – I just wanted to show that instead of #secondary, you would use #right-sidebar or #left-sidebar using GeneratePress, in case anyone wants to target specific widget locations like in your post.

@ MONIQUEEEE21

PS.:

Instead of modyfing the original style.ccs it would be better, using “Simple Custom CSS”-Plugin or creating a so-called child-theme:

https://codex.www.ads-software.com/Child_Themes

thank you!! trying it now ??

yay it worked! now how would I make a border above and under the navigation menu? **not around the entire menu like a box.

@ edge22 / https://www.ads-software.com/support/topic/borders-around-widgets?replies=10#post-6040937:

With that:

https://www.ads-software.com/support/topic/borders-around-widgets?replies=10#post-6040928

I intended not to answer on your post, rather on MONIQUEEEE21’s.

Not sure what you mean.

The relevant point was:

MONIQUEEEE21 asked:

‘where in the style.css should I paste the codes?’

And my answer should express something like:

There is a difference between changing already existing parts of a certain style.css on the one hand and inserting entirely new code into a certain style.css on the other hand.

Try this:

.main-navigation {
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
}

Thank you!

You’re welcome!