Ondersteuning » Algemeen WordPress » Tekst kleu form veranderen

1 reactie aan het bekijken (van in totaal 1)
  • Beste Tristan,

    Ik heb even gekeken naar de broncode.
    Er zijn twee opties:

    1) Je kunt een child theme maken
    2) Of je kunt gebruik maken van een plugin, genaamd Simple Custom CSS.

    Ik zou voor de plug-in kiezen, dit is een simpele goed werkende en minder tijdrovende plug-in. Installeer de plug-in en activeer het.

    Selecteer het hele onderstaande code (ik heb ‘m al aangepast voor je door middel naar de broncode te kijken van je website 😉 ) en kopieer het naar de plug-in van Simple Costum CSS in je dashboard:

    body {
    	font-family: 'Open Sans', sans-serif;
    	font-size: 15px;
    	background-color: #1c1c1c;
    	color: #50545C;
    	line-height: 1.55;
    	word-wrap: break-word;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	color: #000;
    	font-family: 'Playfair Display', serif;
    }
    a,
    a:hover {
    	text-decoration: none;
    }
    a {
    	color: #23B6B6;
    	-webkit-transition: color 0.3s;
    	transition: color 0.3s;
    }
    a:hover {
    	color: #333;
    }
    /*--------------------------------------------------------------
    Forms
    --------------------------------------------------------------*/
    button,
    input,
    select,
    textarea {
    	font-size: 100%; /* Corrects font size not being inherited in all browsers */
    	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    }
    
    button,
    .button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
    	padding: 15px;
    	border: 0;
    	color: #fff;
    	font-weight: 700;
    	background-color: #23B6B6;
    	-webkit-transition: all 0.3s;
    	transition: all 0.3s;
    	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    
    }
    input[type="submit"] {
    	margin-top: 5px;
    }
    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover {
    	background-color: #17191B;
    	color: #fff;
    	text-decoration: none;
    }
    
    button:focus,
    input[type="button"]:focus,
    input[type="reset"]:focus,
    input[type="submit"]:focus,
    button:active,
    input[type="button"]:active,
    input[type="reset"]:active,
    input[type="submit"]:active {
    	border-color: #aaa #bbb #bbb;
    	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
    }
    
    input[type="checkbox"],
    input[type="radio"] {
    	padding: 0; /* Addresses excess padding in IE8/9 */
    }
    
    input[type="search"] {
    	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    	-moz-box-sizing:    content-box;
    	box-sizing:         content-box;
    }
    
    input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    	-webkit-appearance: none;
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    	border: 0;
    	padding: 0;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    textarea {
    	background-color: #ccc;
    	border: 1px solid #ebebeb;
    	border-radius: 3px;
    	width: 100%;
    }
    
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    textarea:focus {
    	color: #ccc;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"] {
    	padding: 13px;
    }
    
    textarea {
    	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    	padding-left: 8px;
    	vertical-align: top; /* Improves readability and alignment in all browsers */
    	width: 100%;
    	background-color: #ccc
    }

    Mocht je verder nog vragen hebben, dan lees ik dit graag. Ohja, als je de kleuren anders wilt hebben, moet je het even zeggen. De kleuren heb ik als voorbeeld gedaan, alles waar een #ccc voor staat ;).

    Groet,
    Bas

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Tekst kleu form veranderen’ is gesloten voor nieuwe reacties.