MAYO => SOLO

DEZE PAGINA IS NOG IN OPBOUW.

Op deze pagina beschrijf ik mijn ervaringen met het overzetten van mijn Drupalsite van D9 met het thema MAYO naar D10 met het thema SOLO.

De upgrade van d9 naar d10 staat uitgebreid op een andere pagina beschreven. Hier heb ik het over de stappen van MAYO naar SOLO.

MAYO is al jaren niet meer in onderhoud en met wat sleutelwerk toch nog werkzaam voor d9. Echter betrouwbaar wordt het er niet op dus ging ik op zoek naar een ander thema dat volop in ontwikkeling is en waarmee ik een lookalike kan maken van de site met MAYO. Ik kwam terecht bij SOLO dat ook al D11 proof is.

Hier is echter geen D9 versie van, dus moeten we via een ander thema gaan upgraden naar d10.

Ik ga ervan uit dat de website nu lokaal draait.

Allereerst moeten wij screenshots of notities maken van de blokkenindeling in mayo.

Afbeelding

Tevens screenshots van de homepage en andere belangrijke pagina’s qua indeling.

Afbeelding

Tenslotte hebben we een screenshot nodig van de kleurinstelling.

Afbeelding

Als we deze gegevens hebben kunnen we als thema olivero als default instellen. Je website ziet er nu geheel anders uit qua layout, maar dat is voor de upgrade geen probleem. Deinstalleer nu mayo. Dit is belangrijk anders kan je de mayo folder niet fysiek verwijderen.

De deprecated module color kan nu worden gedeinstalleerd.

Nu is het tijd om de website te gaan updaten en daarna te upgraden. Zie het tabblad van d9 naar d10. Hier staat beschreven hoe ik dit heb gedaan.

Als de upgrade geslaagd is kan het thema SOLO worden geïnstalleerd met composer.

SOLO wordt geplaatst in themes/contrib/. Voor vervanging van MAYO maak ik gebruik van een subthema genaamd SOLOMAYO, dat in themes/custom/ wordt geplaatst. De custom folder zal waarschijnlijk nog niet bestaan en zal dus aangemaakt moeten worden. De meest recente versie vindt je op https://github.com/tzsl/solomayo.

Je kunt ook een kopie maken van de subthemefolder uit de SOLO-folder en deze plaatsen in de custom folder. Je moet dan wel de naamgevingen en verwijzingen aanpassen. Doe je dit niet, dan heb je een probleem bij updates van het thema.

Dit zijn de aanpassingen die nodig zijn:

• rename in themes/custom de folder solo_subtheme in solomayo en ga naar deze map
• rename solo_subtheme.info.yml in solomayo.info.yml
• rename solo_subtheme.libraries.yml in solomayo.libraries.yml
• rename solo_subtheme.theme in solomayo.theme
• edit solomayo.info.yml
  • name: Solomayo sub-theme
  • description: Solomayo subtheme
  • libraries: - solomayo/solomayo-global
• edit solomayo.libraries.yml
  • 1 solomayo-global
  • 5 css/solomayo-style.css
  • 8 js/solomayo-script.js
