Résolu Bouton ' Envoyer ' Taigachat Xenforo

World Web Nation · 12 Août 2016

Bonjour à tous, je voudrais diminuer la largeur du bouton ' envoyer ' ainsi que le rendre a droite a coté du bouton smileys, je bloque dessus

Je sais que c'est du css et que c'est sur la template dark_taigachat_controls mais je ne sais pas quelle ligne est la bonne.

Petit aperçu :

https://reality-gaming.fr/proxy.php?image=https%3A%2F%2Fi.gyazo.com%2F7d96bd6b5024e6b447643c602887081c.png&hash=4c7c8ad4edbeae91f23ee8b373b8325c

Zero. · 12 Août 2016

Devilicious a dit:

Code:

/* Darkimmortal's TaigaChat */

#taigachat_box { height: 300px; border: 1px solid @primaryLighter; padding: 5px; margin: 5px -2px 0 -2px; overflow: auto; overflow-y: scroll; font-size: 11px; background: @primaryLightest; -webkit-text-size-adjust: none; }
.taigachat_reverse #taigachat_box { margin-bottom: 5px; margin-top: 0; }
#taigachat_box li { /*background: @primaryLightest;*/ margin-bottom: 6px; }
#taigachat_controls { text-align: left; padding: 0 0 8px 0; display: table; width: 100%; }
#taigachat_toolbar, #taigachat_toolbar > * { vertical-align: top; }
#taigachat_message { width: 100%; box-sizing: border-box; -ms-box-sizing: border-box; }
#taigachat_message_holder { overflow: auto; padding-right: 5px; }

.taigachat_avatar img { width: 16px; height: 16px; padding: 0; vertical-align: bottom; }

.taigachat_reverse #taigachat_controls { margin: 0; }
#taigachat_send { vertical-align: top; height: 10px;
    width: auto; float: right; }
#taigachat_box .username { font-size: 11px; display: inline; }
#taigachat_box .Popup { display: inline-block; }
#taigachat_box.taigachat_thumbzoom .bbCodeImage { max-width: 203px; }
.taigachat_messagetext { display: inline; word-wrap: break-word; max-width: 100%; }
#taigachat_toolbar { margin-bottom: 5px; }
#taigachat_sidebar #taigachat_toolbar/*, #taigachat_full.taigachat_alt #taigachat_toolbar*/ { display: none }
.taigachat_credit { text-align: right; color: @primaryLighter; font-size: 10px; margin-top: 5px; }

#taigachat_sidebar #taigachat_message { font-size: 11px; }
#taigachat_sidebar #taigachat_send { height: 10px; }
#taigachat_sidebar #taigachat_toolbar { padding-top: 5px; padding-bottom: 5px; }
#taigachat_sidebar #taigachat_controls { padding: 5px 0 0; }
#taigachat_sidebar.taigachat_reverse #taigachat_controls { margin: 0; }
#taigachat_sidebar h3 blockquote { font-size: 11px; color: @contentText; font-weight: normal; }

#taigachat_full #taigachat_box { height: 600px; margin: 0 auto 10px auto; font-size: 13px; }
#taigachat_full #taigachat_message { width: 100%; }
#taigachat_full #taigachat_input { display: table-cell; white-space: nowrap; padding-right: 15px; }
#taigachat_full #taigachat_toolbar { display: table-cell; width: 5%; white-space: nowrap; }
#taigachat_full .DateTime { font-size: 11px; }
#taigachat_full #taigachat_box .username { font-size: 13px; }
#taigachat_full .taigachat_messagetext { display: inline; }

#taigachat_full.taigachat_alt #taigachat_box { font-size: 12px; margin: 0 auto 5px auto;  }
#taigachat_full.taigachat_alt.taigachat_reverse #taigachat_box { margin: 10px auto; }
#taigachat_full.taigachat_alt #taigachat_box .username { font-size: 12px; }
#taigachat_full.taigachat_alt.taigachat_normal #taigachat_controls { margin-top: 10px; }

.taigachat_motd { border: 1px solid @primaryLighterStill; padding: 2px; }
.dark_taigachat_full .taigachat_motd { margin: 0 10px; padding: 4px; }
#taigachat_inchat { font-style: italic; color: @dimmedTextColor }

/*.taigachat_popup_body { height: 100%; }*/
.taigachat_popup { padding: 0; height: 100%; margin: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;  }
.taigachat_popup > div { height: 100%; margin: -20px 0 0 0; padding: 10px 0; border-bottom: 0;  }
.taigachat_popup #taigachat_box { height: auto !important; position: absolute; top: 40px; left: 10px; right: 10px; bottom: 10px; width: auto !important; }
.taigachat_popup #taigachat_controls { position: absolute; left: 10px; right: 10px; top: 25px; width: 97% }
.taigachat_popup.taigachat_reverse #taigachat_box { top: 10px; left: 10px; right: 10px; bottom: 20px; }
.taigachat_popup.taigachat_reverse #taigachat_controls { left: 10px; right: 10px; bottom: 5px; top: auto; }
/*.taigachat_toolbar_enabled*/ .taigachat_popup #taigachat_box { top: 60px; }
/*.taigachat_toolbar_enabled*/ .taigachat_popup.taigachat_reverse #taigachat_box { bottom: 40px; top: 22px; }
.taigachat_popup .taigachat_motd { margin: 10px 0 0 10px; border: none; }
.taigachat_popup .taigachat_credit { display: none }
.taigachat_popuphtml { min-width: 0 !important; }
.taigachat_canban { display: none }

.taigachat_smilies_list { max-width: 250px; max-height: 225px !important; }
.taigachat_smilies_list li { display: inline; }
.taigachat_smilie { padding: 4px 6px; color: #FF285C; display: inline-block !important; }
.taigachat_bbcode { padding: 0; }
.xenForoSkin .taigachat_bbcode_color { display: block; width: 20px; height: 20px; background:url(styles/dark/color_swatch.png) no-repeat center; cursor: pointer !important; }
.taigachat_bbcode_smilie { display: block; width: 20px; height: 20px; background:url(styles/dark/smilie.png) no-repeat center; cursor: pointer !important; }

.taigachat_ignored { opacity: 0.4; }
.taigachat_me { font-style: italic; }
.taigachat_activity { color: @primaryLightish; font-style: italic; }
.taigachat_ignorehide { display: none !important; }

/* TinyMCE XF 1.2 compatibility */

.taigachat_bbcode span.mceIcon, .taigachat_bbcode img.mceIcon {display:block; width:20px; height:20px}
.taigachat_bbcode .mceIcon {background:url(styles/dark/icons.png) no-repeat 20px 20px}
.taigachat_bbcode span.mce_bold {background-position:0 0}
.taigachat_bbcode span.mce_italic {background-position:-60px 0}
.taigachat_bbcode span.mce_underline {background-position:-140px 0}
.taigachat_bbcode span.mce_strikethrough {background-position:-120px 0}
.taigachat_bbcode span.mce_link {background-position:-500px 0}
.taigachat_bbcode span.mce_image {background-position:-380px 0}

#taigachat_smilies_box { margin: 9px; overflow: hidden; display: none; *zoom: 1; }
.taigachat_popup #taigachat_smilies_box { top: 200px; position: absolute; z-index: 10000; padding: 5px; background: @contentBackground; border: 1px solid @primaryLightish; }
.taigachat_popup.taigachat_reverse #taigachat_smilies_box { top: 0px; }
#taigachat_smilies_box .tabs { min-height: 0; }
#taigachat_smilies_box .smilieContainer { max-height: 150px; overflow: auto; }
#taigachat_smilies_box .primaryContent, #taigachat_smilies_box .secondaryContent { border-bottom: none; }
#taigachat_smilies_box .tabs a { height: 18px; line-height: 18px; font-size: 11px; }
#taigachat_smilies_box .smilieCategory li { display: inline-block; margin: 0; padding: 2px; cursor: pointer; line-height: 1.6; }
  

@media (max-width:@maxResponsiveNarrowWidth)
{
    #taigachat_controls { display: block; !important; }
    #taigachat_toolbar { padding-top: 5px; padding-bottom: 5px; }
    #taigachat_input { display: block !important; }
    .taigachat_popup.taigachat_reverse #taigachat_box { bottom: 70px !important; }
    .taigachat_popup:not(.taigachat_reverse) #taigachat_box { top: 85px !important; }
  
}

.tagShoutbox {
background: url("styles/tag.png") no-repeat left center transparent;
height: 18px
width: 13px;
padding-left: 18px;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
display: inline-block;
padding-left: 3px;
}

Essaie de mettre le même que le miens par exemple :

Code:

#taigachat_send {    vertical-align: top;
    float: right;
    height: 27px;
    width: auto;
    line-height: 0px; }

