css / less
- Details
Bei css sieht das Attribut dessen Element explizieter angegeben ist.
So würde:
a{
color: green;
}
das Nachsehen gegenüber der Angabe:
a:link{
color: blue;
}
haben.
Da z.B. in Joomla Templates meistens zusätlich zu dem Element a die Pseudoklassen :link usw verwe4ndet werden macht es Sinn dies bei den eignen CSS-Anpassungen ebenfalls zu verwenden.
a:link - Normaler unbesuchter Link
a:visited - Bereits besuchter Link
a:hover - Link wenn man mit der Maus darüberfährt
a:active - Link der gerade angeklickt ist
z.B.
a:link, a:visited, a:active, a:hover{
color: red;
}
- Details
Um ein Element in einem anderen Element zu horizontal zu zentrieren kann man, sofern man die Breite angeben kann, margin: 0 auto; oder margin: auto; verwenden.
Um das Element horizontal zu zentrieren wird schon schwieriger.
Noch schwieriger wird es wenn die Breite und oder die Höhe dynamisch ist.
Mit einem Ghost:before Element fuktioniert das perfekt:
/* This parent can be any width and height */
.parent {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, 4 perfect centering */
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
/* width: 300px; */
}
- Details
Die einfachste Möglichkeit Google Web Fonts zu einzubinden geht natürlich über die API
z.B. in den header:
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
Und in die CSS Datei für die gewünschten Elemente:
font-family: 'Source Code Pro', monospace;
Will man aber die Seite offline bearbeiten oder um die Ladezeiten zu optimieren empfiehlt es sich die Schriftart lokal einzubinden.
Eine große Hilfe dabei ist diese Website: https://google-webfonts-helper.herokuapp.com/fonts
Ein Klick auf die Schriftart und schon wird der Cedeschnippsel für die Einbindung in das CSS angezeigt. Bei dem Pfad ist zu berücksichtigen, dass er sich auf die css Datei bzw. deren Speicherort bezieht.
z.B.
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: url('../fonts/source-code-pro-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Source Code Pro'), local('SourceCodePro-Regular'),
url('../fonts/source-code-pro-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/source-code-pro-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/source-code-pro-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/source-code-pro-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/source-code-pro-v6-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
- Details
Kommt man an den Quelltext aus irgendwelchen Gründen nicht heran und möchte trotzdem einen hr einfügen gibt es folgenden Möglichkeiten
CSS
element:after {
content: "";
display: inline-block;
height: 1px;
width: 90%;
margin: auto;
background: #000;
}
jQuery
$(document).ready(function() {
$(element).after("<hr>");
});