Where can I select the followings in Visual Editor?

General
1

Hi,

Where can I select the followings in Visual Editor?
Or
Do I have to type them?

<< the followings >>

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

outline: hidden;

border: none;

I found the others in Visual Editor.

Thanks.

===============================================

.toggle {
width: 62px;
height: 32px;

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

border-radius: 50px;

overflow: hidden;

outline: hidden;

border: none;

cursor: pointer;
background-color: #707070;
position: relative;
top: 50%;
transform: translateY(-74%);

}

2

With regards to the prefixes (-webit-, -moz-), a ‘hack’ in Pinegrow is to convert your CSS to SaSS and then your compiled CSS will contain relevant prefixes (Page > Manage Stylesheets > Use SCSS/Less).

image
image932×200 26.8 KB

Having said that, appearance is not available in the visual editor. You will need to add this yourself by manually writing the code. Same goes with outline.

border: none; is achieved in the editor by filling out all of the border properties and Pinegrow will combine the top, left, bottom and right border to an abbreviated version. border: 0px none #000000. Having selected the style as none will give you your border: none. You can shortcut this by filling out just one border side and selecting the little = button to duplicate this property to all the other border properties.

image
image862×484 17.5 KB

Once again, having said that, you may as well just type border: none; manually.

Not sure if the line of ==== is an addition to your post? but these are all simple to find (however a search box in the visual editor would be great @matjaz :wink:)

Hope this helps

3

==== => the whole source.

Thank you very much.