Rounded Corners Question(s)

[Carl]

Hi there! I’m working on a little side project website and started adding in some rounded corners to the content / blocks but don’t know enough of the elements to get the footer or comments to adhere. Here’s my current CSS I’ve added to Simple CSS.

.site-header, .main-navigation, .widget, .inside-article, {
    border-radius: 8px;
    border: 0px solid #000000;
}

I had added .footer and .comment-reply but nothing changed. Sooooo much to learn. Is there a list somewhere I can reference for all the things I can adjust via CSS? I’ve got some great ideas but a LOT to learn. Just trying to add a subtle, clean look to the site by removing all the sharp edges, without overdoing it. Going for a simple fast-loading site that will focus on the content as it all comes together.

[David]

Hi there,

try these two classes:

.site-info for the footer element
.comments-area for the comments.

Looks great 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carl]

That’s perfect, exactly what I needed! Is there a list of all the available classes we can use? I have another one, might be tricky or impossible altogether. On the Menus, the furthest left menu option has a squared edge. Is there any way to only round the left edge of the first menu option and not the right of it, leaving that side squared and the rest of the menu options squared? Haven’t gotten into sub-menus yet, but noticed the left side sticking out over the rounded stuff I set.

[David]

We don’t have a list. And its not always the parent container you need to style. For example as you’re using Separate Container for your layout, this bunch of element classes are used for Customize > Content Padding and Content background colors.

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header, .wp-block-group__inner-container

I use the Browser Developer tools if i need to look up a specific class.

For the border radius – if you include overflow: hidden; in your border radius CSS this will stop the menu item from poking out of the container.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts