Skip to content

Instantly share code, notes, and snippets.

@gmutschler
Last active March 31, 2017 19:59
Show Gist options
  • Save gmutschler/c86f76bbb96b3fd1bdfb to your computer and use it in GitHub Desktop.
Save gmutschler/c86f76bbb96b3fd1bdfb to your computer and use it in GitHub Desktop.
Basic styling for all elements in wordpress default WYSIWYG editor (without colors)
.entry {
del {text-decoration: line-through;}
strong {font-weight: bold;}
em {font-style: italic;}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
letter-spacing: -0.005em;
}
h1 {
font-size: 2.85em;
line-height: 1em;
margin-top: 0;
margin-bottom: .9em;
}
h2 {
font-size: 2.1em;
margin: .6em 0;
}
h3 {
font-size: 1.4em;
margin: .9em 0;
}
h4,h5,h6 {
font-size: 1em;
margin: 0.5em 0;
font-size: 1em,
}
img {
max-width: 100%;
height: auto;
}
p {
line-height: 1.6em;
margin: 0 0 1.6em 0;
a {
text-decoration: underline;
}
}
ul, ol {
counter-reset: the_counter;
list-style: none;
padding:0;
margin:0;
li {
line-height: 1.8em;
letter-spacing: -0.005em;
font-size: 1em;
padding-left: 3em;
}
}
ul li:before {
content: "• ";
margin-left: -1.7em;
margin-right: 1em;
font-size: 1.1em;
line-height: 1.6em;
vertical-align: middle;
}
ol li:before {
content: counter(the_counter)'.';
counter-increment: the_counter;
margin-left: -4.5em;
margin-right: 1.4em;
width: 3em;
vertical-align: middle;
display: inline-block;
text-align: right;
}
address {
line-height: 1.4em;
letter-spacing: -0.005em;
margin: 1.4em 0;
font-weight: 500;
font-size: 0.95em;
font-style: italic;
}
blockquote {
font-style: italic;
font-size: 1em;
padding-left: 2.6em;
padding-right: .5em;
margin: 1.6em 0;
font-family: Georgia, Times, "Times New Roman", serif;
quotes: "\201C""\201D""\2018""\2019";
position: relative;
&:before {
content: open-quote;
font-size: 4.2em;
font-weight: 700;
display: inline;
position: absolute;
left: -.1em;
top: -.2em;
line-height: 1em;
top: -0.2em;
}
}
pre {
width: 100%;
overflow-x: auto;
font-family: Monaco, Lucida Console, Courier New, monospace, serif;
background-color: #EEE;
padding: 1em 0.7em;
margin: 1.6em 0;
font-size: 0.9em;
outline: #DEDEDE solid 1px;
}
hr {
border: none;
margin: 2.1em 0;
border-bottom: 1px solid #DEDEDE;
}
:first-child{margin-top: 0;}
:last-child{margin-bottom: 0;}
}
<h1>Ceci est titre1</h1>
<h2>Ceci est un titre2</h2>
<h3>Ceci est un titre3</h3>
<h4>Ceci est un titre4</h4>
<h5>Ceci est un titre5</h5>
<h6>Ceci est un titre6</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr />
<h2>Ceci est un titre2 au milieu du texte</h2>
<p><a title="ceci est un lien" href="tamere">Lorem ipsum dolor sit amet,</a> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Ceci est un titre3 au milieu du texte</h3>
<p>Lorem ipsum dolor sit.<strong> Ce texte au mileu de paragraphe est en gras.</strong> amet, consetetur sadipscing elitr. <em>Celui-ci est italique. <del>Et la, barre de surcroit.</del></em> <span style="text-decoration: underline;">Celui-ci est souligne.</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h4>Ceci est un titre 4 au milieu du texte</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>
<address>Lorem ipsum<br>
Chez moi<br>
Dans mon Pays<br>
02 23 56 78 96</address>
<pre>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment