Les blocs de base

Construire les blocs de base dans l'environnement XenForo.

  Menu

Construire les blocs de base dans l'environnement XenForo.  

  1. Généralités
  2. Les blocs de base
  3. Les blocs de navigation
  4. Les blocs de menu
  5. Les blocs informatifs
  6. Les blocs d'alerte

  Généralités

La grande majorité des blocs dans XenForo sont construits sur la base suivante :

HTML: 
<div class="block">
	<div class="block-container">
		Mon contenu...
	</div>
</div>

block permet de séparer chaque bloc empilé de 20px grâce à l'élément CSS margin-bottom: 20px;
Tandis que block-container ajoute les éléménts CSS de base XenForo : bordures, radius, couleur de fond et couleur du texte.

Less: 
.block-container {
	color: #141414;
	background: #fefefe;
	border-width: 1px;
	border-style: solid;
	border-top-color: #dfdfdf;
	border-right-color: #d8d8d8;
	border-bottom-color: #cbcbcb;
	border-left-color: #d8d8d8;
	border-radius: 4px;
}

Ensuite d'autres attributs de construction s'ajoutent suivant ce que l'on veut faire. Ci-dessous vous trouverez les exemples de bloc les plus courants et qui permettent de faire à peu près tout dans XenForo. Les possibilités sont nombreuses et rares sont les limites à votre imagination.

  Les attributs pour la construction de blocs de base

  • block
  • block-container
  • block-header
  • block-minorHeader
  • block-desc
  • block-row
  • block-row--minor
  • block-footer

block-header block-desc (facultatif)
block-row
block-row
block-row

block-minorHeader block-desc (facultatif)
block-row block-row--minor
block-row block-row--minor
block-footer (facultatif)
HTML: 
<div class="block">
	<div class="block-container">
		<div class="block-header">
			block-header
			<span class="block-desc">block-desc</span>
		</div>
		<div class="block-row">
			block-row
		</div>
		<div class="block-row">
			block-row
		</div>
		<div class="block-row">
			block-row
		</div>
	</div>
</div>

HTML: 
<div class="block">
	<div class="block-container">
		<div class="block-minorHeader">
			block-minorHeader
			<span class="block-desc">block-desc</span>
		</div>
		<div class="block-row block-row--minor">
			block-row block-row--minor
		</div>
		<div class="block-row block-row--minor">
			block-row block-row--minor
		</div>
		<div class="block-footer">
			block-footer
		</div>
	</div>
</div>

  Les attributs pour la construction de blocs de navigation

  • block
  • block-container
  • block-header
  • blockLink
  • is-selected

block-header
blockLink blockLink blockLink blockLink is-selected blockLink
HTML: 
<div class="block">
	<div class="block-container">
		<div class="block-header">
			block-header
		</div>
		<a href="#" class="blockLink">blockLink</a>
		<a href="#" class="blockLink">blockLink</a>
		<a href="#" class="blockLink">blockLink</a>
		<a href="#" class="blockLink is-selected">blockLink is-selected</a>
		<a href="#" class="blockLink">blockLink</a>
	</div>
</div>

  Les attributs pour la construction de blocs de menu

  • block
  • block-container
  • block-body
  • block-row
  • block-row--separated
  • block-textHeader

block-textHeader

block-row block-row--separated

block-textHeader

block-row block-row--separated

block-textHeader

block-row block-row--separated
HTML: 
<div class="block">
	<div class="block-container">
		<div class="block-body">
			<div class="block-row block-row--separated">
				<h3 class="block-textHeader">
					<a href="#">block-textHeader</a>
				</h3>
				block-row block-row--separated
			</div>
			<div class="block-row block-row--separated">
				<h3 class="block-textHeader">
					<a href="#">block-textHeader</a>
				</h3>
				block-row block-row--separated
			</div>
			<div class="block-row block-row--separated">
				<h3 class="block-textHeader">
					<a href="#">block-textHeader</a>
				</h3>
				block-row block-row--separated
			</div>
		</div>
	</div>
</div>

  Les attributs pour la construction de blocs informatifs

  • block
  • block-container
  • block-body
  • block-row
  • block-row--separated
  • contentRow
  • contentRow-main
  • contentRow-header
  • contentRow-minor
  • contentRow-figure
  • contentRow-figure--text
  • contentRow-figure--fixedSmall

  1. 1

    contentRow-header

    contentRow-minor
  2. 2

    contentRow-header

    contentRow-minor
  3. 3

    contentRow-header

    contentRow-minor
HTML: 
<div class="block">
	<div class="block-container">
		<ol class="block-body">
			<li class="block-row block-row--separated">
				<div class="contentRow">
					<span class="contentRow-figure 
								  contentRow-figure--text 
								  contentRow-figure--fixedSmall">1</span>
					<div class="contentRow-main">
						<h2 class="contentRow-header">contentRow-header</h2>
						<div class="contentRow-minor">contentRow-minor</div>
					</div>
				</div>
			</li>
			<li class="block-row block-row--separated">
				<div class="contentRow">
					<span class="contentRow-figure
								  contentRow-figure--text
								  contentRow-figure--fixedSmall">2</span>
					<div class="contentRow-main">
						<h2 class="contentRow-header">contentRow-header</h2>
						<div class="contentRow-minor">contentRow-minor</div>
					</div>
				</div>
			</li>
			<li class="block-row block-row--separated">
				<div class="contentRow">
					<span class="contentRow-figure
								  contentRow-figure--text
								  contentRow-figure--fixedSmall">3</span>
					<div class="contentRow-main">
						<h2 class="contentRow-header">contentRow-header</h2>
						<div class="contentRow-minor">contentRow-minor</div>
					</div>
				</div>
			</li>
		</ol>
	</div>
</div>

  Les attributs pour la construction de blocs d'alerte

  • block
  • blockMessage
  • blockMessage--error
  • blockMessage--warning
  • blockMessage--success
  • blockMessage--iconic

blockMessage blockMessage--error
blockMessage blockMessage--warning
blockMessage blockMessage--success

blockMessage blockMessage--error
blockMessage--iconic
blockMessage blockMessage--warning
blockMessage--iconic
blockMessage blockMessage--success
blockMessage--iconic
HTML: 
<div class="block">
	<div class="blockMessage blockMessage--error">
		blockMessage blockMessage--error
	</div>
</div>
					
<div class="block">
	<div class="blockMessage blockMessage--warning">
		blockMessage blockMessage--warning
	</div>
</div>
					
<div class="block">
	<div class="blockMessage blockMessage--succes">
		blockMessage blockMessage--success
	</div>
</div>

HTML: 
<div class="block">
	<div class="blockMessage blockMessage--error blockMessage--iconic">
		blockMessage blockMessage--error blockMessage--iconic
	</div>
</div>
					
<div class="block">
	<div class="blockMessage blockMessage--warning blockMessage--iconic">
		blockMessage blockMessage--warning blockMessage--iconic
	</div>
</div>
					
<div class="block">
	<div class="blockMessage blockMessage--success blockMessage--iconic">
		blockMessage blockMessage--success blockMessage--iconic
	</div>
</div>
Discussion

  1. Besoin d'aide supplémentaire ?

    Rendez vous dans la discussion dédiée à ce tutoriel et posez vos questions à la communauté.
  • Publié le
    17 Octobre 2022
  • Affichages
    1.991
Haut