Share
Ce que vous allez créerDans cet ensemble de deux tutoriels, nous créons un curseur pour afficher les publications à partir d'un type de publication personnalisé, de manière à créer un effet de conversation entre deux interlocuteurs d'une image..
Dans la partie précédente, nous avons enregistré le type de publication, configuré les curseurs et les avons ajoutés à l’en-tête de notre site. Maintenant, nous devons positionner le texte et ajouter un style.
Pour suivre, vous aurez besoin de:
L'exemple sur lequel je travaille est un site du monde réel que je développe pour un client, qui exécute un thème enfant du thème Responsive. J'ai créé un enfant du thème Responsive auquel j'ai ajouté un style personnalisé ainsi que des fonctions dans le thème. functions.php fichier. Vous pouvez l'ajouter à votre propre thème ou créer un thème enfant de Responsive comme moi..
Voici à quoi ressemble le site actuellement:
Les curseurs sont là, mais ils sont au mauvais endroit et ils ont besoin de style.
Donc, dans ce tutoriel, nous allons faire ce qui suit:
Notez que pour chaque citation, je viens d'ajouter un titre de publication en tant que texte à afficher. Si vous ajoutez également un contenu de publication, celui-ci sera également affiché. Assurez-vous donc que vos citations ont simplement un titre et pas de contenu..
Ajoutons un positionnement aux curseurs pour les superposer à l'image.
Ouvrez le thème de votre enfant style.css déposer et ajouter ceci:
.tutsplus-sliders position: relative; largeur maximale: 1000px; marge: 0px auto; .smooth_slider position: absolute;
Cela donne la div nous avons créé pour contenir le positionnement relatif de nos curseurs et le positionnement absolu des curseurs dans cette div. Il définit également la largeur correcte pour notre div il est donc centré sur l'image.
Maintenant, les curseurs sont sur l'image:
Le problème est qu'ils se superposent et qu'ils doivent être à côté de la personne concernée. Corrigeons ça.
Le plug-in Smooth Slider attribue à chaque curseur un identifiant unique dans le balisage. Donc, le curseur "Heide" a un ID de # smooth_slider_3 et le curseur "Iain" a un ID de # smooth_slider_4. Nous pouvons cibler ceux pour positionner chaque curseur correctement.
Ajoutez ceci à votre feuille de style:
# smooth_slider_3 top: 70px; à droite: 90px; text-align: right; largeur: 250px; # smooth_slider_4 top: 10px; à gauche: 90px; largeur: 250px;
Vous devrez vérifier l'ID donné par le plugin à chacun de vos curseurs en vérifiant le balisage de sortie: ils peuvent être différents des miens..
Maintenant, mes curseurs sont au bon endroit:
Cela semble mieux. Maintenant, ajoutez un peu de style.
Je veux changer la police et ajouter des guillemets autour du texte.
Commençons par enregistrer une police à l'aide de Google Fonts. Retournez à votre thème functions.php déposer et ajouter ceci:
Accentsconagua
function tutsplus_add_google_fonts () wp_register_style ('googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif'); wp_enqueue_style ('googleFonts'); add_action ('wp_enqueue_scripts', 'tutsplus_add_google_fonts');Remarque: dans le code source, deux polices sont mises en file d'attente car j'ai utilisé une autre police Google ailleurs sur le site, mais pas pour les curseurs..
Enregistrez votre fichier de fonctions et revenez à votre feuille de style. Ajoute ça:
.smooth_slider h2 taille de la police: 19px! important; famille de polices: 'Droid Serif', serif! important; couleur: # 666633! important; hauteur de ligne: 26px! important;
J'ai eu à ajouter !important à chaque ligne sinon il ne remplace pas le style ajouté par le plugin. Si vous le souhaitez, vous pouvez modifier les polices à l'aide de l'écran des paramètres: ce n'est pas le cas, car cela ne me permet pas d'utiliser ma police Google..
Notre police est maintenant beaucoup mieux:
Enfin, je souhaite ajouter des guillemets autour de chaque texte pour souligner le fait que les personnes de l’image sont supposées parler. Pour ce faire, j'utilise le avant et après pseudo-éléments.
Dans votre feuille de style, ajoutez ceci:
.smooth_slider h2 :: before content: open-quote; .smooth_slider h2 :: after content: close-quote;
Ceci clôturera notre h2 éléments entre guillemets.
Remarque: certains navigateurs plus anciens ne le supporteront pas car ils ne supportent pas les pseudo-éléments. Cependant, cela ne m'inquiète pas car les curseurs ne sont pas essentiels au contenu, et le nombre d'utilisateurs de ces navigateurs est très faible pour le moment..
Maintenant, enregistrez votre feuille de style et consultez le site:
Fantastique! J'ai maintenant mon texte au bon endroit, entouré de guillemets. Mon client peut maintenant ajouter autant de citations qu’il le souhaite, les assigner aux curseurs appropriés et la conversation se poursuivra..
Parce que j'ai utilisé le positionnement absolu, la position de mon texte sera brisée sur des écrans plus petits. les tailles de police devraient également être suffisamment petites pour rendre le texte illisible. Je vais donc ajouter une requête multimédia pour masquer les curseurs sur des écrans plus petits..
Je vais d’abord vérifier le point de rupture de la mise en page: sa largeur est d’environ 900 px. J'ai donc besoin d'ajouter une requête multimédia sur les écrans cibles d'une largeur inférieure à 900 px.
Au bas de votre feuille de style, ajoutez la requête multimédia:
Écran @média et (largeur maximale: 900 pixels) .tutsplus-sliders display: none;
Maintenant les curseurs disparaissent sur des écrans plus petits:
Si vous le souhaitez, vous pouvez ajouter un style alternatif à votre requête multimédia pour les écrans de taille moyenne, en réduisant la taille de la police et en positionnant le texte à la taille souhaitée..
L'utilisation de curseurs pour le texte peut vous aider à ajouter des effets intéressants sur votre site: ici, j'ai ajouté un effet de conversation qui se superpose à l'image de deux personnes..
Dans cet ensemble de deux tutoriels, vous avez appris à créer cet effet en:
Vous pouvez utiliser cette technique pour créer du texte en incrustation n'importe où dans vos pages. Soyez créatif.!
