Corners not rounded and border improperly displays

[kencooperjr]

Using WP 4.2.2 and latest version of WX (just updated Friday). See url: http://fairhopeyachtclub.com/ 

Specified All corners rounded in the header – not done. See picture of club house. Upper corners look like they are rounded but instead have a ‘white corner’. bottom corners of the image are not rounded.

How is this fixed?

Thanks – Ken

[scrambler]

The option applies to the overall container that normally has the Title area over the header image, and therefore does not carry to the header image

You will need to add the rule below to Main options > Fonts & Custom > Custom CSS Rule box

#header-image img {-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}

Beware you have a background color set on the wrapper so that will show underneath unless you check rounded corners on the wrapper too

[kencooperjr]

THANKS – that certainly did the trick – HOWEVER, I am now wanting to round just the Top Corners of the header image and not the bottom corners? Have checked, under Wrapper Area AND Header Area, to have Top Corners rounded. If the ‘#header-image…’ is present all corners are rounded. If that line of code is not present then all four corners are square. Looks like t he Rounded Corners does not work or I am misunderstanding how it is supposed to work?

Under Main Options –> Menus did specify Bottom Corners rounded – this works.

BTW as regards the first sentence in your answer as of 4:21PM I had checked the Move Title/Tagline over Image: 

Thanks again – Ken

P.S. Have fixed the ’rounded corner’  problem – simple matter if you RT*M. No further action needed.

P.P.S. How do I set the radius for the main menu bar – the default is 8 and I want to change it. What is the CSS identifier for the main menu bar. Have tried a bunch of names, main, primary, primary-menu and t he list goes on – help is appreciated. BTW will be setting gradient for the menu bar when I get its id.

thanks again

[kencooperjr]

From a prior comment – really do need to get an answer for this question – Thanks.

Using WP 4.2.2 and latest version of WX (just updated Friday). See url: http://fairhopeyachtclub.com/ 

How do I set the radius for the main menu bar – the default is 8 and I want to change it. As you can see from the URL the Menu Bar bottom corners are rounded, default radius is 8. The header image top corners are rounded but at 12 – using custom CSS code – see prior comments in t his thread. Need to get the id for t he Menu Bat so I can make the same changes.

What is the CSS identifier for the main menu bar. Have tried a bunch of names, main, primary, primary-menu and the list goes on – help is appreciated. BTW also wanting to set gradient for the menu bar when I get its id.

Thanks – Ken

[scrambler]

Two possibilities.

The rounding of the bottom is done by a class .rounded-bottom

So you could add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box with your own value.

.rounded-bottom{-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}

Or if you want to override only the radius of the menu bar you can put the rule part only below (between curly brackets, in Main Options > Menus > Primary Menu Bar > Menu Bar BG CSS+ box

{-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}

If you want to add a gradient add the gradient rule inside the same curly brackets.

In general, the CSS+ box besides the various option is an easy way to add custom styling without knowing the selectors. If you do want to find out the selectors, use your browser developer tools to do that.

[kencooperjr]

Your last sentence was the ‘goldmine’. Probably need to do a lot more digging in the doc. Am I correct in assuming that in future updates of the WX theme ANY CSS will be retained and not over written?

However, as to the statement ‘ If you do want to find out the selectors, use your browser developer tools to do that.‘ – I had done this by looking at the ‘View source’ tool in my browser. But was unable to find a selector for the menu bar that could be used in the ‘Main options > Fonts & Custom > Custom CSS Rule box’. Could you help with this – for future reference.

THANKS – Ken Cooper

[scrambler]

Yes all the custom CSS you enter is saved with the options.

the method for customizing a weaver theme is 3 steps.

Use the option if it exist for the element and the property you want to style

Use the CSS+ box next to an existing option, if there is an option for the element you want to style but not the property you are looking for

Add a full CSS rule with the proper selectors in Main Options > Fonts & Custom > Custom CSS Rule box, if there is no option box applying to the element you need to style.

Regarding Finding selector, View source is far from the best way to look at it. You need to learn to use your browser developer tool as explained here:

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[Author]

Posts