• edit solomayo.theme
  • 11 function solomayo_theme_suggestions_block_alter(&$suggestions, $variables) {
  • 15 $suggestion = str_replace('solo_', 'solomayo_', $suggestion);
• rename config/install/solo_subtheme.settings.yml in solomayo.settings.yml
• rename css/solo-subtheme-style.css in solomayo-style.css
• rename js/solo-subtheme-script.js in solomayo-script.js
• pas eventueel screenshot.png aan

Zodra het subthema is geplaatst en aangepast of de zipfile is uitgepakt ga je naar beheer>uiterlijk en installeer je als default solomayo. Automatisch wordt SOLO ook direct geïnstalleerd.

Wacht nog even om zaken in het thema te gaan zetten, maar ga als eerste nu de blokken op de juiste plaats zetten. Omdat Solo zo uitgebreid is laat het nl alleen de regio’s zien waar blokken instaan.

Nu kunnen we beginnen met het inrichten van ons thema solomayo. Er zijn twee methoden om de kleuren in te voeren nl

1. 1 via solomayo-style.css.
2. 2 via de settings van het thema

Ik begin met 1 omdat in de css de mayo-look wordt opgebouwd. Bij de  opbouw moest ik elke keer weer de kleurcodes intypen, maar ik beschrijf nu een andere aanpak. In de css map heb ik een extra map “color” aangemaakt. Hierin heb ik aparte kleur-css files aangemaakt die overeenkomen met de kleuren die mayo ter beschikking heeft. Bijvoorbeeld in de file mayo-blue.css staan alle mayo variabelen van blauw.

Afbeelding

In de eerste regel plaatsen we een importregel.

@import "colors/mayo-default.css";
Deze MOET op de 1e regel.

Default kan worden aangepast in de kleur die je nodig hebt. In mijn geval was dit voor 1 site blue en 2 andere sites paleblue . Mijn eigen site heb ik nu met default.

Omdat Solo geen Georgia als lettertype heeft, moeten wij deze in onze css plaatsen.

body {
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua',
    'URW Palladio L', Baskerville, serif;
    line-height: 1.5em;
    font-size: 87%;
    background-color: var(—m-base);
}
h1, h2, h3 {
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Baskerville, serif;
}

Solo kent geen de kleurverloop in de header dus deze brengen we ook in de css aan.

.header {
    background: linear-gradient(to right, var(—m-left), var(—m-right)) !important;
    --r-tx:  var(—m-titleslogan); }

Om de rand van de body zichtbaar te maken moeten we de page-wrapper iets verkleinen. Tevens brengen we de kleur aan en ook eventuele tabellen kleuren wij hier. 

#page-wrapper {
  margin: 2%;
  width: 96%;
  border-style: solid;
  border-width: 0.7em;
   --r-br: var(--m-bg);
   --r-bg: var(--m-bg);
   --r-tx: var(--m-text);
   --r-lk: var(--m-link);
   --r-lk-h: var(--m-highlight);
   --solo-thead: var(--m-tableheader);
   --solo-even: var(--m-even);
   --solo-odd: lighten(var(--m-even), 40%);
}

Omdat mayo geen odd als variabele heeft gebruik ik de lighten optie.

we moeten de main-container iets terug schuiven zodat deze recht onder de header en primary-menu komt.

.main-container-inner {
   padding: 16px 0 !important;
}

.solo-outer .region-inner {
 padding: 0.5rem;
}

Het hoofdmenu is bij mij in de vorm van tabbladen met ronde bovenkant. Dit doen we als volgt:

#primary-menu {
   --r-bg: var(--m-bg);
 @media (min-width: 48rem) {
 .solo-inner .navigation__menubar li.nav__menu-item > a {
   background-color: var(--m-node);
   border-width: 1px 1px 0.4px 1px !important;
   border-style: solid !important;
   border-color: black !important;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   margin: 5px 2px 0 2px !important;
   }
 }
}

Het breekpunt moet overeenkomen met het breekpunt wat  straks in Solomayo wordt ingesteld.

Nu is de sidebar aan de beurt. we maken hier gebruik de class .sidebar-box-first-inner en second-inner met name height: auto !important; is belangrijk. Deze zorgt er voor dat het blok niet te lang wordt.

#sidebar-box-first,
#sidebar-box-second {
   --r-bg: var(--m-sidebar);
   --r-tx: var(--m-sidebartext);
   --r-tx-lk: var(--m-sidebarlink);
}
#sidebar-box-main {
   --r-bg: var(--m-node);
}

.sidebar-box-first-inner,
.sidebar-box-second-inner {
   border-radius: 8px;
   padding: 5px 10px;
   margin-bottom: 10px;
   border-style: solid;
   border-width: 2px;
   height: auto !important;
}

Eventuele koppen gaan we onderstrepen in de sidebars.

/* underline h2text in sidebars */
.sidebar-box-first h2,
.sidebar-box-second h2 {
 background: transparent;
 line-height: 1em;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 margin: 4px 0px 2px 0px;
 padding: 2px 0px;
 font-size: 1.25em;
}

/* underline node h3 */
.node__header h3 {
   padding: 0px;
   background: transparent;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   font-size: 1.45em;
}

