Suivez-nous sur Twitter !

Personnalisé BootStrap & Mettre son propos CSS 

Aprés avoir suivi notre premier cours , Je vais maintenant vous apprendre a faire vos codes ! dans BootStrap biensur :)  

1. Les premiers code: 

Nous reprennons la balise du premier cours. 

<div class="row">
  <div class="col-md-8">Pour vos news</div>
  <div class="col-md-4">Pour Vos widgets </div>
</div>

Puis on ajoute nos premiere balise html avant de mettre son css bien sur. 

<div class="row">
  <div class="col-md-8"><div id="box_news">Pour vos news</div></div>
  <div class="col-md-4"><div id="box_widget">Pour vos widgets</div></div>
</div>

Nous allons commencé par un css simple puis par la suite un css mieux développer. 

#box_news{
background-color:#fff;
width:auto;
margin-right:auto;
margin-left:auto;
padding:15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#box_widget{
background-color:#fff;
width:auto;
margin-right:auto;
margin-left:auto;
padding:15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Ce CSS est fait pour bootstrap , il s'adapte a la taille de l'écran :P 

Tu est perdu ? Contacter-Nous dans la partie "Contact"

Prochain tutorial ! Nous allons amélioré le css & Ajouter des fonctions. 

Posté par Work, le 22/04.

Bienvenue dans la première partie du cours - Comment utilise bootstrap.

 

- Les bases : 

Avant de commmencé il faudra télécharger BootStrap ICI . Puis installé sur votre site web

Pour commence nous allons utlise la balise container pour center votre site au milieu.

<div class="container">
  ...
</div>

Il est aussi possible d'utilise cet balise mais elle est un peux moins utilise par des codeurs. 

<div class="container-fluid">
  ...
</div>

Vous pouvez utilise BootStrap mélanger avec vos propos codes. Il est même conseil de le faire, pour éviter que vos sites ressemble a un autre. 

Sur internet il existe aussi des sites qui vous donnez des templates déjà faite ! mais ici on apprendre a les faires ;) 

Avec bootstrap il est aussi simple de faire des box colonnes sur vos sites ! avec les balise suivante. 

<div class="row">
  <div class="col-md-8">Pour vos news</div>
  <div class="col-md-4">Pour Vos widgets </div>
</div>

Si vous voulez utilise le menu fourni avec bootstrap il faudra inclure le code suivant : 

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HabbDesign</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
     
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>


Mais il veut mieux le coder sois même, Voila je vous est données les bases. Dans la partie 2 nous allons commence a personnalisé bootstrap pour inclure c'est propos lignes de codes. Dans la partie 3 nous passerons la partie CSS & partie nous allons terminée par améliorations & l'ajout de plugins & des fonctions.  

Merci rendez-vous dans 2 Jours pour la suite ! 

Posté par Work, le 16/04.

Dans ce cours je vais vous apprendre a crée un systhème de badge ! Trés simple a réalisé. Avec une partie a réalisé tous seul :o  

On commence a crée les tables pour votre syshéme de badges. (Fourni dans ce tutorial ) 

--
-- Structure de la table `badges`
--

CREATE TABLE IF NOT EXISTS `badges` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `badge` varchar(255) NOT NULL,
  `tbadge` varchar(255) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=35 ;

Ensuite il faudra connecter votre ficher config sur votre page Index.php. Maintenant nous allons faire appel a votre table mysql . 

<?php
// On prépare notre requâte passante par "POST"
	if(isset($_POST['badge']))
	{
// On récupère le champ du badge
		$badge = $_POST['badge'];
 // on fait appelle au titre du badge
                  $tbadge=addslashes($_POST['tbadge']); 
                  // on prépare une date
                  $date = date("Y-m-d H:m:s");
		// On vérifie que le champ est remplis
		if($badge != "") {
mysql_query("INSERT INTO badges ( badge,tbadge,date ) VALUES ('$badge','$tbadge','$date')") or die(mysql_error());
			echo 'Votre badge a été ajouté</div>';	
		} else {
		echo 'Oups le champ est vide';	
		}
	}
?>

Il ne vous reste plus cas installé le formulaire pour réquete mysql.

Pour affiché vos badges qui on été uploader rien de plus simple. Il suffit de faire appelle a votre base mysql. 

<?php

  // Notre requête MySQL
    $badges = mysql_query("SELECT * FROM badges  ORDER BY  `id` DESC ");
    while($badge = mysql_fetch_array($badges)) {
        echo '<img src="'.$badge['badge'].'" alt="badge" alt="'.$badge['tbadge'].'  "  /> ';
    }
?>
  

On vous laisse un peu de travail hein :D , Si vous avez des questions vous pouvez me contacter via mon profil. 

 

Attention le tutorial ne fourni pas de css ! 

Posté par Work, le 14/03.

Ce tutoriel n'est qu'un exemple, nous ne tolérons plus les reprises de ce menu.
En reprenant ce menu, vous copiez une partie de notre design.


How to Create #1 : Boîte de profil

Objectif : Création d'une boîte de profil similaire à celle de HabbDesign.