Rivals · 12 Août 2016

Tu peux aussi forcer une propriété CSS à s'appliquer en ajoutant !important à la fin de celle-ci.

World Web Nation · 12 Août 2016

Toujours pas :

Pourtant :

Rivals · 12 Août 2016

Devilicious a dit:
Toujours pas :

Pourtant :

Tu vois bien qu'il est plus gros de hauteur, si tu veux l'élargir c'est la propriété width qu'il faut changer

Zero. · 12 Août 2016

Devilicious a dit:
Toujours pas :

Pourtant :

Essaie ce que Bower vient de dire
EDIT:
Après edit les dimensions par rapport à ce que tu veux x)

Zero. · 12 Août 2016

Devilicious a dit:
Toujours pas :

Pourtant :

Ca fonctionne bien, le bouton est plus grand en largeur par rapport à ton 1er screen, change le width ^^

World Web Nation · 12 Août 2016

Ok merci !

Rivals · 12 Août 2016

Devilicious a dit:
Ok merci !

Tu peux être plus précis ?

World Web Nation · 12 Août 2016

Je peux avoir les dimensions de celui de rg c'est pile la taille que je veux ? Merci les gars

Zero. · 12 Août 2016

Devilicious a dit:
Je peux avoir les dimensions de celui de rg c'est pile la taille que je veux ? Merci les gars

J'ai copier le CSS du bouton directement :

Code:

line-height: 23px!important;
    height: 24px!important;
    padding: 2px 5px 2px 5px!important;

World Web Nation · 12 Août 2016

Voila merci Reaqz et pour le mettre a coté du bouton smiley c'est comment ?

Zero. · 12 Août 2016

Devilicious a dit:
Voila merci Reaqz et pour le mettre a coté du bouton smiley c'est comment ?

Normalement c'est déjà de base à côté '-'

World Web Nation · 12 Août 2016

Bah non sinon j'aurai pas demander ;-)

Personne ? :mmh:

deleted13519 · 12 Août 2016

Devilicious a dit:
Personne ?

Je pourrais t'aider si j'ai un visuel en direct avec ton style

World Web Nation · 12 Août 2016

Pas de soucis tu veux voir quoi exactement ?

deleted13519 · 12 Août 2016

Devilicious a dit:
Pas de soucis tu veux voir quoi exactement ?

Mp ton site

UAE · 12 Août 2016

Alors pour le thème Tellurium de Brivium il suffit de créer une classe CSS et de l'utiliser sur le bouton envoyé de la shoutbox. Car par défault la class CSS des boutons basé sur Material Design cause ce petit bug au niveau des boutons de la TaigaChat Pro

Dans le template : dark_taigachat_controls cherche :

Code:

<input type='submit' id='taigachat_send' value='&gt;' class='button primary' />

Remplace par :

Code:

<input type='submit' id='taigachat_send' value='&gt;' class='btn btn-primary' />

Maintenant qu'on utilise plus la class CSS button primary mais la nouvelle class : btn btn-primary il faudera la definir.
Dans le template : stylium_extra_css.css ajoute :

Code:

