Description
Le moyen le plus simple de créer votre site web.
L’extension Twentig vous aide à personnaliser votre thème basé sur des blocs et à construire des pages magnifiques — aucune compétence en codage et en design n’est nécessaire.
Avec des blocs Gutenberg magnifiés, des modèles de page préconçus, des compositions de blocs, des styles globaux supplémentaires et des Google Fonts que vous pouvez héberger localement sur votre serveur, vous avez tout pour créer un superbe site web qui s’affiche parfaitement sur tous les appareils.
Allez plus loin avec les blocs Gutenberg.
Twentig améliore les blocs Gutenberg de base, amenant l’éditeur de blocs WordPress à un niveau supérieur de design et de créativité.
Fonctionnalités de blocs Gutenberg puissantes. Twentig propose des styles supplémentaires, des réglages de blocs avancés, et des classes CSS. Du style des colonnes aux formes de séparation des groupes en passant par les réglages typographiques, vous disposez des meilleurs outils pour personnaliser les blocs Gutenberg.
Personnalisation des blocs facilitée. Nous avons ajouté la quantité optimale de fonctionnalités aux blocs Gutenberg de base. Ainsi, vous pouvez facilement personnaliser vos blocs en fonction de vos besoins en quelques clics.
Créez votre site web avec des modèles prêts à l’emploi.
Twentig propose des centaines de compositions et de modèles de pages préconçus avec des blocs — il est donc plus facile et rapide que jamais de créer de belles pages.
Templates flexibles. Choisissez parmi une variété de compositions et de modèles de page polyvalents que vous pouvez combiner et adapter à votre projet. Notre bibliothèque de templates de blocs permet un large éventail d’utilisations et des possibilités de design infinies.
Design professionnel. Nos modèles de page sont optimisés pour les appareils mobiles et apportent instantanément à vos pages un aspect professionnel.
Personnalisez Twenty Twenty-Three ou tout autre thème basé sur des blocs.
Grâce à ses puissantes fonctionnalités, Twentig vous aide à personnaliser les thèmes Twenty Twenty-Three & Twenty Twenty-Two ou tout autre thème conçu pour l’édition complète du site.
Styles globaux avancés. Changez facilement l’apparence de votre site web grâce à nos styles globaux supplémentaires. Personnalisez les polices à l’aide des Google Fonts de votre choix que vous pouvez héberger localement sur votre serveur. Modifiez la mise en page du site en éditant la largeur du contenu.
Blocs de thème améliorés. Twentig étend les blocs Gutenberg qui structurent l’ensemble de votre site avec des paramètres avancés comme le point de rupture responsive de la navigation, la largeur du logo sur mobile, l’icône du menu, la longueur de l’extrait, la proportion de taille de l’image mise en avant et bien d’autres encore.
Compositions de blocs supplémentaires. Twentig vous permet de créer rapidement votre blog, votre en-tête et votre pied de page avec des compositions de blocs prédéfinies.
Vous utilisez le thème Twenty Twenty-One ou Twenty Twenty ?
Si vous préférez utiliser l’outil de personnalisation, Twentig propose des options avancées pour personnaliser les thèmes Twenty Twenty-One et Twenty Twenty.
Personnalisation avancée du thème. De l’affichage des articles du blog en grille à la colonne latérale, en passant par le menu fixe, la mise en page de l’en-tête et du pied de page, notre extension vous offre des possibilités infinies pour améliorer votre thème WordPress. Changez l’apparence de votre site web en personnalisant les polices (Google Fonts), la mise en page du site, les styles globaux, la page 404, et plus encore.
Modèles de pages personnalisés. Contrôlez entièrement l’apparence de votre page avec nos modèles de pages. Retirez le titre de la page, l’en-tête, le pied de page ou définissez un en-tête transparent. Vous pouvez désormais utiliser les blocs Gutenberg pour créer une bannière, une page de destination, une page « coming soon », et plus encore.
Sites web de démarrage. Au lieu de partir de zéro, vous pouvez rapidement importer l’un des sites web de démarrage Twentig.
Liste des fonctionnalités de Twentig
Consultez les captures d’écran pour voir comment Twentig peut transformer votre thème et les blocs Gutenberg.
STYLE GLOBAUX SUPPLÉMENTAIRES DU THÈME
Dans l’éditeur du site (Apparence > Éditeur), vous trouverez des options de style supplémentaires dans la section Styles Twentig :
- Options de police pour vous permettre de sélectionner des familles de polices supplémentaires dans le catalogue Google Fonts
- Option pour héberger les Google Fonts en local
- Largeur du contenu
- Grande largeur
- Styles d’espacement prédéfinis pour faciliter la conception de pages
RÉGLAGES DE BLOCS DE THÈME SUPPLÉMENTAIRES
- Navigation : point de rupture responsive, icône de menu, taille de l’icône de menu, style au survol, style actif, styles de bouton
- Logo du site : largeur de l’image sur mobile
- Boucle de requête : alignement vertical, espacement des blocs, largeur de colonne responsive
- Titre de la publication : options typographiques
- Extrait de la publication : nombre maximum de mots
- Image mise en avant de la publication : styles (arrondi, ombre, cadre), proportion de taille de l’image, formes, filtre noir & blanc
- Étiquettes d’articles et Catégories d’articles : styles (contour, pilule, hashtag, simple)
- Auteur de la publication : lien vers les archives de l’auteur, texte inline, forme de l’avatar
- Pagination : styles pour numéros de page (cercle, carré, simple), styles pour page précédente et page suivante (pilule, carré)
- Article précédent et Article suivant : styles (empilé, flèche)
- Titre d’archive : option pour masquer le préfixe
RÉGLAGES DE BLOCS GUTENBERG SUPPLÉMENTAIRES
- Blocs Gutenberg : marge supérieure et marge inférieure, visibilité responsive
- Groupe : ombre, forme de séparation
- Colonnes : disposition responsive, alignement du texte
- Colonne : styles (ombre, ombre dure, bordure supérieure), lien étiré
- Média & texte : styles (ombre, chevauchement), disposition responsive, ordre d’empilement inversé, lien étiré, pleine hauteur
- Bannière : styles (ombre, bordure intérieure, arrondi), proportion de taille, formes, lien étiré, effet au survol
- Titre : options typographiques, décoration
- Paragraphe : options typographiques
- Liste : styles (tiret, coche, flèche, bordure, sans puce, en ligne), espacement
- Séparateur : styles (astérisques, pointillé, tiret), largeur, hauteur
- Image : styles (arrondi, ombre, cadre, bordure), formes, filtre noir & blanc
- Galerie : variante empilée, styles (arrondi, cadre), colonnes à largeur fixe, proportion de l’image, alignement vertical, disposition responsive, taille de légende, bordure, filtre noir & blanc
- Blocs YouTube, Vimeo, SoundCloud, et Vidéo : style (cadre)
- Icônes de réseaux sociaux: effet au survol
- Citation et Citation en exergue : styles supplementaires
- Tableau : style (bordure, bordure intérieure), alignement vertical
- Nuage d’étiquettes : style (pilule)
- Recherche : style (souligné)
BIBLIOTHÈQUE DE MODÈLES
Des centaines de compositions de blocs Gutenberg et modèles de page regroupés selon les catégories suivantes :
- Colonnes
- Texte et Image
- Texte
- Section de titre de page
- Bannière
- Appel à l’action
- Liste
- Nombres, statistiques
- Galerie
- Vidéo, son
- Contact
- Équipe
- Témoignages
- Logos, clients
- Tarifs
- FAQ
- Evènements, programme
- Requête (pour les thèmes basés sur des blocs)
- En-têtes (pour les thèmes basés sur des blocs)
- Pieds de page (pour les thèmes basés sur des blocs)
- Pages (Page d’accueil, À propos, Services, Contact)
- Page unique
Et plus encore
- Consultez notre guide de démarrage rapide pour apprendre les bases de l’utilisation de Twentig.
- Abonnez-vous à notre newsletter pour recevoir du contenu exclusif, des conseils et des mises à jour.
- Abonnez-vous à notre chaîne YouTube pour les tutoriels à venir.
Vous aimez Twentig ?
- Notez-le sur WordPress.
- Faites un don pour soutenir son développement.
Captures d’écran
Twentig. Le moyen le plus simple de créer un site web adapté à votre projet — aucune compétence en codage et en design n’est nécessaire. 
Personnalisez votre site web avec des Google Fonts. Modifiez facilement les polices de votre thème avec les Google Fonts de votre choix. 
Créez vos pages en un rien de temps. Utilisez la bibliothèque de modèles de page Twentig pour construire de magnifiques pages. 
Créez avec des compositions de blocs Gutenberg. Choisissez parmi des centaines de compositions prêtes à l’emploi que vous pouvez combiner et adapter. 
Personnalisez les blocs Gutenberg. Transformez les blocs Gutenberg de base avec des réglages et des styles supplémentaires. 
Créez un superbe blog. Personnalisez le design de votre blog comme bon vous semble. 
Personnalisez l’en-tête. Changez la mise en page et le style, affichez des icônes de réseaux sociaux ou un bouton d’appel à l’action. 
Personnalisez votre pied de page. Modifiez la mise en page et le style, modifiez le copyright, retirez « Propulsé par WordPress », et plus encore.
Installation
Installer Twentig
Pour installer et activer Twentig :
- Connectez-vous à votre tableau de bord WordPress.
- Cliquez sur Extensions > Ajouter.
- Tapez Twentig dans la boîte de recherche.
Vous pouvez également cliquer sur « Téléverser une extension » pour téléverser le fichier .zip de l’extension. - Cliquez sur « Installer maintenant ».
Une fois l’installation terminée, cliquez sur Activer.
Installer le thème par défaut de WordPress
Pour tirer pleinement parti de Twentig et de l’éditeur de blocs Gutenberg, nous vous recommandons d’utiliser le thème Twenty Twenty-Three ou Twenty Twenty-Two (ou Twenty Twenty-One si vous préférez utiliser un thème classique avec l’outil de personnalisation).
Pour installer et activer le thème Twenty Twenty-Three :
- Connectez-vous à votre tableau de bord WordPress.
- Cliquez sur Apparence > Thèmes.
- Recherchez le thème Twenty Twenty-Three et cliquez sur Activer.
Après l’installation
Les fonctionnalités de Twentig apparaissent dans l’éditeur de blocs Gutenberg et l’éditeur de site (ou dans l’outil de personnalisation pour les thèmes classiques).
- Dans l’éditeur de blocs Gutenberg, trouvez les compositions Twentig en cliquant sur l’icône « + ».
- Dans l’éditeur de blocs Gutenberg, trouvez des réglages de blocs supplémentaires dans l’onglet « Bloc » de la colonne latérale de réglages (panneaux Style, Réglages Twentig et Avancé) — en fonction du bloc sélectionné.
- Pour les thèmes basés sur des blocs tels que Twenty Twenty-Three, dans l’éditeur de site (Apparence > Éditeur), vous pouvez trouver des options de style supplémentaires (Google Fonts, largeur du contenu, grande largeur) dans les sections Styles et Styles Twentig.
- Pour les thèmes Twenty Twenty-One et Twenty-Twenty, dans l’outil de personnalisation du thème (Apparence > Personnaliser), trouvez nos options supplémentaires dans les panneaux Identité du site, Couleurs et Options Twentig.
Pour plus de détails, consultez notre guide de démarrage rapide.
FAQ
-
Quels sont les prérequis pour utiliser Twentig ?
-
Nous vous recommandons d’utiliser la dernière version de WordPress pour tirer pleinement parti de Twentig et de l’éditeur de blocs.
-
Dois-je installer l’extension Gutenberg ?
-
Non, l’utilisation de l’extension Gutenberg sur un site en ligne n’est pas recommandée car certaines fonctionnalités sont expérimentales et instables. De plus, Twentig n’est pas entièrement compatible avec l’extension Gutenberg.
-
Twentig est-il facile à utiliser ?
-
Avec Twentig, aucune compétence en codage ou en design n’est nécessaire. Vous pouvez personnaliser les thèmes WordPress basés sur des blocs et les blocs Gutenberg en quelques clics. Nos compositions et templates préconçus sont optimisés pour les appareils mobiles et facilitent la création de pages de qualité professionnelle.
-
Avez-vous un guide de démarrage rapide ?
-
Oui, vous pouvez le trouver sur notre site web.
-
Puis-je héberger moi-même mes Google Fonts ?
-
Oui ! Avec Twentig, vous pouvez héberger vos Google Fonts localement sur votre propre serveur. Par défaut, les Google Fonts sont hébergées localement pour les thèmes basés sur des blocs.
-
Comment insérer un modèle préconçu ?
-
Pour insérer une composition ou une mise en page :
- Dans l’éditeur de blocs Gutenberg, placez votre curseur à l’endroit où vous souhaitez insérer la composition.
- Cliquez sur l’icône « + » pour ajouter un nouveau bloc.
- Cliquez sur l’onglet « Compositions ».
- Parcourez les catégories et cliquez sur la composition de blocs que vous souhaitez insérer.
-
Comment personnaliser le thème Twenty Twenty-Three et les thèmes basés sur des blocks Gutenbeg avec Twentig ?
-
Pour personnaliser votre thème basé sur des blocs, ouvrez l’Éditeur de site (Apparence > Éditeur). De là, vous pouvez voir l’icône Styles dans le coin supérieur droit. Dans la section Styles, Twentig ajoute des Google Fonts aux panneaux Typographie.
À côté de l’icône Styles, vous pouvez trouver l’icône [tw]. Dans la section Twentig Styles, vous pouvez modifier la famille des polices des titres (avec des Google Fonts), la largeur du contenu et la grande largeur.
Twentig fournit également des paramètres supplémentaires aux blocs Thème et aux blocs Design qui vous permettent de personnaliser votre site web comme bon vous semble.
-
Comment personnaliser les thèmes Twenty Twenty-One et Twenty Twenty avec Twentig ?
-
Pour personnaliser votre thème, lancez l’outil de personnalisation (Apparence > Personnaliser). De là, vous pouvez facilement apporter des modifications à votre site web et les prévisualiser avant de les publier. Vous trouverez nos options supplémentaires dans les panneaux Identité du site, Couleurs et Options Twentig.
Pour vous permettre de contrôler entièrement l’apparence de votre page, Twentig propose 4 modèles de page personnalisés. Pour changer le modèle d’une page :
- Ouvrez la page que vous souhaitez modifier.
- Dans la colonne latérale de réglages, ouvrez l’onglet Page.
- Dans le panneau « Modèle », sélectionnez le modèle souhaité.
- Mettez à jour la page pour appliquer la modification.
-
Twentig supporte-t-il les écritures de droite à gauche ?
-
Oui ! Twentig prend en charge les écritures de droite à gauche (RTL).
Avis
Contributeurs/contributrices & développeurs/développeuses
« Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
Contributeurs
“Toolkit for Block Theme (Gutenberg Blocks, Templates, Patterns, Google Fonts) – Twentig” a été traduit dans 5 locales. Remerciez l’équipe de traduction pour ses contributions.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Journal
1.6.1
Release date: May 18, 2023
- Code Quality: Updates the WP_HTML_Tag_Processor code for parity with Core in WP 6.2.1.
- Enhancement: Updates the Google Fonts .json file.
1.6
Release date: April 3, 2023
- New: Organizes Twentig block controls within the new styles and settings tabs.
- New: Adds a setting to remove links from the Post Terms block.
- New: Adds a setting to the Group block to make it entirely clickable if it contains a link.
- New: Adds an option to disable Openverse (WordPress dashboard > Twentig > Settings).
- Code Quality: Uses the new WP_HTML_Tag_Processor to adjust the HTML block markups.
- Code Quality: Renames patterns categories and updates patterns to make them compatible with WordPress 6.2.
- Code Quality: Removes outdated welcome guide.
1.5.5
Release date: February 23, 2023
- New: Adds rounded and square styles to Social Icons.
- Fix: Adjusts CSS of the Media & Text overlap style.
- Fix: Adjusts CSS of the Post Featured Image styles for compatibility with the overlay setting.
- Fix: Updates the markup of Gutenberg block patterns that use the List block.
- Code Quality: Removes aspect ratio support for old browsers.
- Code Quality: Removes border from the hard shadow style to only use shadow.
- Enhancement: Moves vertical alignment controls to the block toolbar for Gallery and Query Loop blocks.
1.5.4
Release date: January 9, 2023
- Enhancement: Updates the Google Fonts .json file.
- Fix: Adds missing translations inside patterns.
1.5.3
Release date: November 24, 2022
- Enhancement: Updates the Google Fonts .json file.
- Fix: Adjusts CSS of the outline buttons for Twenty Twenty-One and Twenty Twenty to fix inconsistency caused by WordPress 6.1.
- Fix: Removes !important declaration on column block that was overriding some theme styling.
- Fix: For Twenty Twenty-One, prevents PHP error when the uploaded logo has no dimensions.
1.5.2
Release date: November 3, 2022
- Fix: Fixes PHP errors for child themes and Cover block.
1.5.1
Release date: November 2, 2022
- Fix: Fixes PHP errors inside the back end.
1.5
Release date: November 1, 2022
- Enhancement: Updates the Google Fonts .json file.
- Enhancement: Adds responsive columns setting to the Gallery block. Deprecates the “Stack on mobile” setting.
- Enhancement: Uses range slider controls for the block spacing for the Query Loop block.
- New: Adds inline layout class to the Group block.
- New: Adds text gradient class to the Heading, Paragraph, Query Title and Post Title blocks.
- New: Adds margin settings to the List Item block.
- Compatibility: Deprecates the Twentig vertical spacing in favor of the new block spacing setting for the Columns block.
- Compatibility: Makes the block patterns compatible with Twenty Twenty-Three.
- Compatibility: Makes the Navigation Link styles compatible with the global styles of the Buttons elements.
- Compatibility: Makes the table styles compatible with the new border settings.
- Compatibility: Deprecates Twentig content and wide width settings in favor of the new core global styles.
1.4.8
Release date: September 19, 2022
- Enhancement: Updates the Google Fonts .json file.
- Fix: For Twenty Twenty-One and Twenty Twenty, host the fonts locally only when Google Fonts is used (props @pmmueller).
1.4.7
Release date: August 2, 2022
For Gutenberg blocks:
- New: Adds responsive order classes to the Column block.
- New: Adds responsive text alignment classes to the Previous post and Next post blocks.
For block themes:
- Enhancement: Updates the Google Fonts .json file.
- Fix: Adjusts CSS for the gallery caption.
1.4.6
Release date: July 21, 2022
For block themes:
- New: Adds font options to let you select additional font families from the Google Fonts catalog (Site Editor > Twentig Styles > Typography > Font 1, Font 2)
- New: Adds option to host Google Fonts locally (Site Editor > Twentig Styles > Typography > Font Hosting). Please note that Google Fonts are now hosted locally by default.
- New: Adds font family support to the Heading block.
- New: Adds styles (asterisks, dotted, dashed), width and height settings to the Separator block.
- New: Adds styles (stack, arrow) to the Previous Post and Next Post blocks.
- New: Adds styles (circle, square, plain) to the pagination’s Page Numbers block.
- New: Adds styles (pill, square) to the pagination’s Previous Page and Next Page blocks.
- New: Adds styles (shadow, hard shadow, top border) and Stretch link setting to the Column block. Deprecates Columns style, Stretch first block and Stretch link settings for the Columns block.
For Gutenberg blocks:
- New: Adds new shapes to the Image block.
- New: Adds Shape setting to the Cover and Post Featured Image blocks.
- New: Adds border support to the Column block.
For Twenty Twenty-One and Twenty Twenty themes:
- New: Adds option to host Google Fonts locally (Customizer > Twentig Options > Fonts > Font Hosting).
- Enhancement: Updates the Google Fonts .json file.
1.4.5
Release date: June 20, 2022
For block themes:
- New: Adds block spacing, responsive column width, and vertical alignment settings to the Query Loop block.
- New: Adds button styles to the Navigation Link block.
- New: Adds hover and active style settings to the Navigation block.
- Fix: Make Twentig global styles compatible with style variations.
For Gutenberg Blocks:
- New: Adds “Highlight padding” CSS class to the Paragraph, Heading, and List blocks.
Pour Twenty Twenty-One :
- Fix: Updates malformed CSS.
1.4.4
Release date: June 6, 2022
For Gutenberg Blocks:
- New: Adds responsive width setting for the Logo block.
- New: Adds backdrop blur filter CSS class to the Group block.
- New: Adds style (plain) to the Post Categories and Post Tags blocks.
- New: Adds responsive justification CSS classes to the Buttons and Social Icons blocks.
For Twenty Twenty-One & Twenty Twenty themes:
- Fix: Updates Quote and Pullquote CSS to make them compatible with typography options.
- Code Quality: Merges Twenty Twenty-One and Twenty Twenty patterns files.
- Code Quality: Uses CSS logical properties and removes RTL files.
- Code Quality: Moves the classic theme’s files to a separate folder.
1.4.3
Release date: May 24, 2022
For block themes:
- New: Adds vertical block spacing setting to the Columns block.
- New: Adds Roboto Flex as a font-family option.
- Compatibility: Updates block patterns for WordPress 6.0.
For Twenty Twenty-One and Twenty Twenty themes:
- Compatibility: Adjusts CSS to make columns layout compatible with WordPress 6.0.
1.4.2
Release date: May 19, 2022
For the Gutenberg block editor:
- New: Adds aspect ratio setting to the Cover block.
- New: Adds new hover effect options to the Cover block.
- New: Adds new styles (rounded and rounded corners) to the Cover block.
- New: Adds vertical alignment setting to the Gallery block.
- New: Adds « Caption on hover » CSS class to the Gallery block.
- New: Adds « + » menu icon option to the Navigation block.
- New: Adds letter spacing CSS class to the Navigation block.
- New: Adds new styles (rounded, subtle border) and « Black & white » CSS class to the Featured Image block.
- New: Adds « Text shadow » CSS class to the Paragraph, Heading, and Post Title blocks.
- New: Adds « Link no underline » CSS class to the Post Date, Post Terms, and Post Author blocks.
- Compatibility: Adjusts CSS to make Gallery and Cover settings compatible with WordPress 6.0.
For block themes:
- New: Adds style (underline) to the Search block.
- New: Adds styles (outline, pill, hashtag) to the Post Categories and Post Tags blocks.
- New: Adds style (pill) to the Tag Cloud block.
- Compatibility: Deprecates the Twentig gutter setting in favor of the new block spacing setting for Columns, Gallery, and Navigation blocks (for WordPress 6.0).
- Compatibility: Makes Twentig Styles panel compatible with WordPress 6.0 and 5.9.
For Twenty Twenty-Two theme:
- Compatibility: Adjusts CSS for full-width blocks inside the editor for WordPress 6.0.
Pour le thème Twenty Twenty-One :
- Enhancement: Updates the Google Fonts .json file.
For Twenty Twenty theme:
- Enhancement: Updates the curated Google Fonts list.
1.4.1
Release date: March 22, 2022
For the Gutenberg block editor:
- Fix: Unloads editor-related assets in the block-based widget editor to prevent error notice.
- Fix: Adjusts spacing for the pattern preview.
For Twenty Twenty-Two theme:
- Fix: Adds font preset for Extra Extra Large size.
For Twenty Twenty theme:
- Fix: Restores the content width inside the Gutenberg block editor.
- Fix: Restores layout and color for the privacy page (fixes the latest theme’s update).
1.4
Release date: March 11, 2022
Twentig 1.4 brings powerful features to supercharge Twenty Twenty-Two, the new default WordPress theme, and all block themes. Build a beautiful website with advanced style options, enhanced Gutenberg blocks, block patterns, and more.
This release adds support for the Twenty Twenty-Two theme and all block themes:
- New: Adds style options (Google Fonts for Font family settings, Heading font family, Content width, Wide width).
- New: Adds settings to Theme blocks (Navigation, Post Excerpt, Post Featured Image, Archive Title, Post Date, Post Author).
- New: Adds Headers, Footers, and Query patterns.
- New: Makes Twentig patterns compatible with block themes.
For the Gutenberg block editor:
- New: Adds Shape setting to the Image block.
- New: Adds Hard shadow style for Group, Columns, Media & Text, Image, and Cover blocks.
- New: Adds Responsive visibility settings to Gutenberg blocks.
- New: Moves Twentig page layouts inside the block inserter.
Pour le thème Twenty Twenty-One :
- Fix: Restores the style inside the pattern preview.
- Enhancement: Update block patterns to match the latest versions of core blocks.
For Twenty Twenty theme:
- Fix: Restores the style inside the pattern preview.
- Enhancement: Update block patterns to match the latest versions of core blocks.
- Fix: Restores the outline button border.