Till00
Aktives Mitglied
Thread Starter
- Dabei seit
- 12.08.2010
- Beiträge
- 1.002
- Reaktionspunkte
- 82
Hallo,
ich versuche gerade, für einen Blog eine Textbox genau so aussehen zu lassen, wie eine andere im gleichen Menü auf der gleichen Seite. Das ganze ist eine Wordpress-Installation und die erste (gut aussehende) Textbox ist Teil des Themes. Die zweite Textbos, die aussehen soll wie die erste, kommt von einem Plugin, das es Besuchern ermöglichen soll, den Blog zu abonnieren.
Hier mal der Abschnitt der CSS-Datei des Themes:
Hier, was ich mittels Jetpack "Edit CSS" hinzugefügt habe:
Der Quelltext des Widgets/Plugins:
Hier noch drei Screenshots aus Chrome:
http://cl.ly/X8oj
http://cl.ly/X8sf
http://cl.ly/X8Wt
Auf dem zweiten Screenshot sieht man, wie es aussehen soll, auf dem dritten, wie es tatsächlich aussieht. Wie Ihr seht, habe ich mich schon etwas angenähert, nur die Box um die Textbox und den Button will mir nicht gelingen.
ich versuche gerade, für einen Blog eine Textbox genau so aussehen zu lassen, wie eine andere im gleichen Menü auf der gleichen Seite. Das ganze ist eine Wordpress-Installation und die erste (gut aussehende) Textbox ist Teil des Themes. Die zweite Textbos, die aussehen soll wie die erste, kommt von einem Plugin, das es Besuchern ermöglichen soll, den Blog zu abonnieren.
Hier mal der Abschnitt der CSS-Datei des Themes:
PHP:
#searchform, .subscribe { margin-bottom:20px; padding:0;}
#searchform div, #search-form div { width:100%; padding:10px 15px; height:55px; border:1px solid #424242; background-color:#232323; box-sizing:border-box; -moz-box-sizing:border-box;}
#searchform label, #search-form label { display:none;}
#searchform input, #search-form input { padding:5px 0; width:75%; height:25px; font-size:18px; color:#fff; border:0 none; background-color:#232323;}
#searchform input::-webkit-input-placeholder, #search-form input::-webkit-input-placeholder { color:#636363; }#searchform input::-moz-placeholder, #search-form input::-moz-input-placeholder { color:#636363; } /* firefox 19+ */#searchform input:-ms-input-placeholder, #search-form input:-ms-input-placeholder { color:#636363; } /* ie */#searchform input:-moz-placeholder, #search-form input:-moz-input-placeholder { color:#636363; }
#searchform #searchsubmit, #search-form .submit { padding:5px 0; width:20%; height:35px; float:right; font-size:16px; color:#fff; text-align:center; border:0 none; background-color:#E45635; cursor:pointer;}
Hier, was ich mittels Jetpack "Edit CSS" hinzugefügt habe:
PHP:
#emailSub-form div { width: 100%; padding: 10px 15px; height: 55px; border: 1px solid #424242; background-color: #232323; box-sizing: border-box; -moz-box-sizing: border-box;}
#emailSub-form label { display: none;}
input[type="text"],input[type="email"],textarea input { padding: 5px 0; width: 75%; height: 25px; font-size: 18px; color: #fff; border: 0 none; background-color: #232323;}
input[type="text"],input[type="email"],textarea input::-webkit-input-placeholder { color: #636363;}
input[type="text"],input[type="email"],textarea input::-moz-input-placeholder { color: #636363;}
/* firefox 19+ */input[type="text"],input[type="email"],textarea input:-ms-input-placeholder { color: #636363;}
/* ie */input[type="text"],input[type="email"],textarea input:-moz-input-placeholder { color: #636363;}
input[type="submit"],textarea { padding: 5px 0; width: 20%; height: 35px; float: right; font-size: 16px; color: #fff; text-align: center; border: 0 none; background-color: #E45635; cursor: pointer;}
Der Quelltext des Widgets/Plugins:
PHP:
<ul id='emailSub-widget'> <div id="emailSub-output" style="display:none;"></div> <form id="emailSub-form" action="<?php echo site_url('wp-admin/admin-ajax.php')?>"> <input type="hidden" name="success_msg" id="emailSub-success" value="<?php echo $instance['success_msg'];?>" /> <input type="hidden" name="fail_msg" id="emailSub-fail" value="<?php echo $instance['fail_msg'];?>" /> <?php global $polylang; if(isset($polylang)) { ?> <input type="hidden" name="language" id="emailSub-language" value="<?php echo pll_current_language();?>" /> <?php } ?> <input type="text" name="email" id="emailSub-email" placeholder="Email:" /> <input type="submit" class="submit" value="<?php echo $instance['submit_button'];?>" /> <?php if ($promotion): ?> <br /> <div style="margin-top: 0.4em; font-size: 70%;">Created by <a href="http://www.webfish.se">Webfish</a>.</div> <?php endif; ?> </form>
</ul>
Hier noch drei Screenshots aus Chrome:
http://cl.ly/X8oj
http://cl.ly/X8sf
http://cl.ly/X8Wt
Auf dem zweiten Screenshot sieht man, wie es aussehen soll, auf dem dritten, wie es tatsächlich aussieht. Wie Ihr seht, habe ich mich schon etwas angenähert, nur die Box um die Textbox und den Button will mir nicht gelingen.