.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:7px 9px;font-size:13px;line-height:1.846;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.btn:hover,.btn:focus,.btn.focus{color:#444444;text-decoration:none}
.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}
.btn.disabled,.btn[disabled],
fieldset[disabled] .btn{cursor:not-allowed;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}
a.btn.disabled,
fieldset[disabled] a.btn{pointer-events:none}
.btn-primary{color:#ffffff;background-color:#2196f3;border-color:transparent}
.btn-primary:focus,.btn-primary.focus{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}
.btn-primary:hover{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}
.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}
.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#ffffff;background-color:#0a68b4;border-color:rgba(0,0,0,0)}
.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none}
.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#2196f3;border-color:transparent}.btn-primary .badge{color:#2196f3;background-color:#ffffff}

//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

@btn-font-weight:                normal;

@btn-default-color:              #444;
@btn-default-bg:                 #fff;
@btn-default-border:             transparent;

@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             transparent;

@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
@btn-success-border:             transparent;

@btn-info-color:                 #fff;
@btn-info-bg:                    @brand-info;
@btn-info-border:                transparent;

@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             transparent;

@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              transparent;

@btn-link-disabled-color:        @gray-light;

// Allows for customizing button radius independently from global border radius
@btn-border-radius-base:         @border-radius-base;
@btn-border-radius-large:        @border-radius-large;
@btn-border-radius-small:        @border-radius-small;


// Buttons ====================================================================

#btn(@class,@bg) {
  .btn-@{class} {
    background-size: 200%;
    background-position: 50%;

    &:focus {
      background-color: @bg;
    }

    &:hover,
    &:active:hover {
      background-color: darken(@bg, 6%);
    }

    &:active {
      background-color: darken(@bg, 12%);
      #gradient > .radial(darken(@bg, 12%) 10%, @bg 11%);
      background-size: 1000%;
      .box-shadow(2px 2px 4px rgba(0,0,0,.4));
    }
  }
}

#btn(default,@btn-default-bg);
#btn(primary,@btn-primary-bg);
#btn(success,@btn-success-bg);
#btn(info,@btn-info-bg);
#btn(warning,@btn-warning-bg);
#btn(danger,@btn-danger-bg);
#btn(link,#fff);

.btn {
  text-transform: uppercase;
  border: none;
  .box-shadow(1px 1px 4px rgba(0,0,0,.4));
  .transition(all 0.4s);

  &-link {
    border-radius: @btn-border-radius-base;
    .box-shadow(none);
    color: @btn-default-color;

    &:hover,
    &:focus {
      .box-shadow(none);
      color: @btn-default-color;
      text-decoration: none;
    }
  }

  &-default {

    &.disabled {
      background-color: rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.4);
      opacity: 1;
    }
  }
}

.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: 0;
  }

  &-vertical {
    > .btn + .btn,
    > .btn + .btn-group,
    > .btn-group + .btn,
    > .btn-group + .btn-group {
      margin-top: 0;
    }
  }
}

World Web Nation · 12 Août 2016

Petit rappel :

Je cherche a faire déplacer le bouton envoyer vers la droite a coté du bouton smiley.

Aperçu :

UAE · 12 Août 2016

Devilicious a dit:
Petit rappel :

Je cherche a faire déplacer le bouton envoyer vers la droite a coté du bouton smiley.

Aperçu :

Je t'ai déjà fournis la solution plus haut 100% testé et fonctionnelle. J'ai le même thème depuis juillet 2015

deleted13519 · 12 Août 2016

Devilicious a dit:
Petit rappel :

Je cherche a faire déplacer le bouton envoyer vers la droite a coté du bouton smiley.

Aperçu :

Jte tes déjà tout dis comment T_T tu la juste mal fais ...

Résolu Bouton ' Envoyer ' Taigachat Xenforo

World Web Nation

Membre

Zero.

Rivals

World Web Nation

Membre

Rivals

Zero.

Zero.

World Web Nation

Membre

Rivals

World Web Nation

Membre

Zero.

World Web Nation

Membre

Zero.

World Web Nation

Membre

deleted13519

World Web Nation

Membre

deleted13519

UAE

Membre

World Web Nation

Membre

UAE

Membre

deleted13519