Dit thema heb ik niet meer in gebruik, soms vanwege verouderd zijn, soms omdat ik een betere of snellere vond

Suffusion

Dit uitgebreide en gratis thema ontdekte ik al vrij snel, toen ik begon met websites maken. Ik maakte er tientallen websites mee en raakte er helemaal in thuis. Het is enorm flexibel. Helaas heeft de maker van het thema besloten niet verder te gaan met ondersteunen en ontwikkelen. Hij garandeert dus ook niet dat het thema bestand is tegen ontwikkelingen in WordPress. Reden voor mij om mijn sites stuk voor stuk over te zetten naar een thema dat wel goed ondersteund wordt. Ik koos voor DIVI van Elegant themes, een betaald thema. Dat geeft ook meer garantie dat het nog wel onderhouden blijft.

Forum: http://aquoid.com/forum/index.php

Layout van de hele site

Child theme

Zie http://aquoid.com/news/2012/02/suffu-scion-a-starter-child-theme-for-suffusion/ Voor minimale layout bij een eigen child theme:

  • Suffusion Options -> Back-end -> Child Themes -> Vink aan: Don’t inherit
  • Maak een child theme en zet in ieder geval bovenaan:
    @import url("../suffusion/style.css");  Eventueel: (slashes verwijderen): NB: rounded corners hoef je niet apart aan te roepen, merkte ik. Als je ze heb aangevinkt, dan doet het thema dat wel. Anders staat het er dubbel in.  /* Include this if you are not inheriting and you wish to have rounded corners */  /* @import url("../suffusion/rounded-corners.css"); *//* Include this for your specific skin if you are not inheriting */  /* @import url("../suffusion/skins/light-theme-royal-blue/skin.css"); *//* Include this if you are using a dark theme and you are not inheriting. This is not needed for newer skins like Minima or Photonique */  /* @import url("../suffusion/dark-style.css"); *//* Include this for your specific skin if you are using a dark theme and you are not inheriting */  /* @import url("../suffusion/skins/dark-theme-royal-blue/skin.css"); */  

[collapse]

Header: eventueel met een slider

Header: kies voor Skinning - Header (Suffusion) en niet voor Weergave - Header (WordPress)
  • Bij de Suffusion-methode heb je meer opties en zit je ook niet vast aan de preciese grootte. Zorg wel dat er niets staat ingevuld bij Weergave – Header.
  • Je kan ook de widgetruimte: “widget above header”

[collapse]

Rotating header

Heel belangrijk: maak een map in in de hoofdmap: wp-content. Geef hem een naam en plaats hierin via ftp de header plaatjes. Dan: bij Skinning – Header – Folder for Rotating Header background: vul alleen de naam van de folder in. Vooral niet het hele adres! Dan werkt het goed: er verschijn tiedere keer een andere header als iemand op een ander menu kiest (bij scherm verversen), niet spontaan.

Rotation header FireShot Screen Capture #143 - 'Beeldhouwstudio Rijswijk' - juliettevanbavel_nl

[collapse]

 

Slider: NB: werkt alleen voor de homepagina

Other Graphical elements: featured content. Hier is heel veel in te stellen.

NB: het werkt alleen met instelling van Back End – site optimization – Use “Lite” version of JQuery Cycle?: use regular version!

Handig voor als je zoals hier op de voorpagina het laatste nieuws wil laten zien met een headerplaatje. Rechts het excerpt. Onderaan een rij met nummers, waardoor je kan bladeren. Je stelt bijv. in : alleen de laatste 5 bericten; of alleen de laatste featured berichten; je kan ook een paar vaste pagina’s benoemen. Klik erop en je komt bij het betreffende bericht of pagina.

[collapse]

 Menu