De paginatitel wordt in Solo geplaatst in een eigen regio. Deze is alleen niet zichtbaar op de homepage. Daar heb je de mogelijkheid om een aparte titel te plaatsen in de welkomsregio.

Bij mayo staat de paginatitel in de maincontent, althans bij mij.

Ook deze gaan we aanpassen. De eerste regel is nodig voor versie 1.04, de tweede <1.04

h1.page-title-text, 

h1.page-title {
 line-height: 1.1rem;
 background-color: var(--m-pagetitle);
 color: var(--m-pagetitletext);
 padding: 4px 8px;
 font-size: 1.3em !important;
 margin-bottom: 10px;
}

Nog even wat laatste aanpassingen.

h2 {
 font-size: var(--solo-px18);
 line-height: var(--solo-px20);
}

table, th, tr {
   border-color: var(--m-tableheader) !important;
}

article.node {
 border-radius: 8px;
 padding: 5px;
 margin-bottom: 10px;
 border-style: solid;
 border-width: 2px;
 border-color: var(--m-node);
}

/*Otherwise icon is full width*/
.language-icon {
 width: 16px !important;
}

De language-icon nam bij mij de gehele breedte van het scherm in en kon hiermee worden voorkomen.

Het is ook te voorkomen door image-auto op te nemen in de instellingen van Solo.

.evblok,
.lnblok {
   background-color: var(--m-node);
   border-radius: 8px;
   padding: 5px 10px;
   margin-bottom: 10px;
   border-style: solid;
   border-width: 1.5px;
   border-color: var(--m-sidebarborders);
}
De 2 classes, evblok en lnblok gebruik ik in de views als toegevoegde css voor een duidelijke layout.

Uiteraard geven we de copyright en footer een mayo-kleur.

/*add colors to footer-region*/
#copyright,
#footer-container {
   --r-bg: var(--m-footer);
   --r-tx: var(--m-footertext);
   --r-lk: var(--m-footerlink);
}

In mayo zit een button.gif. Deze wil ik ook gebruiken. Daarvoor heb ik in de folder solomayo een folder "images" aangemaakt en de gif uit Mayo in de folder images gezet en in de css het volgende opgenomen:

.page-wrapper input.button {
   margin: 2px;
   padding: 2px 10px;
   color: #555555;
   cursor: pointer;
   font-size: 0.9em;
   border: solid 1px #888888;
   background: #fff url(../images/button.gif) repeat-x center;
}

Als laatste zorg ik ervoor dat menu-items in de footer verticaal komen te staan.

/* if extra menu's are in bottom, to make it vertical*/
.navigation__menubar-gebruikersmenu,
.navigation__menubar-menu-redactie,
.navigation__menubar-menu-kooradministratie {
 width: 100%;
 display: block !important;
 padding: 8px 16px;
 text-align: left;
 border: none;
 line-height: var(--solo-px3);
 font-size: var(--solo-px15);
 white-space: normal;
 float: none;
 outline: 0;
}

De solomayo-style.css is nu klaar.

Nu moeten we nog een paar aanpassingen doen aan de settings.

Beheren>Uiterlijk>Solomayo>instellingen

Global Site

     Website width -Solo Theme heb ik op 100% gezet.

     Menu's Breakpoints - Solo Theme  moet gelijk zijn aan wat we in de CSS hebben gezet. Bij mij dus 768px/48rem.

<OPSLAAN>  (je loopt het risico dat bij teveel veranderingen niet alles wordt meegenomen)

Page Wrapper.

    CSS Classes Only   image-auto. Dit voorkomt dat een image, als het ook een link is beeldwijd is.

Main Containers.

    De 3 koloms setting naar 20-60-20

    Select from this list to enable.... 8px/0.5rem

   Tick box prefer rounding.. ja

    Tick box rearrange mobile layout.... ja

Social Media Links

    show Social icons nee, tenzij je hier wel prijs op stelt.

Copyright & Credit

    pas aan naar je eigen situatie.

Logo en Favicon

    pas aan naar je eigen situatie.

<OPSLAAN>

En dit is het resultaat.

Afbeelding

            Drupal 9 theme Mayo                      Drupal10 theme Solo