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

World Web Nation · 12 Août 2016

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

Ok pas de soucis je test et je te redis ça

Sampick69 a dit:
WESHHHHHHHHHHH jte tes deja tout dis comment T_T

J'ai pas trouver le brbutton là lmao

deleted13519 · 12 Août 2016

Devilicious a dit:
Ok pas de soucis je test et je te redis ça

J'ai pas trouver le brbutton là lmao

Jte les dis jte fais en 2speed

World Web Nation · 12 Août 2016

JayC SEE a dit:

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;
    }
  }
}

Voilà ça marche, autre chose, comment modifier la largeur de la zone de texte ? C'est sur quel template ?

UAE · 12 Août 2016

Devilicious a dit:
Voilà ça marche, autre chose, comment modifier la largeur de la zone de texte ? C'est sur quel template ?

Quand tu parle de largeur de zone de text, est ce que tu veux dire en CSS ?
Template : dark_taigachat.css
Edit : #taigachat_full #taigachat_message

La largeur width est à 100%, suffit de l'éditer :

NB : N'oublie pas de cliquer sur : Cette réponse à résolue ma question

deleted13519 · 12 Août 2016

C'est tout ce que je tes dis à faire en moins long é_é lel

Gueckoz SEC · 12 Août 2016

Bonjour Devilicious,

Je déplace ton topic en résolu !

Cordialement,
Gueckoz SEC

Résolu Bouton ' Envoyer ' Taigachat Xenforo

World Web Nation

Membre

World Web Nation

Membre

deleted13519

World Web Nation

Membre

UAE

Membre

deleted13519

Gueckoz SEC