Menubalk

  • Wil je niet dat een item uit de balk kan worden aangeklikt, dan geef je dat op de pagina zelf aan bij Suffusion opties: Koppel deze pagina niet in de navigatiebalken. Als dit vak is aangevinkt, dan zal het aanklikken van deze pagina in de navigatiebalk je nergens heenbrengen. Maar let op: bij de breadcrumbs wordt de moederpagina overgeslagen!
  • Als een kind-pagina is geopend de opmaak van de ouder veranderen:
    #nav ul li.current-menu-ancestor a, #nav ul li.current-menu-parent a, #nav ul li.current-menu-ancestor a:visited, #nav ul li.current-menu-parent a:visited {  background:#000 !important;  }
  • Let op dat de titel in een menu niet te lang is, anders wordt het select balkje te breed en komt er een scrollbalk.
  • Gebruik de plugin foobox
  • Gebruik de plugin footable: dan komen de kolommen onder elkaar ipv naast elkaar. Je kan sommige kolommen laten inklappen, zorg dat ze goed zijn opgemaakt met thead en th en stel dan van de th (kolomkop)  in of een kolom moet uitklappen en bij welk apparaat (phone of ipad). (vb listcategory)
  • Kies bij Header voor: Header is inside the main wrapper
  • Bij lange titels wordt het select balkje ook navenant breed. Geef het met css een maximale breedte.
      @media screen and (max-width: 980px) { .tinynav{max-width:240px}
  • Soms valt het zoekbalkje uit de right header widgets precies over het select balkje: plaats het met css iets naar boven
    #right-header-widgets {position:relative; top:-50px}
  • Bij grote plaatjes is het handig om een maximale breedte op te geven:
      @media screen and (max-width: 980px) {  img {max-width:200px!important}  }@media screen and (max-width: 240px) {    img {max-width:50px!important}  }

[collapse]
Menu in Navigation bar below header: oplichten geselecteerde pagina

Je maakt het menu aan, en geeft in het tabje Locaties beheren aan waar het menu moet komen. Je hebt hier alleen de keuze tussen Navigation bar above header en  Navigation bar below header. Ik gebruik meestal de bar below header. NB: let op dat je de balk wel activeert via Suffuion - Other graphical elements. Standaard staat er bij Basic setup: hidden. Verander dat in Dropdown menus en widget areas.

In css kan je aangeven wat er moet gebeuren als het menu item van de geselecteerde pagina een andere keur of achtergrond kleur moet krijgen. In het voorbeeld: bij hoveren en selectie wordt achtergrondkleur van het hoofdmenu zwart

 #nav ul li.current-menu-ancestor a, #nav ul li.current-menu-parent a, #nav ul li.current-menu-ancestor a:visited, #nav ul li.current-menu-parent a:visited {background:#000!important;}  #nav ul li a:active, #nav.continuous ul li a:active, #nav ul li a.current, #nav.continuous ul li a.current, #nav ul li a.current:visited, #nav.continuous ul li a.current:visited { background-color:#000!important;}  

[collapse]

widget area below header: voor submenu; oplichten geselecteerde pagina uit hoofdmenu en uit onderliggend menu

  Het submenu wordt horizontaal weergeven ipv verticaal (standaard)

#horizontal-outer-widgets-1 li{display:inline-block; padding:0 8px; border-left: 1px solid #0A4391; }

De geselecteerde pagina en de moederpagina lichten op:

  #nav li.current-page-ancestor a{background-color:#FF57D2!important; color:#fff!important}  .dbx-content li.current-menu-item a{color:#fff;text-decoration:none; background-color:#FF57D2!important;}

[collapse]

Andere divs, zoals left header widget

Op abc site stond helemaal bovenaan: Platform Aarde Boer consument. Deze tekst geplaatst in Left Header widgets. Suffusion Opmaak:

  #left-header-widgets {  color: #777;  font-size: 1.1em;  font-weight: bold;  line-height: 1em;  text-align:left;  position:absolute;  top:-15px; left:10px; width:300px}

[collapse]

 

 

Divers

Breadcrumbs: alleen bij berichten

Zie aardeboerconsument breadcrumps

[collapse]

Paragrafen: verwijder de standaard ruimte onder iedere paragraaf. Een enter veroorzaakt een lege paragraaf, die getoond wordt als blanko regel. NB: in de editor ziet het er dan wel heel anders uit.

 p{margin-bottom:0px!important;} 

[collapse]

Opmaak pagina: wit, met padding

.post, article.page {background: none repeat scroll 0 0 #FFFFFF;  border: none;margin-bottom: 0px!important; overflow: hidden;  padding: 5px 15px 1em!important; }

[collapse]

Iedere pagina heeft zijn eigen achtergrondkleur, zo ook de menuknoppen bovenaan van iedere pagina

Zoek hiervoor precies het nummer van de id uit van die pagina en het menu-item nummer;

  #menu-item-354 a, #menu-item-354 a:visited, .post-5 #container, .post-5, .parent-pageid-5, .parent-pageid-5 article {background-color: #d9d9ff!important;}

Soms moest bij oplichten de kleur van de moederpagina veranderen

.parent-pageid-11, .post-11 {color:#fff!important} 

De menuknoppen: op horizontale lijn, padding; indien geselecteerd vetgedrukt

#nav.tab a {display: inline-block; padding: 5px 25px;} #nav.tab a, .tabselected a { font-size: 20px!important; font-weight: bold;} #nav ul li {border:none!important}

Een strookje rechts onderaan bleef wit. Dus heb ik het per pagina opgevuld met de juiste kleur

[collapse]

Datumbox verwijderen bij bericht

Suffusion Options > Skinning > Date Box: Under “Hide Date Box?” (I’t the 1st option on the Date Box panel) choose Hide Daarbij nog: Under Back-end -> Site Optimization,

[collapse]

sitemap

Je kan eenvoudig een sitemap aanmaken voor je lezers, maar Google neemt geen genoegen met de oplossing van Suffusion: Template – Sitemap: bepaal hier welke onderdelen  je in de sitemap wil opnemen. Maak daar een nieuwe pagina aan en kies bij Template voor Sitemap. Beter: gebruik de sitemap optie van SEO WordPress. Tbv Google: log in bij https://www.google.com/webmasters/tools/home?hl=nl en geef de sitemap op. De pagina wordt herkend, maar even later zie je een foutmelding: Uw sitemap lijkt een HTML-pagina te zijn. Gebruik in plaats daarvan een ondersteunde sitemapindeling.

[collapse]

Laadtijd versnellen

Op http://gtmetrix.com/ kan je de snelheid testen.

  • Ongeveer hetzelfde (engels), ietsje utgebreider: http://mbrsolution.com/blogging/how-to-speed-up-suffusion-and-wordpress.php
  • Gebruik Use Google Libraries
  • Minify generated css: Appearance >> Suffusion Options >> Back-end >> Site Optimization
  • Other graphical Elements -> Miscellaneous: Kies voor wel/niet ronde hoeken. Kopieer evt de code voor ronde hoeken direct in eigen stijlbestand. Suffusion Zet hier ook vinkjes bij Thumbnail generation; tenminste als je die niet gaat gebruiken.
  • Back End -> Site Optimization: zie de arceringen. Let op: Don’t minify the css als je een cache plugin gebruikt! Suffusion
  • Minificeer de eigen stijlbestanden evt. mbv gtmetrix (optimized version):
  • Niet doen: Gtmetrix stelt ook voor Optimize the order of styles and scripts: hier zie je scripts die een css-bestand oproepen vanuit het javascript. Beter is het om direct te doen. Onder Back End -> Custom Includes kan je 3 stijlbestanden opgeven.  Je moet dan wel hebben gekozen voor Auto-generatie CSS file for customization options  en dan Auto-generate  en linked in the source. Echter, doe het niet, want hij laat dan de stijlbestanden tweemaal. En is ietsje langzamer. Suffusion

[collapse]

Feedburner (SW van suffusion)

Suffusion

Suffusion

[collapse]
Responsive

Het thema is sinds november 2012 responsive; zet wel zelf het vinkje. Standaard instelling: linker en rechter zijbalk menu onder de content

[collapse]

Footer: verbergen maker website en comments

.cred-right, .sfw-nocomments  {display:none}

[collapse]

Shortcodes

NB: eerst de plugin installeren; daarna kan je shortcodes gewoon gebruiken in een pagina. Let op: hij combineert niet goed met sommige plugins. http://aquoid.com/news/themes/suffusion/shortcodes-to-enhance-functionality/

Op http://www.g-3.nl/  plaatste ik de shortcode

 [suffusion-widgets id='1'] 

In het eerste ad hoc widget plaatste ik Recent nieuws: en daar de instelling dat er 1 nieuwsbericht getoond moet worden. Op deze pagina verschijnt nu altijd het laatste nieuws bovenaan (of daar waar je de shortcode maar neerzet).
Shortcode
Elders de shortcode om gelijke kolommen te maken

  [suffusion-multic]    [suffusion-column width='1/2']A column with 1/2 the total width [/suffusion-column]    [suffusion-column width='1/4']A column with 1/4 the total width[/suffusion-column]    [suffusion-column width='1/4']Another column with 1/4 the total width[/suffusion-column]  [/suffusion-multic]  

[collapse]

Vertalingen

Kopieer de map Translation (incl nl_NL bestanden) naar het child theme.

[collapse]

Opmaak zijbalk en widgets daarin

Maak bij Suffusion options – Sidebars en dan sidebar 1 of 2 eerst de keuze wat voor type widgets je wilt: individual boxes, tabbed sidebar of flattened. Ik kies meestal voor individual boxes.

Opmaak tekstwidget: transparant

#text-3 {background-color:transparent}

[collapse]
Zijbalk: geen lijnen, achtergrondkleur en marge

NB: als het toch niet werkt,via css evt met !important, helpt het soms om het te plaatsen bij custom includes.

.suf-widget, .flattened,  #sidebar .textwidget, .suf-flat-widget,  #sidebar .dbx-group, .dbx-handle {border: none !important;}  #sidebar-shell-1 {background-color:#fff; margin:auto;}  .suf-flat-widget h3 {border-top:none!important}

[collapse]

Fontgrootte en lettertype voor menu-onderdelen

 #sidebar ul .menu-item a{font-size:1.05em;}  #sidebar ul{font-family:"Lucida Sans Unicode", Tahoma, sans-serif!important;}  #events-list h5{font-size:1em}  #contact a, #nieuwsbrief a{font-weight:bold}  #agenda p {line-height:0.9em}  p.entry #agenda a, .entry #agenda p {font-size:85{6057f192fcaa104d5cef828d6b20b99706932ef5d7e753992a4e9cd8fde980a4}; }  
plaatjes moeten de hele zijbalkbreedte vullen
[collapse]

home Op aardeboerconsument: was aanvankelijk rechter zijbalk: we vonden het mooier als de plaatjes helemaal de kolom vullen, en dus geen padding krijgen. Per widget moet je dit dan aangeven:

#ngg-sidebar-widget-2, #text-12, #slideshow-2 {text-align:center; margin:15px 0px!important}  #text-9 .dbx-content, #text-13 .dbx-content { padding-left: 0px!important; text-align:center;}.ngg-gallery-thumbnail img, #text-15 {background-color: white;border: none;display: block;margin: 4px 0px 4px 0px;  padding: 0px;position: relative;}

[collapse]
tekst centreren in plaats van links uitlijnen (standaard

Ook staat tekst altijd links, maar je kan het ook gecentreerd zetten: per onderdeel

#text-14  {text-align:center}

De hele kolom beinvloed je met:

.suf-flat-widget widget_text

[collapse]
Geef het plaatje in het widget de juiste grootte

  #cartoon a {padding:0px!important; margin:0px}  

[collapse]
zijbalk met streep onder ieder item en icoontje vooraan in de regel

Bij Boer Koekoek: de actueel (evenementen) en nieuws kolom aangepast: resp. streep tussen de onderdelen, en bolletje links van ieder item:

  Bolletje: .suf-widget ul li{list-style:inside circle}  Streep eronder:.dbx-content ul{border-bottom:1px solid #cecece}  Maar niet onder het laatste item van de lijst: .last-child ul{border-bottom:none!important}  .suf-widget ul li{padding-left:6px!important}

zijbalk lijst met bolletje

Bij TTnijmegen: pijltje naar rechts, nu met background-image

 .textwidget li, .widget_links.suf-widget li  {padding: 6px 0px 0px 15px;  background: url(http://transitiontownnijmegen.nl/ttn/wp-content/themes/suffusion-child/images/arrow_right.png) no-repeat 0 10px!important;}  

Bij DNAindebouw.nl: geen bolletje maar een pijltje

  .widget-suf-cat-posts li.suf-cat-post, .suf-mag-category li.suf-mag-catblock-post {  padding: 6px 1px 6px 20px;  border-bottom: 1px dotted #c0c0c0;  background: url(images/right_arrow.png) no-repeat 0 10px;  

Bij Innermotion: geen bolletje, helemaal niets. NB: je moet dan background instellen op none.

.sidebar-tab-content ul li, .suf-widget ul li, .suf-flat-widget ul li, .suf-panel-widget ul li{background:none!important} /*zijbalk geen bolletje ervoor*/

[collapse]
Suffusion Slider in zijbalk

De Suffusion-slider in de zijbalk werkte niet meer bij updaten naar WordPress 3.4.2 en Suffusion 4.4.2. Gelukkig was er een eenvoudige oplossing (http://aquoid.com/forum/viewtopic.php?f=2&t=13715)

suffusion slider
Bij het widget nu ingesteld: Hoogte van de sectie ‘featured’ berichten: 170px; in CSS:

#suf-featured-posts-5-slider { min-height:190px;}   #suf-featured-posts-5-slider .featured-content-title{font-size:0.8em} 

Hiermee houd je een balkje van 20 px over met de titel

[collapse]
WidgetQuery posts

Je kan de recentste berichten filteren (maximaal 20) op basis van: categorie, tags, of ze een bepaald formaat hebben (afbeelding bijv. laat berichten zien met een plaatje). Excerpten, grootte van excerpt. Je kan echt veel instellen. Het lijkt op listcategory posts. Alleen is dit echt voor de nieuwste berichten en niet voor alle.

Suffusion

[collapse]

Suffusion corrupt geraakt?

kan optie: aantal zijbalken Suffusion niet opslaan

Dit overkwam me aug. 2013 met de site kjjm.nl/autoreserveren. Dit komt af en toe voor. Kan te maken hebben met php versie. Hierop heb ik handmatig de versie ingesteld op 5.3.3. Had geen effect. Uiteindelijk advies opgevolgd zoals gegeven op http://wordpress.org/support/topic/suffusion-theme-skinning-options-cant-change Introduction Export – Import / export core options to a file. Handmatig gezocht naar suf_sidebar_count: Getal aangepast van 1 naar 0. Daarna ook aangepast: ‘suf_widget_area_below_header_enabled’ => ‘disabled’, Maar ik wilde nog meer aanpassen en niets werkte. Hij liet ook het uitrol menu niet meer zien onder Save. Wat hielp: een oude versie installeren, daarna updaten naar de  nieuwe. Opeens was het uitrol menu er ook weer!

[collapse]