Ghost Anpassungen

Hinweis: Dieses Posting wurde am 31.05.2022 an Capser 5.x. angepasst.

Dieser Blog wird mithilfe von Ghost zur Verfügung gestellt. Diese Instanz verwendet das Default-Theme Casper mit folgenden CSS-Anpassungen durch Code-Injection in den Einstellungen  :

<style>

/* Removes header and footer subscribe button */
.gh-head-button {
    display: none!important;
}     

.footer-cta-button {
    display: none!important;
}    

/* Resize menu font */
.nav { font-weight: bold; font-size:180%!important; }     

/* Font base line adjustment according the changed menu font */  
.gh-head-logo { margin-bottom: -12px }    

/* adjust header size */
.site-header-content { min-height: 320px!important; } 
     
/* https://cssgradient.io/gradient-backgrounds/ */    
.site-footer {
   	background: rgb(105,183,249);
    background: radial-gradient(circle, rgba(105,183,249,1) 0%, rgba(66,165,246,1) 48%, rgba(14,71,161,1) 100%);
    padding: 40px 4vmin 20px; 
}    
    
.read-more-wrap {
    margin-top: -40px;
    padding-top: 15px;
    background-image: radial-gradient( circle farthest-corner at 7.2% 13.6%, rgba(105,183,249,1)  0%,  rgba(14,71,161,1)  90% );
    margin-bottom: -85px;
}
    
body { 
    background: #F5F7F9 ;
    color : #303030; 
    /* F5F7F9 F1F5F8 */
}   

hr {
   border-top: 1px solid #e0e0e0;
}   

</style>

Da für meinen Blog kein Subscription-Modell angedacht ist, wurden mithilfe diverser Stellschrauben in den Einstellungen alle Bezüge im Blog zum Thema "Abonnement" deaktiviert. Nur der Subscription-Button im Header und Footer der Site wird trotz Deaktivierung immer noch angezeigt.  

Hier hilft nur ein Ausblenden des Buttons per CSS.

.gh-head-button {
    display: none!important;
}
.footer-cta-button {
    display: none!important;
}    

Da ich persönlich kein Freund von einem reinweißen Hintergrund bin, wurde die globale Farbgebung wie folgt angepasst:

body { 
    background: #F1F5F8;
    color : #303030;
}   

hr {
   border-top: 1px solid #e0e0e0;
}

Für die Fußzeile .site-footer sowie den Bereich .read-more-wrap, der die weiteren Postings anzeigt, habe ich diverse Farbgradienten bezüglich der Hintergrundfarbe gesetzt. Mit den padding-Einstellungen des .site-footer  wurde die Höhe der Fußzeile angepasst. Der Original-Wert ist für meinen Geschmack einfach viel zu hoch.

.site-footer {
   	background: rgb(105,183,249);
    background: radial-gradient(circle, rgba(105,183,249,1) 0%, rgba(66,165,246,1) 48%, rgba(14,71,161,1) 100%);
    padding: 40px 4vmin 20px;
}    
    
.read-more-wrap {
    background-image: radial-gradient( circle farthest-corner at 7.2% 13.6%, rgba(105,183,249,1)  0%,  rgba(14,71,161,1)  90% );
}

Hinweis: Die Farbgestaltung des Headers wurde in den Ghost-Einstellungen gesetzt.

Hilfreiche Links:
① screen.css-Datei des Casper-Themes auf github
Farbgradienten online erstellen:
② https://cssgradient.io/
③ https://cssgradient.io/gradient-backgrounds/