[Resolved] Curved Corners

[Gary L]

Hi,

Is this possible? Just about everything has rounded corners. Also the black outline.

http://magneticstashbox.com

Thanks!

[Leo]

Sorry what are you referring to? Like the gallery below Show Slideshow?

[Gary L]

Hi, the site link above is to an example site where all the containers have rounded corners.
It’s not generatepress theme.

Notice how the header, content, sidebars,menus have rounded corners. Also has a black linne (about 2px wide)

I want my generate press theme to do this.

Thanks

[Leo]

Try this CSS:

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

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

If I didn’t catch everything, can you provide a link?

[Gary L]

Worked great!! Thanks

[Gary L]

Hi,
Just noticed the container for the text in primary navigation is square so it shows over the curved part of the primary navigation curve. Is there css to curve this text container?

Thanks

[Leo]

I assume you don’t want border around each individual menu item? If so add the additional CSS below:

.main-navigation .main-nav ul li a {
    border-radius: 20px;
}

Let me know.

[Gary L]

Hi, That curved each text container in the main menu. ( I hope I’m using the right terminology) which is fine for this site since there’s only about 5 entries.

Just so I know is it possible just to do the first one on the left when the main menu is a horizontal bar right under the header?

Thanks

[Leo]

Yup definitely doable – we just need to target that first menu item. Try this:

.main-navigation .main-nav ul li:first-child a {
    border-radius: 20px;
}

[Tom]

You might want to only target the left corners:

.main-navigation .main-nav ul li:first-child a {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

[Gary L]

Hi.. Perfect!

Maybe I should post this question in another thread but since the link is up top.

The container that holds the front page content and the sidebars is butted up against the primary menu but the distance between the widget boxes and content has space…How is that achieved?
I can close it up but everything starts closing up.

Also the color of this background space of the mentioned item is different than the background of the page (blue with diagonal lines) where is this adjusted in generatepress?

Thanks

[Leo]

Not quite sure what you meant about the space but check your settings in Customizer > Layout > Container > Content Layout and select Separate Containers. Then you should be able to specify the Separating Space.

All the background color options should be in Customizer > Colors
https://docs.generatepress.com/article/colors-overview/

Let me know.

[Gary L]

Hi,
On the first one..that is what I do but they all move I just want the top of the content and top widget to move,,see the link above…see how it’s butted up against the bottom of the primary nav bar but there is space between all the widgets and the page content?

and on the second question, this space is what I’m trying to color…if there was a way to upload pics here I could point arrows to exactly what I’m talking about.

Thanks,

[Leo]

Screenshots would definitely be helpful. You can upload them to a site like: https://postimage.io/ and provide the links here.

[Gary L]

Here you go theme pic

see 1 …how it is butted up against the nav bar but the other objects have space between them within that container

see 2 …the light brown area, that is what I’m trying to color in, it’s the space between widgets and page content box which is what I’m talking about in one.

Thanks

[Author]

Posts