Tutorials: CSS School
W3Schools ist ein Online-Dienst, mit dem sich Webtechniken erlernen lassen (CSS). Es gibt kostenlose Tutorials, Übungen und Referenzen.
Tatsturbelegung für geschweifte Klammer: { }
MAC: Geschwungene Klammer Mac: Alt + 8 bzw. Alt + 9
PC: [ALT GR]7 bzw. [ALT GR]0
Tutorials: CSS Snippets
Specials:
Astra CSS Snippets
GeneratePress CSS Snippets
für E. Global
/*Fixierter Header*/
.inside-header {
position: fixed;
}
/*Fixierter Seitenleiste*/
.sidebar .main-navigation .main-nav {
position: fixed;
top: 100px;
left: 20px;
}
/*Abstand Menüpunkte*/
.main-navigation .main-nav ul li a {
line-height: 30px;
}
/*Breite Contentbereich*/
.site-content .content-area {
width: 100%;
}
/*Breite Seitenspalte*/
.is-left-sidebar {
width: 25%;
}
für E. Tablet
/*Relativer Header*/
.inside-header {
position: relative;
}
für E. Mobilphone
/*Relativer Header*/
.inside-header {
position: relative;
}
für S. – Transparent Background Submenu
#top .sub-menu {
background: rgba(255,255,255,0.0) !important;
}
.sub-menu, .sub-menu * {
background: transparent !important;
}
.av-main-nav ul li a {
border-right-style: none;
border-right-width: 0px;
border-left-style: none;
border-left-width: 0px;
}
.av-main-nav ul {
box-shadow: none;
}
.av-main-nav ul li:last-child > a {
border-bottom-style: none;
border-bottom-width: 0px;
}
für L. Ken Burns Effect
@keyframes kenburns {
100% {
transform: scale3d(2, 2, 2) translate3d(-300px, 0px, 0px);
animation-timing-function: ease-in;
opacity: 1;
}
}
.kenslide .av_slideshow_full .active-slide img {
animation: kenburns 30s infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-iteration-count:1;
}
für L. Footer Background Image
#footer {
opacity: 1;
background-color: #000;
background: rgba(0, 0, 0, 5) url(http://localhost:8888/2020-enfold-portfolio/wp-content/uploads/2020/09/001.jpg) repeat top left;
background-size: cover;
}
für D.
.berlin {
height: 100vh;
}
#primary {
margin-top: 0px;
}
für M. (im Kombination Plugin: Post/Page specific custom CSS )
.ast-small-footer {
position: fixed;
width: 100%;
bottom: 20px;
}
.ast-footer-overlay {
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
}
Link
a {
color: red;
}
Link bei Mouse Over
a:hover {
color: blue;
}
Link unterstrichen oder nicht:
text-decoration: none;
text-decoration: underline;
My Sticky Menu – Hide on scroll down
Plugin: Sticky Menu on Scroll, Sticky Header
#mysticky-nav .myfixed { margin:0 auto; float:none; border:0px;background:none; max-width:100%; }
#mysticky-nav.wrapfixed.down {
visibility:hidden
}
#mysticky-nav.wrapfixed.up {
visibility:visible
}
Astra – CSS Code Sticky Header
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
/*Adjust Content Padding*/
.site-content {
padding-top: 75px;
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
.site-content {
padding-top: 175px;
}
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
.site-content {
padding-top: 200px;
}
}
CSS code for für Full-Screen Background-Bild
body {
background: url(new-york-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
CSS code for für Full-Screen Background-Bild auf Kategorie-Seite
body.category-malerei{
background: url(new-york-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
WP Youtube Lite
Bei manchen Themes ist der Abstand der Videos zu gross. Vielleicht hilft das.
lyte, .lyMe {
position: static!important;
padding-bottom: 0%!important;
margin-bottom: 0px !important;
}
.lyte-wrapper {
margin: 0px !important;
}
oder bei Gutenberg:
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
padding-top: 0%;
}
Kategorie-Titel nicht anzeigen
.category .page-title {
display: none;
}
Abstand nach Zeile zur nächsten
Erste Zeile <p style="margin-top:40px;"> Nächste Zeile
Gutenberg Bildergalerie Var. 1
Bildunterschrift unter Thumbnails
.wp-block-gallery .blocks-gallery-item figure {
flex-direction: column;
}
.wp-block-gallery .blocks-gallery-item figcaption {
position: relative;
bottom: auto;
width: 100%;
max-height: 100%;
overflow: auto;
padding: 10px 0 20px 0;
color: #333;
text-align: center;
font-size: 13px;
background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
}
Gutenberg Bildergalerie Var. 2
Bildunterschrift unter Thumbnails
/* Galerie Bildbeschriftung UNTER Bild */
.blocks-gallery-item figcaption {
white-space: pre-line;
color: #555 !important;
}
/* Prevent the last image from growing to fill available space if there aren't three images in a row. */
.blocks-gallery-item {
flex-grow: 0 !important;
display: inline-block !important;
}
.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
display: inline-block;
height: auto;
padding: 5px 0;
}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
position: relative;
background: none;
margin: 10px 0 15px 0;
padding: 0;
}
Gutenberg Bildergalerie
Einzelnes Bild Mobil 100% breit
.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
width: 100%;
}
Mauszeiger bei Menülink nicht wechseln
zB wenn ein Untermenü angezeigt werden soll, der Haupt Menüeintrag aber nicht anklickbar sein soll.
.pointer {
cursor: default;
}
Beitragsbild in Detailseite Beitrag nicht anzeigen
bei 2.Klasse entsprechende eintragen
.single-post .post-thumbnail {
display: none;
}
ODER
.single-post .entry-thumbnail {
display: none;
}
Bilder Align (zB float right) aufheben
In Text-Ebene einfügen
<div style="clear:both;"></div>
Fixierte Menü-Leiste
Fixiertes Menü per CSS (Klasse lautet ev. anders)
.site-header {
position: fixed !important;
opacity: 0.9 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 999 !important;
background-color:
#ffffff !important;
}
Fixierter Parallaxe Background
Site Origin Page Builder -> Zeile Gesamte Breite gestreckt ->Hintergrundbild -> Parallaxe
Bei Zeile bearbeiten -> Attribute – CSS Style eintragen zB: height:450px
.panel-row-style {
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
z-index: 11;
}
Resonsive Vimeo Video
in Beitrag / Textebene
<div class="video-responsive">
hier Eibettungscode einfügen
</div>
in Custom CSS
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Enfold Feinanpassungen
Schrift im Menü dünner (font-weight)
#top .av-main-nav > li > a {
font-weight: normal !important;
}
Maximale Dateigröße für Uploads erhöhen
Plugin: WP Htaccess Editor
Nach „# END WordPress“ einfügen.
php_value upload_max_filesize 100M php_value post_max_size 100M
CSS Angabe für einzelne Seite (mit Seiten-ID)
.page-id-1 .site-content {
display: none;
}
Use one image to link to WordPress galleries (Artikel)
/*Gallery only show first image*/
.gallery-item {
display: none;
}
.gallery-item:first-child {
display:block;
}
Elmastudio – Ubud
Beitragsseite ohne Beitragsbild:
.single-post .site-content .post .entry-thumbnail {
display: none;
}
Info Text löschen:
.single-post .entry-header {
display: none;
}
Beitrag ganze Breite:
.single-post .entry-content, .single-post .author-wrap, #comments, .single-post #comments {
max-width:100%!important;
padding-left:0px!important
}
Überschrift bei Kategorien ausblenden:
.archive-header {
display: none;
}
Elmastudio – Cocoa
Beitragsbilder Mobil-Version anzeigen:
@media screen and (max-width: 880px) {
.entry-thumbnail {
display: block!important;
}
}
mb.YTPlayer (Full Video Background)
Overlay Text recjts ausblenden
.YTPOverlay.raster {
background: url(images/raster.png);
display: none;
}
Enfold – Post / Portfolio -> nächster Beitrag auf rechter Seite anzeigen (nicht links)
.avia-post-prev {
right: 0;
left: auto;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.avia-post-next {
left: 0;
right: auto;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
Enfold – Beitragsbild auf Einzel-Blogseite nicht anzeigen
#top.single-post .big-preview.single-big {
display: none;
}
Enfold – Vertikal Menü Linke Seite – Submenüs permanent anzeigen
.html_header_left .av-main-nav ul.sub-menu {
opacity: 1 !important;
visibility: visible !important;
position: static;
margin-bottom: 20px;
float: left;
border: 0;
box-shadow: none;
}
.html_header_left .av-main-nav ul.sub-menu li,
.html_header_left .av-main-nav ul.sub-menu li a {
border: 0 !important;
}
Enfold – Post Previous/Next – eigenes Icon
a.avia-post-nav.avia-post-prev span {
opacity: 0;
}
a.avia-post-nav.avia-post-prev {
background: url(https://i.imgur.com/NdHbMPk.png)!important;
background-size: contain!important;
background-repeat: no-repeat!important;
background-position: 50% 50%!important;
}
a.avia-post-nav.avia-post-next span {
opacity: 0;
}
a.avia-post-nav.avia-post-next {
background: url(https://i.imgur.com/4tlGdhF.png)!important;
background-size: contain!important;
background-repeat: no-repeat!important;
background-position: 50% 50%!important;
}
Elmastudio – Black Walnut theme – Logo Zentriert
.site-branding {
max-width: initial;
}
p.site-description {
display: none;
}
.home.header-big .site-branding-wrap {
width: 100%;
}
.home.header-big .site-branding p.site-description {
display: none;
}
.intro-wrap {
display: none !important;
}
@media screen and (min-width: 1130px) {
.home.header-big .site-branding-wrap {
padding: 0 0 60px;
}
}
Elmastudio – Black Walnut theme – Logo Rechts
.site-branding {
max-width: initial;
}
p.site-description {
display: none;
}
.home.header-big .site-branding-wrap {
width: 100%;
}
.home.header-big .site-branding p.site-description {
display: none;
}
.intro-wrap {
display: none !important;
}
.title-logo {
padding: 17px 0 0 0;
text-align: right;
}
.home .site-branding {
max-width: 100%;
}
.more-info-btn {
margin: 0 auto 40px;
display: none;
}
@media screen and (max-width: 880px) {
.home.header-big .site-branding-wrap {
padding: 0 0 60px;
}
.title-logo {
padding: 17px 0 0 0;
text-align: center;
}
}
Arnold – Titel und Text untereinander
.gallery-post-des .title-wrap {
display: inline;
}
.gallery-post-des .gallery-post-des-inn {
display: inline;
}
body.single .title-wrap-tit, .title-wrap-h1, body.single-product h1.product_title {
margin-bottom: 30px;
}
Eigene CSS-Angaben für Mobil Version
/*-----MOBILE VERSION-------*/
@media screen and (max-width: 880px) {
#nav {
width: 100%;
float: none;
height: 100px;
padding-top: 20px;
}
#content {
width: 100%;
}
}
/*-----ENDE MOBILE VERSION-------*/
Eigene CSS-Klassen
Dieser Text erscheint in einer grünen Box
in Beitrag/Seite in html Ebene (Reiter Text)
<div class=“box“>Dieser Text erscheint in einer grünen Box</div>
in custom.css
.box {
width: 40%;
background-color: green;
color: #FFF;
padding:10px;
border: 5px solid white;
margin: 0px auto;
margin-top:20px;
margin-bottom:20px;
border-radius: 20px;
}
Element Vertikal zentrieren
.box {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
padding: 20px;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
}
mb.YTPlayer for background videos – Logo ausblenden
.YTPOverlay {
display: none;
}
Foo Gallery bei Lightbox Rahmen und Schatten entfernen
.fbx-light .fbx-close, .fbx-light .fbx-fullscreen-toggle, .fbx-light .fbx-inner, .fbx-light .fbx-loader, .fbx-light .fbx-next, .fbx-light .fbx-pause, .fbx-light .fbx-play, .fbx-light .fbx-prev, .fbx-light .fbx-social-toggle, .fbx-light.fbx-inset-buttons .fbx-next::before, .fbx-light.fbx-inset-buttons .fbx-prev::before {
background-color: transparent;
}
.fbx-light .fbx-caption, .fbx-light .fbx-inner, .fbx-light .fbx-social, .fbx-light.fbx-inset-buttons .fbx-next::before, .fbx-light.fbx-inset-buttons .fbx-prev::before, .fbx-light.fbx-modal, .fbx-modal.fbx-light.fbx-phone .fbx-close:hover, .fbx-modal.fbx-light.fbx-phone .fbx-fullscreen-toggle:hover, .fbx-modal.fbx-light.fbx-phone .fbx-next:hover, .fbx-modal.fbx-light.fbx-phone .fbx-pause:hover, .fbx-modal.fbx-light.fbx-phone .fbx-play:hover, .fbx-modal.fbx-light.fbx-phone .fbx-prev:hover, .fbx-modal.fbx-light.fbx-phone .fbx-social-toggle:hover, .fbx-rounded.fbx-light .fbx-close, .fbx-rounded.fbx-light .fbx-fullscreen-toggle, .fbx-rounded.fbx-light .fbx-pause, .fbx-rounded.fbx-light .fbx-play, .fbx-rounded.fbx-light .fbx-social-toggle {
border-color: transparent;
}
.fbx-rounded .fbx-inner {
border: 0 none !important;
border-radius: 6px;
}
.fbx-rounded .fbx-next.fbx-btn-shadow, .fbx-rounded .fbx-next.fbx-btn-shadow:hover {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}
.fbx-rounded .fbx-prev.fbx-btn-shadow, .fbx-rounded .fbx-prev.fbx-btn-shadow:hover {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}
.fbx-light .fbx-close, .fbx-light .fbx-error-msg, .fbx-light .fbx-fullscreen-toggle, .fbx-light .fbx-loader, .fbx-light .fbx-next, .fbx-light .fbx-pause, .fbx-light .fbx-play, .fbx-light .fbx-prev, .fbx-light .fbx-social-toggle, .fbx-light.fbx-inset-buttons .fbx-next::before, .fbx-light.fbx-inset-buttons .fbx-prev::before, .fbx-metro.fbx-light .fbx-count, .fbx-metro.fbx-light .fbx-credit a {
color: #fff !important;
}
.fbx-fullscreen-mode .fbx-btn-shadow, .fbx-fullscreen-mode .fbx-next.fbx-btn-shadow, .fbx-fullscreen-mode .fbx-prev.fbx-btn-shadow, .fbx-inner-shadow, .fbx-rounded .fbx-btn-shadow, .fbx-rounded.fbx-inset-buttons.fbx-desktop .fbx-next.fbx-btn-shadow::before, .fbx-rounded.fbx-inset-buttons.fbx-desktop .fbx-prev.fbx-btn-shadow::before, .fbx-rounded.fbx-inset-buttons.fbx-tablet .fbx-next.fbx-btn-shadow::before, .fbx-rounded.fbx-inset-buttons.fbx-tablet .fbx-prev.fbx-btn-shadow::before, .fbx-sticky-buttons .fbx-next.fbx-btn-shadow, .fbx-sticky-buttons .fbx-prev.fbx-btn-shadow {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}
Navigation FontSize Fade in/out bei MouseOver (Hoover)
.main-navigation a {
font-size:16px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.main-navigation a:hover {
font-size:20px;
}
Enfold – remove all the animation from the masonry gallery (Fly In)
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}
html – CSS: Übungsseite
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Website</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<style>
@import "custom.css"
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Max Weyermann
</div>
<div id="nav">
<p>
<a href="index.html">Home</a><br>
<a href="bio.html">Über mich</a><br>
</div>
<div id="content">
<p>
<h3>Willkommen ....</h3>
<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.
</div>
<div id="footer">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</body>
</html>
style.css
/*-----KOMMENTAR ANFANG -----------------
Tatsturbelegung für geschweifte Klammer: { }
MAC: Geschwungene Klammer Mac: Alt + 8 bzw. Alt + 9
PC: [ALT GR]7 bzw. [ALT GR]0
------ KOMMENTAR ENDE */
body {
background-color: gray;
font-size:20px;
}
#wrapper {
max-width: 960px;
margin: 0px auto;
background-color: #FFFFFF;
margin-top: 20px;
}
#header {
height:80px;
background-color: #C6A023;
font-size:40px;
text-align: center;
padding-top:30px;
color:white;
}
#nav {
float: left;
width: 20%;
height: 500px;
background-color: #FACC2E;
line-height:25px;
}
#content {
float: right;
width: 80%;
min-height: 500px;
background-color: #FFE89E;
}
#footer {
clear: both;
height: 50px;
background-color: #C6A023;
color:white;
font-size: 16px;
text-align: center;
padding-top:20px;
}
a {
text-decoration: none;
}
p, h3 {
margin:20px;
}
img {
max-width: 100%;
height: auto;
}
.box {
width: 40%;
background-color: green;
color: #FFF;
padding:10px;
border: 5px solid white;
margin: 0px auto;
margin-top:20px;
margin-bottom:20px;
}
/*-----EINFACH SO LASSEN ---- RESPONSIV ANGABEN-------*/
@media screen and (max-width: 880px) {
#nav {
width: 100%;
float: none;
height: 100px;
padding-top: 20px;
}
#content {
width: 100%;
}
}
/*-----ENDE RESPONSIV ANGABEN-------*/
Elmastudio moka
#site-nav ul li a {
font-size: 1.5rem;
font-weight:100;
line-height:1.4rem;
color:gray;
text-transform: uppercase;
}
#site-nav ul li a:hover{
color: #FE2A9D;
}
#sidebar {
top: 37px;
}
#primary {
padding-top: 35px;
}
.entry-header h1.entry-title, .entry-header h2.entry-title {
color: #FE2A9D;
font-weight: 300;
font-size: 1.5rem;
text-transform: uppercase;
}
.entry-content p, .entry-summary p, .entry-content ul, .entry-content ol {
line-height: 1.4;
font-size:1.0rem!important;
-ms-hyphens: none!important;
-webkit-hyphens: none!important;
hyphens: none!important;
text-transform: uppercase;
}
#colophon #site-info {
display: none;
}
#colophon {
border-top: 0px solid #ccc;
margin: 0 0px;
padding: 0px 0 0px;
border-top: 0px solid #ccc;
}
#search-btn {
display: none;
}
#footer-sidebar-wrap {
padding-bottom: 0px;
}
#footer-sidebar-wrap .widget {
padding-bottom: 0px;
}
#container {
max-width: 1740px;
}
htaccess in „All in one wp migration“ Ordner (wp-content/ai1wm-backups)
<IfModule mod_mime.c> AddType application/octet-stream .wpress </IfModule>
WordPress- Fehlermeldung „Internal Server Error“
The server encountered an internal error or misconfiguration and was unable to complete your request. Your administrator may not have enabled CGI access for this directory.
Test-Download
https://www.waefler.at/wp-script/wp-content/ai1wm-backups/www.waefler.at-wp2016-20170108-112327-203.wpress
Für S.S.
.header-toggles .toggle-text {
display: none !important;
}
.nav-toggle .bars {
width: 40px;
}
.menu-modal-inner {
box-shadow: 0 0 2rem 0 rgba( 0, 0, 0, .1 );
min-width: 44rem;
opacity: 0;
transform: translateX( 20rem );
transition: transform .2s ease-in, opacity .2s ease-in;
transition-timing-function: ease-in, ease-in;
transition-timing-function: ease-in, ease-in;
width: 20%;
background-color: black;
color: white;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
}