Nexmestre

Outils proly Nexmestre citudoroy


Bouts html sur un mot dy dycoy, ex « KIPS »

<a href="http://dicoy.citudor.com/explandict/kips/" target="_blank">kips</a>
kips


Traduxyon html contenant un mot o une phrase Franraco-Français, ex « KIPS »

kips <h6><i>L'équipe</i></h6>


kips

L’équipe

Installer sur une page un contenu dans les 2 langues, ly citudoroy y ly francoy

Attenxyon à ce que ly fichier function.php de WordPress soit muni dy cette formule, car sinon wordpress créera des paragraphes automatiquement ta cause du filtre nomé « autop » ces balises paragraphe viendront alors tout cassé. Utlisez cette formule pour le désactiver.

Code PHP

remove_filter('the_content', 'wpautop');

Code HTML


<label for="francais" class="bouton-langue"><div class="drapox fr"></div>En français traditionnel</label>
<input type="radio" name="lang" id="francais"/>

<label for= »citudoroy » class= »bouton-langue »><div class= »drapox cit »></div>Citudoroy Normax</label>
<input type= »radio » name= »lang » id= »citudoroy » checked/>

<div class= »contenu-langue »>
<div class= »francais »>
<h2>Bienvenue sur notre site.</h2> Ceci est un Texte en Français, très cher ami.
</div>

<div class= »citudoroy »>
<h2>Komsavala ta noy cit.</h2> Cty un Texte citudoroy moy tamy.
</div>

</div>

Code CSS

/* ------- changeur de langue --------*/

.bouton-langue,
.bouton-langue:visited {
color: #fff;
border:1px solid #FF8585;
background: #FF0000;
box-shadow: inset 0px 3px #FF3F3F;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);

padding: 8px 22px;
font-size: 18px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: 300;
transition: background 0.1s ease-in-out;
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bouton-langue:hover,
.bouton-langue:visited:hover,
.bouton-langue:focus,
.bouton-langue:visited:focus {
background: #ff6600;
}

.bouton-langue:active,
.bouton-langue:visited:active {
box-shadow: 0px 1px 0px 0px #01192e;
}

.contenu-langue {
width: 100%;
margin: 0px auto;
padding: 0px;
text-align: justify;
display: block;
}

/* Checkbox Hack */
input#citudoroy[type=radio],
input#francais[type=radio]{
opacity: 0;
}

label.bouton-langue {
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}

/* Default State */
/* Toggled State */
#francais:checked ~ .contenu-langue .francais{
display: block;
}

#francais ~ .contenu-langue .francais{
display: none;
}

#francais:checked ~ .contenu-langue .citudoroy{
display: none;
}

#citudoroy ~ .contenu-langue .citudoroy{
display: none;
}

#citudoroy:checked ~ .contenu-langue .francais{
display: none;
}

#citudoroy:checked ~ .contenu-langue .citudoroy{
display: block;
}

/*Drapox*/
.drapox{
outline:1px solid #fff;
height:2px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
}

.drapox.cit{
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIxMCAxNDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij4KICAgIDxnIGlkPSJzb2xlaWwiIHRyYW5zZm9ybT0ibWF0cml4KDAuMTcwMDQsMCwwLDAuMjIxMDUyLDAsLTAuMzE1NzkxKSI+CiAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiBzdHlsZT0iZmlsbDpyZ2IoMjU1LDIxMCwwKTsiLz4KICAgIDwvZz4KICAgIDxnIGlkPSJib3VjYW5lcmllIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjE3MDA0LDAsMCwwLjk1Nzg5MSwwLDk1LjQ3MzMpIj4KICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTIzNSIgaGVpZ2h0PSI1MCIvPgogICAgPC9nPgogICAgPGcgaWQ9InJldm9sdXRpb24iIHRyYW5zZm9ybT0ibWF0cml4KDIuMzMyODUsMCwwLDAuNSwtMjE4LjY3NSw0Ny43MzY3KSI+CiAgICAgICAgPHJlY3QgeD0iOTMuNzM3IiB5PSI3MS44NDIiIHdpZHRoPSI5MC4wMTgiIGhlaWdodD0iMjMuNjMyIiBzdHlsZT0iZmlsbDpyZ2IoMjU1LDM4LDApOyIvPgogICAgPC9nPgogICAgPGcgaWQ9ImNpdHVkb3IiIHRyYW5zZm9ybT0ibWF0cml4KDAuOTk5OTk5LDAsMCwwLjk5OTk5OSwxMy40NjUxLC01LjMzODRlLTA3KSI+CiAgICAgICAgPHBhdGggZD0iTTcxLjUyNiw2MS40MjlMODUuOTQyLDU0Ljg0OEw3NC41NjUsMjAuMjc1TDkxLjUzNSwxMS44MTZMMTA4LjUwNSwyMC4yNzVMOTcuMTI3LDU0Ljg0OEwxMTEuNTQ0LDYxLjQyOUw5MS41MzUsNzEuODQyTDcxLjUyNiw2MS40MjlaIiBzdHlsZT0iZmlsbDp3aGl0ZTtzdHJva2U6cmdiKDEyOCwxMjgsMTI4KTtzdHJva2Utd2lkdGg6MXB4OyIvPgogICAgPC9nPgogICAgPGcgaWQ9ImNhZHJlIiB0cmFuc2Zvcm09Im1hdHJpeCgyLjU5NjU3LDAsMCwyLjI4NjY3LDAsMC40MDYzMikiPgogICAgICAgIDxwYXRoIGQ9Ik04MC44NzYsNjIuNTJMMCw2Mi41MkwwLC0wLjMxNkw4MC44NzYsLTAuMzE2TDgwLjg3Niw2Mi41MlpNMC45NjMsNjEuNDI2TDc5LjkxNCw2MS40MjZMNzkuOTE0LDAuNzc3TDAuOTYzLDAuNzc3TDAuOTYzLDYxLjQyNloiIHN0eWxlPSJmaWxsOndoaXRlOyIvPgogICAgPC9nPgo8L3N2Zz4K');
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-size: auto;
width: 20px;
height: 13px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left top;
float:left;
margin-right:10px;
}

.drapox.fr {
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCjxwYXRoIGZpbGw9IiNlZDI5MzkiIGQ9Im0wLDBoOTAwdjYwMGgtOTAweiIvPg0KPHBhdGggZmlsbD0iI2ZmZiIgZD0ibTAsMGg2MDB2NjAwaC02MDB6Ii8+DQo8cGF0aCBmaWxsPSIjMDAyMzk1IiBkPSJtMCwwaDMwMHY2MDBoLTMwMHoiLz4NCjwvc3ZnPg0K');
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-size: auto;
width: 20px;
height: 13px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left top;
float:left;
margin-right:10px;
}

/* ------- fin de changeur de langue --------*/

Recap CODEPEN