add radius to all buttons.

[cqpbert]

I have been told by several people my site would look nicer if all the buttons and boxes were radius corners instead of sharp corners. I have tried to go into css files and add radius to buttons, but it does not seem to change any buttons.

So my first question is how do I know which css file to change for what?

Second question is do I need to do more or just change the css file?

[bsmither]

If your skin is based on the Foundation platform, there is already the CSS necessary to give radius corners.

See:

https://get.foundation/sites/docs-v5/components/buttons.html

See the last example in 'Button Sizing'.

Edit the template to affect one button. Then, using the Developer Tools for your browser, examine the CSS rules that Foundation applies to class="button radius".

Edit the skin CSS file 'cubecart.common.css' and add, at the bottom of that file, those same CSS rule(s) to make the corners have a radius, but for all buttons, not just for .button.radius.

Alternatively, we can make a code snippet to load in a custom CSS file -- which will survive an upgrade if using the stock Foundation skin.

[cqpbert]

Thanks b,

I have been reading and trying to figure out how to apply what you suggest, but I do not follow something. Actually I just dont know how to do any of it. But I do like knowing about the foundation info.

[bsmither]

What skin are you using?

May we have a web address to give better advice?

 

[cqpbert]

I am on standard Foundation. My site is dllpdf.com

I have just got a dev site setup as well from AL, but haven't worked in there yet.

Oh crap, I bet I lost the awesome export stuff you did for me with the last update note to self have to fix that again as well as width

 

[bsmither]

Edit the skin CSS file 'cubecart.common.css' and add, at the bottom of that file, this:

button, .button { border-radius: 10px; }

Save and have CubeCart clear its internal cache.

[cqpbert]

Thanks B,

As always you are spot on. Seems that has changed all my buttons to have radiused cornerd

[cqpbert]

Using what I learned above with the buttons, I have also been able to round the input boxes. But I have not found the way for the dropdowns. Is there a "word" for them as there is for .buttons and .input?

this is what I tried

button, .button { border-radius: 50px 5px 50px 5px; }
 input, .input{border-radius: 50px 5px 50px 5px; }
 selectBox, .selectBox{border-radius: 50px 5px 50px 5px; }

Please see this test site:

https://dev.dllpdf.com/build-plates

Nevermind , I finally fount it, it is called select

so

button, .button { border-radius: 50px 5px 50px 5px; }
 input, .input{border-radius: 50px 5px 50px 5px; }
 select, .select{border-radius: 50px 5px 50px 5px; }

works all good. Now to move the layout around to look more like minimaliser.

 

Edited April 21 by cqpbert
added code