Télécharger NeoFrag
Connexion

[TUTORIEL] Un Widget sans fond

104 vues
[TUTORIEL] Un Widget sans fond
Blober

32 sujets, 249 réponses

Staff
Message non lu
Bonjour à tous,

Je vais vous expliquer comment avoir un widget sans fond.

Etape 1 : Copier le fichier
Fichier widget.tpl.php dans ./neofrag/themes/default/views/ à copier dans (créer si n'existe pas) ./overrides/themes/default/views/


Etape 2 : Modifier le fichier
Ouvir la copie nouvellement créée du fichier widget.tpl.php

Remplacer tout le fichier par :

<div class="row">
<div class="col-md-3">
<div class="caption text-center">
  <h6><?php echo $this->lang('nobg_widget'); ?></h6>
 </div>
 <a href="#" class="thumbnail live-editor-overview" data-style="panel-nobg">
  <img src="<?php echo image('live_editor/panel_nobg.png'); ?>" alt="" />
 </a>
</div>
<div class="col-md-3">
 <div class="caption text-center">
  <h6><?php echo $this->lang('white_widget'); ?></h6>
 </div>
 <a href="#" class="thumbnail live-editor-overview" data-style="panel-default">
  <img src="<?php echo image('live_editor/panel_default.png'); ?>" alt="" />
 </a>
</div>
<div class="col-md-3">
 <div class="caption text-center">
  <h6><?php echo $this->lang('dark_widget'); ?></h6>
 </div>
 <a href="#" class="thumbnail live-editor-overview" data-style="panel-dark">
  <img src="<?php echo image('live_editor/panel_dark.png'); ?>" alt="" />
 </a>
</div>
<div class="col-md-3">
 <div class="caption text-center">
  <h6><?php echo $this->lang('red_widget'); ?></h6>
 </div>
 <a href="#" class="thumbnail live-editor-overview" data-style="panel-red">
  <img src="<?php echo image('live_editor/panel_red.png'); ?>" alt="" />
 </a>
</div>
</div>


Enregistrer.


Etape 3 : Ajouter un fichier
Télécharger le fichier : https://mega.nz/#!5hBAQAJQ!sHT-CwpqpmBz1qD7yzaP70a…

Créer un dossier ./overrides/themes/default/images/live_editor/ et y placer le fichier juste téléchargé.


Etape 4 : Modification du style
Fichier style.css dans ./neofrag/themes/default/css/ à copier dans (créer si n'existe pas) ./overrides/themes/default/css/

Ouvir la copie nouvellement créée du fichier style.css

Rechercher :
.panel-red > .panel-body hr {
border-color: #f26048;
}

Et ajouter après :
/* panel-nobg */
.panel.panel-nobg {
background-color: transparent;
}

Enregistrer.

Vous pouvez désormais rafraîchir la page en faisant ctrl + f5 et hop le tour est joué!
Vous avez un widget avec un fond transparent disponible dans le Live Editor.
N'hésitez pas à me reprendre si quelque chose manque de précision.
End User Support

rules make masters and masters make rules


https://discord.gg/btbAZU6 - Rejoignez nous sur le Discord de NeoFrag!
Retour
2 participants
2 réponses
Blober

32 sujets, 249 réponses

Staff
Message non lu
#UP

Guide mis a jour.
End User Support

rules make masters and masters make rules


https://discord.gg/btbAZU6 - Rejoignez nous sur le Discord de NeoFrag!
Glazael

0 sujet, 1 réponse
Message non lu
Bonjour !

Super tuto ! mais je me suis permis de le "mettre à jour" et de publier mes fichiers ici : https://github.com/Glazael/neofrag-overrides

Afin de faciliter la récupération de l'override tout prêt pour ceux que cela intéresse ! Ou simplement de mieux visualiser les modifications dans l’ensemble de son arborescence.

liste des modifs :

    /overrides/themes/default/css/style.css
/* panel-nobg */

.panel.panel-nobg {
background-color: transparent;
}


    /overrides/themes/default/lang/en.php
$lang['nobg_widget'] = 'No background';



    /overrides/themes/default/lang/fr.php
$lang['nobg_widget'] = 'Widget sans fond';



    /overrides/themes/default/views/live_editor/widget.tpl.php
<div class="col-md-4">
<div class="caption text-center">
<h6><?php echo $this->lang('nobg_widget'); ?></h6>
</div>
<a href="#" class="thumbnail live-editor-overview" data-style="panel-nobg">
<img src="<?php echo image('live_editor/panel_nobg.png'); ?>" alt="" />
</a>
</div>



Et pour conclure, merci de me donner l'occaz de geeker ;)
Retour