Sur HabbDesign, il existe deux outils vous permettants de faire différentes choses, l'un comme l'autre peuvent s'appeller barre de navigation. L'un, constamment en haut de votre écran vous permets de naviguez sur les différentes parties du site tandis que l'autre vous permets d'accéder à vos données personnelles. C'est cette seconde barre de navigation que j'appelle ici boîte de profil. En gros, votre boîte de profil est l'espace membre qui vous permets de modifier vos données personnelles après votre inscription sur HabbDesign.

 

Dans cette première édition de How to Create, nous allons ainsi apprendre comment faire exclusivement en HTML et CSS votre propre boîte de profil d'une manière le plus compacte possible tout en restant fluide pour des modifications.

Premièrement, nous utilons une feuille de style (ou CSS) où nous indiquerons en tant que #ID et non en tant que .CLASS, pour une question de visibilité, la mise en page du fond qui servira de base pour notre charmante boîte. Ce qui donnera ceci :

/* CSS */
a:link 
{ 
 text-decoration:none; 
} 

#box-profil {
 width: 270px;
 height: 220px;
 background-color: #EBEDEC;
 margin: auto;
padding-top: 10px;
font-family: sans-serif;
 font-size: 12px;
}

On a ainsi mit en place les fondations de notre boîte tout en enlevant un quelconque surlignement qui pourrait apparaître sur les liens. Au niveau du HTML, cela donne ceci :

/* HTML */

Dorénavant, une fois que nous avons la base, nous pouvons mettre en place les trois boutons verts et le bouton rouge servant à la navigation.

/* CSS */
.button-green {
 width: 85%;
  height: 20px;
 background: none repeat scroll 0 0 #27ae60;
 padding: 9px;
 border: medium none;
 border-radius: 5px;
 color: #fff;
 outline: medium none;
 transition: all 0.5s ease 0s;
 cursor: pointer;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  opacity: 1;
}

.button-red {
 width: 85%;
  height: 20px;
 background: none repeat scroll 0 0 #C44133;
 padding: 9px;
 border: medium none;
 border-radius: 5px;
 color: #fff;
 outline: medium none;
 transition: all 0.5s ease 0s;
 cursor: pointer;
 margin: auto;
  margin-top: 10px;
  text-align: center;
opacity: 1;
}
/* HTML */

Profil

Paramètres

Classement

Déconnexion

Nous avons donc dorénavant nos boutons, notre fond et aussi nos textes. Néanmoins, on ne peut pas cliquer dessus. On utilise donc une balise pour mettre en place les liens.


 

Profil

Paramètres

Classement

Déconnexion

Mais au final, nous n'obtenons que de simple boutons sur lequel nous pouvons cliquez. Passons donc à la dernière étape : la personnalisation.

Rajoutons par exemple un effet lorsqu'on survole le bouton, on utilise ainsi la propriété :hover. Disons qu'au survol du bouton avec la souris, son opacité se modifiera.

/* CSS */
.button-green:hover {
  opacity: 0.7;
}

.button-red:hover {
  opacity: 0.7;
}

Par la suite, des boutons sans décoration, ce n'est pas vraiment agréable à l'oeil ! Nous allons donc rajouter des images tout en les positionnant, on indique cela en tant que style.

/* HTML */

Profil

Paramètres

Classement

Déconnexion

Bien évidemment, pour la personnalisation, tout est changeable ! De même pour afficher la tête de la personne qui est connectée et non celle d'une autre, il faudra utiliser une variable PHP. Dans le code ci-dessus, vous n'aurez que ma propre tête, sauf si vous la modifiez. Ce sera donc tout pour cette première édition de How to Create.

 

Posté par -Tengoku. le 08/12.

Les ombres sont des effets de style qui permettent de donner du relief à un élément. Il en existe 2 types : les ombres sur les boîtes et les ombres sur du texte.

Tout d'abord, nous allons voir les ombres sur les boîtes grâce à la propriété box-shadow qui prend pour valeur le décalage horizontal de l'ombre puis le décalage vertical, ensuite l'intensité de l'ombre et enfin sa couleur.

box-shadow: 5px 5px 3px #000000;

Cette propriété peut aussi prendre une autre valeur, le inset qui permet de faire une ombre à l'intérieur de la boîte. Il vous suffira d'écrire inset suivi du même code que pour les ombres à l'extérieur.

box-shadow: 5px 5px 3px #000000
      inset 1px 1px 5px #000000;

Ensuite, nous allons voir les ombre sur du texte grâce à la propriété text-shadow qui a les même valeur que pour le box-shadow donc le décalement de l'ombre, l'intensité et la couleur.

text-shadow: 2px 2px 3px #000000;

Posté par JustHype. le 30/10.

Connecte toi !


Derniers Commentaires

  1. vinc-0717/07 | 20:23
    super tuto, a quand les prochains ?

  2. vinc-0704/04 | 16:19
    Pour posé ce genre de question, il faut y mettre dans le chat. De plus c'est toi qui le crée et non pas un membre de habbdesign.

  3. vean01/04 | 16:35
    slt jemerrer creer un site de fans si posible ?

  4. vinc-0717/03 | 16:45
    Certe, mais il y a des débutant qu'il ne connaissent rien et sont la pour apprendre ;)

  5. Work,15/03 | 20:24
    Il reste que le formulaire html a codé mdr


Page : 1 [ 2 ] 3 4