You can create some beautiful content by using some simple HTML elements. The Warp theme framework offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Warp framework.

Basic HTML Elements

Here is a short demonstration of text-level semanticts. The <p> element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.

Text-Level Semantics

You can emphasize text using the <em> element or to imply any extra importance the <strong> element. Highlight text with no semantic meaning using the <mark> element. Markup document changes like inserted or deleted text with the <del> element or <ins> element. To define an abbreviation use the <abbr> element and to define a definition term use the <dfn> element.

Short List with Links

• YOOtheme - Premium Joomla Templates and WordPress Themes
• Warp Framework - Fast and Slick Theme Framework
• ZOO - Content Application Builder
• Stock Icons - For Web and Print Projects

Quotations and Code

Inline quotations can be defined by using the <q> element.

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

To define a short inline computer code use the <code> element. For a larger code snippet use the <pre> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.

pre {
    margin: 15px 0;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
}

Useful CSS Classes

Here is a short demonstration of all style related CSS classes provided by the Warp framework.

Highlight Content

Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap. To emphasize text with some small boxes use <em> element with the CSS class box.

Use the CSS class dotted to create a dotted horizontal rule.

Tables

Create a zebra stripped table using using the CSS class zebra.

Definition Lists

Create a nice looking definition list separated with a line by using the CSS class separator.

Definition List

A definition list is a list of terms and corresponding definitions. To create a definition list use the <dl> element in conjunction with <dt> to define the definition term and <dd> to define the definition description.

Definition Term

This is a definition description.

Definition Term

This is a definition description.

This is another definition description.

Forms

Create a clearly arranged form layout with fieldset boxes using the CSS class box.

Ajouter des photos adhérEnt

1. Connectez-vous à votre compte.
2. Un nouveau module apparait sur le côté droit MENU UTILISATEUR Cliquer sur AJOUTER PHOTOS ADHERENT
3. Puis cliquer sur Catégorie principale
4. Donner un nom (exemple : Photos de Patrice) et une description à votre catégorie principale sous le groupe Créer puis cliquer sur Créer Catégorie
5. Puis cliquer sur Sous-catégories
6. Sélectionner la catégorie Précédemment créée dans le menu déroulant à côté du bouton RAZ - Sélectionner catégorie -
7. Donner un nom et une description à votre nouvelle sous-catégorie (exemple :2012 02 29 Montagne Noire) sous le groupe Créer puis cliquer sur Créer sous-catégorie
8. Cliquer sur l'onglet Images
9. Sélectionner dans le menu déroulant à coté de RAZ la catégorie précédemment créée
10. Vous pouvez à présent envoyer vos photos dans cette catégorie en passant par
    - Upload fichier unique
    Cliquer sur Parcourir puis allez chercher la photo sur votre ordinateur puis cliquer sur Démarrer Upload
    
    - Upload multiple de fichiers
    Cliquer sur Ajouter images puis allez chercher vos photos sur votre ordinateur (maintenez le bouton Ctrl du clavier enfoncé pour en sélectionner plusieurs dans le même répertoire puis cliquer sur Ouvrir recommencer l'opération si nécessaire puis cliquer sur Démarrer Upload attendre la fin du téléchargement est la page ce mettra à jour avec vos photos cliquer sur le Titre pour éditer les informations (Titre et Description *facultatif)
11. Terminé
    
    Les étapes 3 et 4 ne sont plus nécessaires une fois celles-ci effectuées.
    Une limitation dans le volume et le nombre de sous-répertoire est appliqué par utilisateur pour en connaitre les limite rdv dans l'onglet utilisateur
    Le nom des photos n'est pas important mais dans le cas d'upload multiple ça évite d'avoir à donner un nom plus concis

MENU UTILISATEUR

Description des différents liens dans ce menu

PROPOSER ARTICLE MESSAGERIE

Pour envoyer un article dans la rubrique messagerie

AJOUTER PHOTOS ADHERENT

Pour envoyer des photos dans la galerie photo Adhérent 

VOIR MES ARTICLES

Pour voir créer et modifier tous les articles envoyés

MON PROFIL PUBLIC

Vous avez la possibilité de créer un profil utilisateur avec vos informations de contact qui s'afficheront sous chaque article proposé (pour cela il faut sélectionner l'Auteur quand on propose un article messagerie)

Pour voir créer et modifier mon profil

CHAMPS DISPONIBLES ARTICLE MESSAGERIE

Seulement 3 champs sont obligatoires le NOM la DESCRIPTION et PUBLIER ?
Si les autres champs sont vides ils ne s'afficheront pas

DATE EVENEMEMT

Date de votre évènement s'il y a (sert à classer les articles selon la date)

IMAGE

Cliquer sur SEARCH pour ajouter une photo à votre article
Limite de poids fixé à 2 mo je vous conseille d'envoyer des images de 500ko max et 1980px de largeur pour reduire l'encombrement du site et la durée du chargement

Utilitaire pour redimentionner et compresser les photos

• http://imageresizer.codeplex.com/ Gratuit en anglais mais très simple (clic droit resize picture)
• http://www.01net.com/telecharger/windows/Multimedia/photo_numerique/fiches/50362.html VSO image resizer
  Vidéo utilisation http://www.dailymotion.com/video/x1t7at_vso-image-resizer-tutoriel_tech

PLAN

Affiche un plan Googlemap

il y a 2 façons pour afficher le plan soit vous rentrez directement le nom du lieu Rue/Ville/Pays séparé par des virgules ("13 Boulevard Gambetta, Réalmont, France") ou le point gps Latitude/Longitude toujours séparé par une virgule (40.756,-73.99)

Site pour trouver les coordonnées GPS :

• http://www.toutimages.com/google_gps/sis_gps.htm
• http://itouchmap.com/latlong.html

AUTEUR

Sert à afficher votre profil sous l'article crée
Vous devez au préalable créer votre profil public :
Menu utilisateur / Mon profil Public / Ajouter élément / Auteur

Cliquer sur  + Ajouter un élément et cliquer sur le nom de votre profil

ARTICLE EN RELATION

Vous pouvez ici sélectionner un article précédemment crée par vous ou une autre personne qui s'affichera en lien en dessous de votre article

ARTICLE EXTERNE EN RELATION

Sert à rajouter un lien externe au site ou à la messagerie et infos/rando le lien doit être du type :

TAGS

Le système de tags permet d'afficher un nuage de tags (mot clé) et quand on clique sur l'un des tags, ça liste les articles, pages ou éléments de contenus tagués avec ce tag.

Soit sélectionner un tag déjà présent dans la liste des tags les plus utilisés ou ajouter vos propre tag

PUBLIER ?

Affiche ou non l'article sur le site