CSS Personnalise

A propos du CSS Personnalise

La fonctionnalite CSS Personnalise est dipsonible exclusivement pour les utilisateurs des comptes PRO. Elle permet de personnaliser la structure et le design de votre weblog sans avoir a passer en Habillage Avance.

Pourquoi utiliser le CSS Personnalise

Lorsqu'un utilisateur convertit son habillage en habillage avance, il se prive de certains habillages et de certaines fonctionnalites pour pouvoir, en contrepartie, modifier les pages HTML directement. L'utilisation du CSS Personnalise pour modifier l'Habillage de votre weblog vous permet de conserver toutes les fonctionnalites de TypePad tout en ayant la liberte de personnaliser votre weblog.

Comment utiliser le CSS Personnalise

Pour utiliser le CSS Personnalise, allez dans Weblog > Habillage puis cliquez sur le lien Editer un CSS personnalise situe dans la zone "Votre Theme & Mise en Page". Vous arrivez dans un ecran avec une large zone de saisie. Saisissez dans ce champ les informations concernant votre CSS Personnalise.

Les informations saisies seront rattachees a la fin de votre feuille de style existante. Elles prendront le dessus sur toutes les proprietes des CSS personnalises et des CSS existants qui auront pu etre definies par ailleurs.

Structure CSS de TypePad et Classes de reference

Tous les weblogs TypePad qui n'utilisent pas les Habillages Avances partagent une page et une structure HTML commune de facon a gagner en flexibilite. Le present document decrit cette structure de page de facon a faciliter la tache de seux qui souhaitent utiliser la fonctionnalite CSS personnalise.

Generalites sur le structure de page

Chaque page HTML de votre weblog, que ce soit la page d'accueil, une page d'archive, une page de permalien ou toute autre page est construite sur la meme structure, la meme hierarchie et la meme nomenclature.

Vous pouvez visualiser la structure de la page du weblog en 2 formats differents:

• Structure HTML
• Representation graphique

Divs interieures et exterieures

Quasiment toutes les pages ont un double structure imbriquée, c'est a dire qu'elle ont des conteneurs interieurs (inner) et exterieurs (outer). Si cela peut sembler redondant, cela apporte de nombreux avantages:

• La boite exterieure fournit le moyen de specifier les dimensions d'un element, alors que la boite interieur permet de specifier les proprietes de marge interne et de bordure. Ceci elimine le besoin d'utiliser des astuces complexes et obscure du CSS pour faire en sorte que ces proprietes fonctionnent ensemble.
• Provides a hook for sliding door background image tricks: specifying different background images for the top-left and bottom-right boundaries of a box for example.
• Provides many hooks for global page backgrounds allowing for richer, more dynamic and diverse weblog designs.

Elements de la page

Chaque Habillage de weblog est un assemblage des elements decrits ci-apres.

Conteneur

La div Container enveloppe la totalite de la page et fournit les contrôles necessaires pour l'habillage et le positionnement de la page d'un point de vue général.

Bannière

La bannière #banner contient le titre du blog et sa description. Les designer l'utilisent souvent pour y inclure un logo ou bien un entête graphique.

Corps de page

#pagebody entoure tous les éléments qui constituent le contneu du blog, les typelistes, les notes, trackback, comentaires etc...

Weblog Columns: Alpha, Beta, Delta and Gamma

There are a number of content areas a weblog may have. If your layout consists of multiple columns, then each of these columns is placed in one of four divs using the following id's: alpha, beta, delta and gamma.

The names of these content areas are intentionally ambiguous, as there is nothing that states that must be placed on the page in a specific order, or that they contain a specific piece of content.

In TypePad the contents of these content areas depends upon how you have chosen to layout your content modules in the Weblog > Design area.

Post Content

Posts, or "entries," are the pieces of weblog content that you write. Each post contains the following elements.

• Post header, or title
• Post body
• Extended post body, or a link to the extended post body
• Post footer: permalink, post date, post author, etc.

