CSS pour podCloud

Allez sur https://fonts.google.com/

Choisissez une police qui vous plait en utilisant, par exemple, la recherche et cliquez sur le petit + en haut à droite de sa case.

Cliquez sur le petit panneau noir en bas et cliquez sur "@import"

Ajoutez les deux bouts de code dans le CSS personnalisé comme suit :

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}

Note : vous pouvez aussi obtenir des gras/italiques de meilleure qualité en allant dans l'onglet "customise" et en cochant "bold" "italic" et "bold italic"

Voici l'exemple du footer utilisé sur astuces.podcloud.fr:



Code HTML du footer lui-même:

<p><a href="http://podshows.fr" target="_blank"> 

<img width="250px" height="92px" src="http://images.podradio.fr/podshows/logo%20podshows%20version%20seule.png"></a></p>

<p>Créateur de: <a href="http://podcloud.fr" target="_blank">podCloud</a> &amp; <a href="http://podradio.fr" target="_blank">podradio</a></p>

#header_row, #header_row h1 {

    color: #042D40;

}

#footer{

    color: #FFFFFF;

    text-align: center; 

    background-image: url('http://podshows.fr/wp-content/uploads/2014/04/wallpaperwood-podshows.jpeg');

    background-repeat: no-repeat;

    background-position: bottom center;

    background-attachment: fixed;

    padding-top: 20px;

    padding-bottom: 20px;

    margin-top: 40px;

    box-shadow: -1px 5px 15px 3px rgba(0, 0, 0, 0.5) inset;


}

#footer a {

color: #EEE;

text-decoration: none;

}

Il vous suffit d'ajouter ceci:

(remplacer "#123456" par la couleur que vous désirez, en hexadécimal) 

#wrap, #footer {
background-color: #123456;
}

Parce que personne n'est à l'abri d'une faute de goût, voici le code pour avoir TOUT le mini-site en Comic Sans MS (y compris les boutons de partage)

(pas de capture d'écran, ça brûle trop la rétine)

body, .social-likes__button, .social-likes__counter {
font-family: "Comic Sans MS", cursive, sans-serif;
}

Il est évident que qu'il est préférable que vous remplaciez ["Comic Sans MS", cursive, sans-serif] par une autre police.

Pour cela vous trouverez dans le tableau suivant les différentes "font-family" disponibles facilement.

N'oubliez pas de laisser le point virgule à la fin de la ligne ni les guillemets éventuels!

(Source du tableau ci-dessous: W3School)

Serif Fonts

(polices avec des empattements, des "pieds")

Sans-Serif Fonts

Monospace Fonts

Un peu de finesse dans ce monde de brutes, codé par Phil_Goud

(les titres des articles, ainsi que l'auteur, sont plus fins)

Notes:

• "h1" c'est le plus gros titre, "h6" le plus petit


• "font-weight" peut être "normal" ou "bold" (gras)


• "font-size" est la taille de la police, en pixel.


• "social-likes_button" est le mot "partager"


• "social-likes_counter" est le nombre de partage à droite

code CSS du thème:

h1, .h1 {
font-size: 40px; 
font-weight: normal; 
}
h4, .h4 {
font-size: 18px; 
font-weight: normal; 
}

h5, .h5 {
font-size: 16px; 
font-weight: normal; 
}

h6, .h6 {
font-size: 12px; 
font-weight: normal; 
}
.social-likes__button, .social-likes__counter {
font-family: "Lato",sans-serif;
}