Home › Forums › Tutorials and Hints from Users › Rounded Corners get overridden by color for “Title/Tagline Area BG”
- This topic has 6 replies, 2 voices, and was last updated 3 years, 2 months ago by
MNL43RD.
-
AuthorPosts
-
July 24, 2020 at 20:10 UTC - Views: 20 #64878
MNL43RD
ParticipantI am having problems rounding off the upper page corners on the site http://www.RPAmichigan.org I am using Weaver Xtreme free version 4.3.5, within the WordPress “customizer”. I got it to look like I wanted, so maybe this is a bug report? (Didn’t see the topic elsewhere in the forum, nor any place to report bugs.) Here is the problem and the solution: By assigning a color value to the header container instead of using “inherit” it makes the area take a square shape and overwrite the other setting for rounded corners. Here is what you need to do to prevent this:
– From “Layout”… “Core site styling” you set the background color of the header.
– then on the menu “Colors” … “Header area”, use the value of “inherit” for both the Title/Tagline Area BG Color and also the Site Title BG color.
July 24, 2020 at 20:35 UTC - Views: 17 #64879scrambler
ModeratorWhen you the header background color, did you also set the rounded corners for the header area?
because4 if you round the corners on the wrapper area, but add a background color to the header without rounded corner on the header, then it is normal that they become square, given the header area is over the wrapper at the top…
July 24, 2020 at 22:12 UTC - Views: 15 #64880MNL43RD
ParticipantI found the checkbox for rounding the corners on the header, but it didn’t take effect. Did not solve the problem. Which is why I think it might be a bug.
July 25, 2020 at 17:10 UTC - Views: 13 #64882scrambler
ModeratorI would need to see the Site when the problem is apparent to be sure of what is going on.
July 25, 2020 at 20:33 UTC - Views: 13 #64884MNL43RD
ParticipantHere is the above site, http://www.rpamichigan.org, with the top corners done right, that is, only using “inherit” on the page, Colors…Header …. Title/Tagline Area BG Color.
Here is another site I have control of, http://www.marianpeace.org, with the top corners done wrong, that is, trying to specify #5A81C7 for Title/Tagline Area BG Color. It is not a fix to go to Style…Wrapping Areas or Style…Header with their options for borders and rounding corners. They don’t round what is controlled by Title/Tagline Area BG Color.
July 25, 2020 at 22:53 UTC - Views: 10 #64885scrambler
ModeratorI did not read you first post carefully.
What you are getting is a limitation of the current implementation of rounded corners.
If you set a background color for the Title and tagline, that area does not have rounded corners and is over the one that does.
The workaround is either to apply the background color to an area that does have the rounded corners option (like the header, or add the rule below to the theme Global Custom CSS Rule box to also round the corners of the Title tagline area
#title-tagline {border-radius: 8px;}
July 26, 2020 at 12:02 UTC - Views: 6 #64904MNL43RD
ParticipantThanks, that code works!
-
AuthorPosts
- You must be logged in to reply to this topic.