Hey folks, I’ve been using this plugin and thought I’d a couple of the recurring questions. The way the plugin works is, you have to manually add the class “multilanguage-input” to the text input element. For instance, if your original code/HTML looks like this:
<div id="some_meta_field_div">
<label for="some_meta_field_id">My Meta Field</label>
<input type="text" id="some_meta_field_id" name="some_meta_field" value="" />
</div>
Then you would change it to this:
<div id="some_meta_field_div">
<label for="some_meta_field_id">My Meta Field</label>
<input type="text" id="some_meta_field_id" name="some_meta_field" class="multilanguage-input" value="" />
</div>
What happens is, AFTER the page is rendered in your browser, a jQuery script looks over your page for any <textarea> or <input> text fields with that class name, and it applies all the magic at that point.
(That actually causes some problems in a number of advanced cases, like when you’re using it on a field that gets created with Javascript.. but that’s a topic for another day.)
By the way, I’ve added some cool styling to mine that you guys might appreciate. If it doesn’t work for you.. well, sorry. I’m not getting paid to support someone else’s plugin ?? haha.
Found somewhere around line 76 of qtranslate-extended.php:
<style type="text/css">
.multilanguage-element{position: relative;}
.multilanguage-inputs{margin-bottom:5px; display:block;}
.multilanguage-inputs *{display:none;}
.multilanguage-inputs .current{display:block !important;}
.multilanguage-flags{
padding-top: 2px;
display:block;
height: 17px;
overflow: hidden;
position:absolute;
top: -19px;
right: 1px;
background-color:white;
border: 1px solid #dfdfdf;
border-bottom-color: white;
}
.multilanguage-flags img{margin: 0 3px; opacity:0.4;filter:alpha(opacity=40);cursor:pointer;border:1px solid silver; display: none;}
.multilanguage-flags img.current{opacity:1 !important;filter:alpha(opacity=100) !important;border:1px solid black !important; display: inline !important; float: right;}
.multilanguage-element:hover .multilanguage-flags img {
display: inline !important;
}
.multilanguage-element:hover .multilanguage-flags img.current {
float: none;
}
</style>
PS — Modifying plugin files directly is generally not recommended. Future updates will almost certainly break your changes (if not your entire site). Use at your own risk!