SafeInSanity
Junior Member
Falling in love with Proboards again!
Posts: 424
inherit
23917
0
Feb 27, 2020 11:29:13 GMT -8
SafeInSanity
Falling in love with Proboards again!
424
May 2004
wiki
|
Post by SafeInSanity on Oct 28, 2019 17:31:10 GMT -8
is there currently any way to make the buttons that appear in the top navigation menu appear to be round in the visual editor without actually using image buttons? Thanks
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Oct 28, 2019 20:23:58 GMT -8
is there currently any way to make the buttons that appear in the top navigation menu appear to be round in the visual editor without actually using image buttons? Thanks Rounded is easy, round is more difficult. To round the corners, add this to the bottom of your Style Sheet: #navigation-menu > ul li a {border:1px solid black;border-radius:50%;} This will result in rounded corners, but the buttons will be oval in shape because the height is much less than the width. And the width will vary according to the number of characters in the text for each button. For round buttons, you'll need to specify the width and height and allow for the most number of characters in the text. It will look something like this, although you'll probably need to finesse the values depending on the font-size, etc. #navigation-menu > ul li a { text-align:center; border:1px solid black; width:80px; height:70px; padding-top:30px; margin:0px 5px; border-radius:50%; } Also, the 1px solid black border can be omitted if you've defined the background-color of the buttons to be different than the background-color of the nav bar, or if you've already defined the border of the button, earlier in the Style Sheet (or through the Visual Editor).
|
|
SafeInSanity
Junior Member
Falling in love with Proboards again!
Posts: 424
inherit
23917
0
Feb 27, 2020 11:29:13 GMT -8
SafeInSanity
Falling in love with Proboards again!
424
May 2004
wiki
|
Post by SafeInSanity on Oct 30, 2019 6:15:06 GMT -8
Thanks Retread ! I'll test it out today. 👍
|
|