Posts have the following class and div structure.

div.entry    h3.entry-header    div.entry-content        div.entry-body        (div.entry-more OR p.entry-more-link)    p.entry-footer

The .entry-body and .entry-more divs frame weblog post content and, to the greatest extend possible, try to keep malformed post content from disrupting the layout and style of the rest of the page.

Tip: It is recommended that users utilize our WYSIWYG post interface or use valid XHTML whenever possible to avoid posts from disrupting the layout of your weblog.

Visitor Feedback

A weblog wouldn't be a weblog without visitor feedback, often found in the form of comments and TrackBacks. Typically every post is followed by visitor feedback. The following sections detail the class and styles for the various elements of displaying and allowing people to post their own visitor feedback.

Comments

This encapsulates all published comments for a given post.

a#comments (for hash-links)div.comments    h3.comments-header    div.comments-content        (the following sections are per-comment and repeat)        div.comment             div.comment-content             p.comment-footer

Comment Form

When post has comment turned on, or "open," a form as well as additional text is typically displayed. This encapsulates that form and content.

div.comments-open    h3.comments-open-header    div.comments-open-content        form    div.comments-open-footer

Closed Comments

When post has comments turned off, or when comments are in a state of "closed," meaning previously published comments are visible, but new comments are forbidden, there is often a little explanatory text saying, "Comments on this post are closed." This encapsulates that content.

p.comments-closed

Trackbacks

This encapsulates all TrackBack data published to the weblog.

div.trackbacks    a#trackback (for hash-link on page)    h3.trackbacks-header    div.trackbacks-info    div.trackbacks-content        div.trackback            div.trackback-content            p.trackback-footer

Content Modules

Virtually all content that is not an archive list, post, comment or TrackBack is considered a "Content Module." Content modules are typically located in a weblog's sidebars or in other words, their left and/or right columns.

Every content module however follows the same basic structure. Each has a div corresponding to the following elements.

• Container
• Header
• Content

Module Layout

Modules follow the same basic layout as content area sections, with a container div, a header, and a content div. Each content module has an additional classname to allow styling of it specifically, in addition to it using normal module styling.

div.module-<type>.module    h2.module-header    div.module-content        ul.module-list

Of course, not all content modules utilize a list format for their content as the example above does, but content module content can in fact contain any arbitrary HTML.

TypeLists

TypeLists typically come in two flavors: normal text lists, such as link TypeLists and people TypeLists, and TypeLists with thumbnails, such as music and reading TypeLists.

Text-based TypeList

div.module-typelist.module    h2.module-header    div.module-content        ul.module-list

Thumbnail/Image-based TypeList

div.module-typelist.module    h2.module-header    div.module-content typelist-thumbnailed        ul.module-list            li (repeat)                div.typelist-thumbnail                div.typelist-description

Archive List Content Modules

There are three primary types of archive listings that TypePad supports. The following style information applies to all three of these.

• Date Based
• Category Based
• Individual

div.archive (OR multiply-classed div.archive-date-based.archive)    h2.archive-header    div.archive-content        ul.archive-list

As with a post, there is an enclosing div, a header, a content div, and additionally a styled list. The rule for the entry header also applies to the archive list as well.

Recent Photos

The Mixed Media Layouts Artistic, Moblog1, Moblog2 and Timeline have a Recent Photos module which is basically just a TypeList with an a/img nested pair in each li.

div.module-recent-photos.module    h2.module-header    div.module-content        ul.module-list            li (repeat)                a                    img

Generally they're styled identically for all layouts, with the only difference being the margin on the li, and padding/margin on the module-content, and sometimes a background treatment on .module-recent-photos.

Calendars

Our calendar content modules are one of the few content modules that utlize tables. There are two variants of these content modules.

• Classic Calendar (.module-calendar)
• Mixed Media Template Calendar (.module-mmt-calendar)