CSS pour podCloud

CSS pour podCloud

De la personnalisation pour pas cher!

Team

Vous voulez personnaliser un peu votre mini-site? Vous trouverez ici des exemples de bouts de CSS à copier/coller dans la partie "Expert > CSS personnalisé" de votre flux. Vous pouvez bien évidemment combiner certains thèmes entre eux. Envie de partager vos superbes créations? Envoyez un mail en cliquant "Contact" dans le footer, et on publiera sans oublier de vous remercier/citer

En cours de lecture

Utiliser Google Font pour votre minisite

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

google font

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"

google font add

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"

bold italic

En cours de lecture

Un footer avec fond fixe et effet d'ombres

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>
CSS du footer: 

#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;
}

En cours de lecture

Changer la police de caractère

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")

font-family Example text
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph

Sans-Serif Fonts

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

En cours de lecture

Changer les titres

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

Le tuto show

(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;
}