background preloader

Anatomie d’un thème

Anatomie d’un thème
1 thème, c'est 1 feuille de style, 1 screenshot, et des templates. Style.css : la feuille de style Ce fichier doit s’appeler style.css et il est indispensable. Screenshot.png : 880×660 Le screenshot s’affiche dans l’administration. Les templates C’est quoi un template ? Un template, c’est un fichier PHP est appelé par WordPress pour générer du HTML. <! Le code est principalement du HTML dans lequel on a ajouté 3 zones de PHP pour insérer du contenu variable. stylesheet_url : l’url de la feuille de style, soit blog.fr/wp-content/theme/mon-theme/style.cssname : le nom du site (paramétrable dans l’administration)description : le slogan Cet exemple de index.php est très pauvre en code, certes, mais il est suffisant. Par souci d’espace horizontal, j’utiliserai des double-espace en lieu et place des tabulations habituelles pour indenter le code. Plan d’un blog Pour comprendre le système de templates, il faut avoir en tête le plan d’un site, et particulièrement celui d’un blog en premier abord. Related:  CSS

Créez votre thème Wordpress de A à Z Update du 5 Octobre 2011: les tutoriels ont beau datés de 2007, ils sont en cours de modifications pour y ajouter les fonctionnalités des dernières versions de WordPress. Quoi qu’il en soit, ils sont toujours d’actualité et ont été mis à jour plusieurs fois. Peut-être que vous aimeriez créer votre propre thème pour votre blog et que vous ne savez pas trop comment vous y prendre ? Et bien, dans les semaines qui vont venir, je vais vous expliquer les différentes étapes à suivre, pas à pas, pour que n’importe qui (ou presque) puisse créer son propre thème. On va voir l’installation de WordPress sur votre ordinateur, les différents types de fichiers, leurs hiérarchies, et les interactions entre eux. On va ensuite apprendre à créer un thème relativement simple avec Photoshop et comment l’intégrer dans les différents fichiers. Quoi qu’il en soit, quelques petits prérequis seront nécessaires. « Stay tuned! Articles déjà en ligne: Leçon #1: Installer WordPress en local sur votre ordinateur Fran6

35 meilleurs plugins Wordpress incontournables Wordpress est aujourd'hui le logiciel de création de site CMS le plus utilisé sur le Net. Et ce qui fait son efficacité, ce sont surtout les plugins ou extensions qui permettent à tout webmaster de rendre son site Wordpress encore plus performant. Notamment en terme d'optimisation et de référencement. Définition du plugin Wordpress Un plugin Wordpress, ou extension Wordpress en français, est une fonctionnalité sous forme de script qui permet de personnaliser un peu plus tout site Wordpress. Et ce, afin de faciliter son optimisation, d'améliorer ses performances techniques, ou encore de lui ajouter des éléments interactifs. Ainsi, si vous avez un site Wordpress et que vous souhaitez y installer un forum, une liste de diffusion, des boutons de partages, vous aurez à choisir un plugin Wordpress que vous n'aurez pas à créer vous-même. Quoique vous ayez envie d'installer sur votre site ou blog Wordpress, il existe certainement un plugin Wordpress pour arriver à vos fins.

Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Attention, il ne faut jamais mettre un <p> dans un <q>, c'est invalide.

UHUpage PS0009 - Accueil Autre Compatible in: Firefox, Internet Explorer 7 - 8 - 9, Chrome, Safari, Opera LIVE DEMO: History 2012-02-22 v1.47 for Prestashop v1.4.7.0 2011-11-24 v1.2 for Prestashop v1.4.5.1 2011-02-10 v1.1 for Prestashop v1.3.7.0 2010-12-22 v1.0 for Prestashop v1.3.5.0 Description This theme, UHUpage PS0149, is suitable for merchants who wish to sell their products in the fields of gastronomy and food.Easy to set up with the template installer you can create a unique and customized e-shop. Démonstration Démonstration Front office Fonctionnalités New for Prestashop v1.4.7.0 stable. All advertising images, image size and links can be changed on your admin panel. The phone number in the right upper corner will add more trust of customers to your company. Scroll News This is a new module to let your customers know the preferential information and other information rapidly. Categories of New Products This new module can display new products on the home page - by category!

Web Developers resource for HTML, CSS, Javascript, PHP, SQL and Linux | The Art of Web Destiny Mystic Blue Le thème Destiny Mystic Blue pour PrestaShop est un thème de haute qualité et vous pouvez le personnaliser selon vos goûts et vos envies avec le web design propre, simple et superbe. Facile à installer avec le programme d'installation de template, vous pouvez créer une boutique unique et personnalisée. Vous pouvez voir à quel point il est facile d’installer ce thème en regardant la vidéo de démonstration sur YouTube Personnalisable comme vous le souhaitez, vous pouvez profiter au maximum de ce thème et rendre votre boutique plus facilement reconnaissable. Le thème Destiny est moderne, un design web 2. qui augmentera votre notoriété et créera une boutique à votre image! Avantages dans le thème Destiny sont: Une démo est disponible ici Vous utilisez ce module sur votre boutique en ligne ?

Basic Ready-to-Use CSS Styles This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS. Block-level elements You are creating an image gallery and want to give some subtle styles to the pictures? The Markup For this whole section, I took an a division with the class “block-level” and added the additional classes to it. The Basic CSS Shadows Links

CMS Made Simple - CMS Made Simple - CMSMS - Tips and Tricks One of my first websites was for our local primary school. They wanted a website they could maintain by themselves, so I started looking on the internet for a free CMS, where I found CMS Made Simple. CMS Made Simple is an open source content management system and is built by a group of dedicated volunteers. The way CMSMS is built with a lean core package and if necessary plenty modules to add on, was just what I was looking for! I absolutely don't have a background in the IT sector, but I am a technician. Issues that I have resolved in my own websites, I like to share with others.

70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. Push Your Web Design Into The Future With CSS3 – An introduction to some of the new features in the CSS3 specification. CSS3 Selectors Explained – An overview of some of CSS3 selectors, including selector syntax.

CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.

Related: