/image%2F1968241%2F20160202%2Fob_b24ac1_photoweb.jpg)
Articles avec #tuto tag
Astuce : Replier tous les nœuds dans un fichier de code Visual Studio.
Bonjour, aujourd'hui une petite astuce Visual Studio qui vous facilitera la vie.
Il arrive que l'on veuille replier les nœuds des différentes fonctions dans un fichier de class pour avoir une meilleure visibilité de notre code. Pour ce faire, vous pouvez utiliser le raccourci suivant :
Ctrl + m
une indication apparaît en bas de l'écran
Cliquez ensuite sur :
Ctrl + a
Tous les nœuds se replient.
Pour revenir au mode normal, refaites la combinaison Ctrl + m.
Profitez bien de cette astuce et bon code =)
HTML/Css : Agencer les éléments html facilement grâce au "display flex"
Bonjour et bienvenue dans ce tuto. Nous allons voir comment utiliser l'attribut css "FLEX".
qu'est-ce que "flex" ?
Flex est un attribut css de la propriété "display". A la différence des display inline et block (pour les plus courants), flex permet plus de précision dans le placement d’éléments html.
Nous allons pouvoir placer les éléments enfant suivant 2 axes, nous donnant par défaut 9 positions :
Ce schéma vous donne les différentes positions (basiques) possibles avec flex.
Mise en pratique
Pour tester vous pouvez créer une page html vide sous notepad++ (ou votre éditeur préféré).
Dans la balise body, ajoutez une balise <div id="test">.
Définissez la taille de votre div à width et height 100% et la taille de la div à width et height 20%. Ajoutez un background-color à la div pour la reconnaître.
exemple : https://jsfiddle.net/hgxdwg6q/
Par défaut, la balise body est en display:block
votre div se retrouve alors en haut à gauche de la fenêtre.
La première chose à faire est de passer le display à "flex" (nb: un display se pose sur le parent pour agir sur le positionnement des enfants). Nous allons ensuite utiliser la propriété "flex-flow" pour indiquer si nous voulons aligner les éléments enfants sur une ligne ou une colonne et spécifier si les éléments enfants doivent revenir à la ligne si la place ne suffit pas.
syntaxe :
- flex-flow: row no-wrap
- flex-flow: row wrap
- flex-flow: column no-wrap
- flex-flow: column wrap
Pour agir sur le placement, utilisez "justify-content" et "align-items". Ces propriétés possèdent les mêmes attributs (en voici les principaux) :
- flex-start
- flex-end
- center
deux attributs sont un peu spécifique :
- space-around (aligne les éléments enfant, un espace identique est ajouté entre les éléments ainsi qu'avant le premier et après le dernier)
- space-between (ajoute un espace de taille équivalent entre les éléments mais colle le premier et dernier élément aux bord du parent)
un petit exemple (jouez avec les propriétés de flex pour vous faire la main) : https://jsfiddle.net/nght044p/
Quelques exemples pour illustrer :
display:flex;
flex-flow:row no-wrap;
justify-content:center;
align-items:center;
display:flex;
flex-flow:row no-wrap;
justify-content:flex-start
align-items:flex-start;
display:flex;
flex-flow:row no-wrap;
justify-content:flex-end;
align-items:center;
Le mot de la fin
Pour bien comprendre le fonctionnement de flex, il est impératif de faire des essais et de tester. D'autres option plus avancées existent.
A vos claviers et bon code =)
Modifier la master page de SharePoint via SharePoint Designer 2013
Bonjour,
Aujourd'hui je vais vous expliquer la marche à suivre pour modifier la master page de SharePoint en passant par SharePoint Designer 2013.
Vous devez avoir :
- Un SharePoint avec des droits de modification.
- SharePoint Designer installé.
Pour commencer, ouvrez SP Designer. Vous devriez tomber sur la page d'accueil.
Cliquez sur la vignette "Ouvrir le site". Vous allez alors avoir accès à une fenêtre d'explorateur Windows qui va vous permettre de choisir votre site SP.
Un login / mdp vous sera surement demandé. Entrez les et SP Designer s'ouvre sur le site sélectionné.
Dans la barre de gauche, vous allez trouver toutes les catégories qui vont vous servir à modifier de nombreux paramètres.
Ici, nous allons nous intéresser au menu "Page maître". Cliquez dessus.
Pour ajouter une page maître, cliquez sur le type de page maitre voulu dans la barre de menu.
Votre page maitre apparait dans la liste des pages maîtres.
Il ne vous reste plus qu'à cliquer sur son nom pour entrer dans la vue de parametre de la page et de cliquer sur "Modifier le fichier".
Conclusion :
Grâce à la modification de la page maître existante ou à la création d'une nouvelle page maître, vous pourrez personnaliser à souhait votre site SP.
Dans l'onglet "Tous les dossiers" (en dessous de "Pages maîtres) vous pourrez y stocker les fichier CSS et JS qui vous permettront de customiser encore plus votre site SP.
Merci de votre lecture.
AS
