[Support request] Rounded Corners Question(s)

Home Forums Support Rounded Corners Question(s)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1125548
    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.

    #1125864
    David
    Staff
    Customer Support

    Hi there,

    try these two classes:

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

    Looks great 🙂

    #1128458
    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.

    #1128556
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.