Bonusdag: de basis van Drupal theming

Uit de poll bleek overduidelijk dat er behoefte is aan meer informatie over het aanpassen van het uiterlijk van een Drupal website. In deze eerste bonusdag gaan we daarom de belangrijkste stappen zetten die nodig zijn om de opmaak (en layout) van jouw website te beheersen zoals het maken van een sub-thema, het toevoegen van een blokgebied en het aanpassen van het CSS opmaak bestand.

Wees gewaarschuwd: het aanpassen van een thema gebeurd voor het grootste deel met CSS. Wanneer je hier nog nooit mee hebt gewerkt dan zul je deze tutorial misschien nog wel kunnen voltooien, maar wil je daarna echt je eigen stempel drukken op het uiterlijk dan zul je je eerst verder moeten verdiepen in deze opmaaktaal (via Google zijn voldoende tutorials te vinden).

Korte theming introductie

Helemaal nieuw met theming? Vooruit, een korte introductie dan. Wat je in ieder geval moet weten is dat een dynamische webpagina drie lagen bevat: HTML, PHP en CSS.

  • - De HTML laag bepaalt waar elementen zich op de pagina bevinden en geeft hier eventueel een (unieke) naam aan, denk aan een element met als naam "menu".
  • - De PHP code die binnenin dit "menu" element is geplaatst bepaalt dynamisch of, en zo ja, welke menu items geladen moeten worden.
  • - De CSS, ten slotte, voorziet het menu, met behulp van zijn unieke naam, van opmaakgegevens zodat de browser precies weet welke kleuren, posities, marges etc toegepast moeten worden. Je kunt je voorstellen dat van deze pagina weinig overblijft zonder CSS behalve elkaar geplakte zwarte tekst op een witte achtergrond met hier en daar blauw gekleurde link.

De (unieke) HTML naam van een element is samengesteld uit een ID en/of klasse ("class"). Het element waarin de content geladen wordt heeft bijvoorbeeld de ID "content". In de CSS is vervolgens bepaalt welke kleur de tekst binnen dit element moet hebben, bijvoorbeeld zwart: (#content {color: black} ).

Wat nu als de tekst binnen #content op een bepaalde pagina rood moet zijn? Dat kan dat op twee manieren; ofwel je past CSS toe op een onderliggende element, indien aanwezig (die overruled dan de opmaak van het bovenliggende element), ofwel je zorgt dat deze content naast een ID ook een unieke klasse heeft (ID="content" class="rood"). Dit element krijgt eerst de opmaak mee van #content welke vervolgens wordt aangevuld door de opmaak van de klasse rood, die het laatste woord heeft.

In de praktijk kun je zodoende een View via de Dupal administratie een eigen klasse meegeven, en daarmee dus ook een unieke opmaak ten opzichte van andere Views. Open maar eens een View (Structuur > Views > bewerken), klik dan rechts op Advanced en zoek onderaan onder het kopje Other naar CSS class. Wanneer je daarachter op geen klikt kun je je eigen klasse invullen. Verderop zal duidelijk worden hoe je die klasse vervolgens op de juiste manier aan het Drupal CSS bestand toevoegd.

Een geschikt thema downloaden en installeren

Hoewel je ook verder kunt werken vanuit het huidige thema is het voor het serieuze werk een beter idee om een zo kaal mogelijk thema te installeren dat speciaal is ontworpen om als fundament te dienen. Meerdere thema's komen hiervoor in aanmerking, op de theming dag hebben we er al een aantal opgesomd en hier vind je een uitgebreid overzicht.

Al deze basisthema's zijn tegenwoordig wel responsive en HTML5 dus een echt verkeerde keuze kun je hierin niet maken. Het is vooral een kwestie van voorkeur want verschillen zitten vooral in de manier waarop het CSS bestand is ingedeeld en geavanceerde opties zoals SASS of LESS ondersteuning (dit zijn zeg maar CSS varianten waarbij simpele formules gebruikt kunnen worden). In deze tutorial kiezen we in ieder geval voor een op Boilerplate gebasseerd thema.

Download Boilerplate voor Drupal hier en installeer de module vervolgens zoals je hebt geleerd in Dag 5: een thema installeren. Je hoeft dit thema niet te activeren want we gaan een child-thema maken.

Wat is een child-thema?

De eerste stap bij het aanpassen van een bestaand thema is het maken van een "child theme", ook wel "sub-theme" genoemd. Zoals de naam al doet vermoeden is een child-thema als het ware een subonderdeel van een hoofdthema, in ons geval van Boilerplate. Het childthema erft alle eigenschappen van dit hoofdthema. Het voordeel hiervan is dat je het wiel niet opnieuw hoeft uit te vinden en tegelijkertijd het hoofdthema kunt blijven updaten zonder dat jouw aanpassingen verloren gaan.

Het enige wat een child-thema in principe moet bevatten is een .info bestand en een *.css bestand. Het *.info bestand bevat alle algemene informatie over het thema en in het geval van een child-theme ook de naam van het bijbehorende hoofdthema.

In het *.css bestand kun je de benodigde wijzigingen in het uiterlijk doorvoeren ten opzichte van de opmaak in het hoofdthema. Want wanneer een bestand zich zowel in de folder van het hoofdthema als in die van het childthema bevindt, dan zal Drupal het bestand in het child-thema voorrang geven. Zo is het ook met het style.css bestand dat we straks in het child thema gaan plaatsen.

Een child-thema maken

Bestanden downloaden

Log via jouw ftp programma in op de server van jouw Drupal installatie. Blader vervolgens aan de kant van de server naar de folder sites /all//themes/boilerplate. Maak nu op jouw eigen pc ergens een map aan met als naam bijvoorbeeld "klantenportal".

Sleep vervolgens het bestand boilerplate.info van de server naar deze folder op jouw pc. Doe hetzelfde met de gehele folder genaamd css. Nu heb je alle noodzakelijke bestanden om het uiterlijk aan te passen.

Het *.info bestand aanpassen

Open het zojuist gedownloade klantenportal/boilerplate.info met bijvoorbeeld Wordpad, Sublime Text 2 of een ander geschikt programma. Gelijk bovenaan in dit bestand vind je de algemene informatie van het Boilerplate thema (wellicht met enkele kleine verschillen zoals een ander versie nummer):

name = Boilerplate 
description = Metaltoad HTML5/SASS base theme for Drupal 7
screenshot = images/screenshot.png
core = "7.x"
version = "1.0"
project = "Boilerplate"
engine = phptemplate

Verander dit naar:

name = Drupal in 24 dagen 
base theme = boilerplate
description = Child-thema voor Boilerplate
core = "7.x"

Onze informatie is wat beknopter omdat ik voor het overzicht alleen de meest essentiele gegevens heb behouden. Je kan hier natuurlijk als naam en beschrijving invullen wat je zelf wilt, zolang de belangrijkste regel "base theme = boilerplate" maar gelijk is, want hiermee maken we duidelijk aan Drupal wat het hoofdthema is. De correcte naam van het hoofdthema kun je afleiden uit de naam van het *.info bestand in het hoofdthema. Dus niet de naam zoals in het *.info bestand, maar die van het bestand zelf, in dit geval dus zonder hoofdletter.

Onder de bovenstaande regels bevindt zich nog een boel extra informatie, waarvan we het meeste niet perse hoeven te herhalen in ons child-thema. Verwijder daarom alles behalve de regels die beginnen met "regions[]", features"features[]" en de "regel stylesheets[all][] = css/style.css".

Sla nu het bestand op als klantenportal.info (of kies je eigen naam).

In principe ben je nu al klaar. Er zijn echter nog wat optionele stappen die je kunt volgen voordat je doorgaat met het uploaden en activeren van het sub-thema, zie hieronder. Je kunt deze stappen ook later nog eens bekijken en nu eerst doorgaan met het activeren van jouw sub-thema.

Optioneel: @import

We zijn nu in principe al klaar met het voorbereiden van het child-theme, maar ik wil nog iets kwijt over het CSS bestand, te vinden in klantenportal/style/style.css. Zoals uitgelegd overruled dit bestand momenteel de style.css binnen het hoofdthema. Wil je nu dat dit bestand niet de CSS in het hoofdthema overschijft, maar aanvult, dan zou je de volgende @import code bovenaan je CSS bestand kunnen plakken:

@import url(../../boilerplate/css/style.css);

Wanneer je alles binnen het CSS bestand daarna zou verwijderen dan behoud je nog steeds de opmaak van het hoofdthema. Het voordeel hiervan is dat het CSS bestand dan alleen maar de daadwerkelijke gewijzigde opmaak hoeft te bevatten, wat de boel wat overzichtelijker maakt. Het nadeel is wel dat, wanneer je iets wilt wijzigen, je de desbetreffende opmaak in zijn geheel moet uitschrijven en je niet in een oogopslag kunt zien van welke CSS het hoofdthema gebruik maakt. Een kwestie van voorkeur.

Optioneel: een regio toevoegen

Wanneer je niet alleen het uiterlijk maar ook de structuur van het thema wilt aanpassen heb je ook de zogenaamde template bestanden nodig, welke vaak, en ook in dit geval, te vinden zijn in de /templates folder van het thema. In deze folder bevinden zich een aantal *.tpl.php bestanden. In het page.tpl.php bestand wordt bijvoorbeeld bepaald hoe het HTML en PHP skelet van de totale website in de hoofdlijnen is gestructureerd. In de node.tpl.php staat de structuur van content (nodes) opgeslagen. De inhoud van comment.tpl.php en block.tpl.php laten zich raden.

Kun je via de Drupal administratie iets niet aanpassen dan kun je alsnog je zin krijgen door deze bestanden aan te passen, mits je een beetje behendig bent met HTML en het knippen en plakken van PHP. De meest voorkomende ingreep is het toevoegen van een nieuwe gebied om blocks in te kunnen plaatsen. Voor de volledigheid wil ik graag laten zien hoe dit werkt, maar als je denkt hier geen gebruik van te maken dan kun je de hiervoor benodigde stappen gerust overslaan.

Kopieer het bestand boilerplate/templates/page.tpl.php van de server naar jouw pc en plaats deze in klantenportal/templates.

Open klanteportal/templates/page.tpl.php en zoek binnen dit bestand naar de regel <!-- /sidebar-first -->. Hiervoor en hierboven bevinden zich de volgende PHP/HTML regels:

<?php if ($page['sidebar_first']): ?>
      <aside id="sidebar-first" class="column sidebar first">
        <div id="sidebar-first-inner" class="inner">
          <?php print render($page['sidebar_first']); ?>
        </div>
      </aside>
 <?php endif; ?>
<!-- /sidebar-first -->

Deze code zorgt ervoor dat het blokgebied "sidebar_first" ("eerste zijbalk") wordt weergegeven op de pagina, en wel binnen een ASIDE en een DIV element met hun eigen ID en class (o.a. "sidebar-first"). De <?php if (): ?> en <?php endif; ?> statements die dit alles omsingelen zorgen ervoor dat dit blok alleen wordt "geprint" wanneer er daadwerkelijk blokken aan zijn toegewezen.

Er zijn in het page.tpl.php meerdere soortgelijke blokgebieden te vinden maar dan met andere namen en hun eigen ID's en klassen. Een nieuw blok gebied toevoegen is een kwestie van de code voor een blokgebied kopiëren, op de gewenste plek plakken en de namen veranderen. Op diezelfde manier kun je onder het "sidebar_first" gebied een blokgebied creeren met de naam "sidebar_first_bottom":

<?php if ($page['sidebar_first_bottom']): ?>
      <aside id="sidebar-first-bottom" class="column sidebar first bottom">
        <div id="sidebar-first-bottom-inner" class="inner">
          <?php print render($page['sidebar_first_bottom']); ?>
        </div>
      </aside>

<?php endif; ?><!-- /sidebar-first-bottom -->

Wanneer je bovenstaande code direct onder de regel met <!-- /sidebar-first --> plaatst is dit in veel gevallen al voldoende, maar wacht nog even. Voor dit specifieke thema zijn we genoodzaakt het net even wat anders te doen om problemen te voorkomen. De aangepast code ziet er in zijn geheel als volgt uit:

 <?php if (($page['sidebar_first']) || ($page['sidebar_first_bottom'])): ?>
    <aside id="sidebar-first" class="column sidebar first">
     <?php if ($page['sidebar_first']): ?>    
        <div id="sidebar-first-inner" class="inner">
          <?php print render($page['sidebar_first']); ?>
        </div>
      <?php endif; ?> <!-- /sidebar-first -->
     <?php if ($page['sidebar_first_bottom']): ?>
        <div id="sidebar-first-inner-bottom" class="inner">
          <?php print render($page['sidebar_first_bottom']); ?>
        </div>
     <?php endif; ?><!-- /sidebar-first-bottom -->
   </aside>
 <?php endif; ?><!-- /sidebar-first-all -->

Ten opzichte van de voorgaande code is het bovenste IF statement wat langer geworden. De twee streepjes "II" komen op hetzelfde neer als OR, oftewel OF. Er staat dus eigenlijk: ALS de eerste zijbalk OF de eerste zijbalk daaronder actief is DAN moet het element ASIDE worden geprint en vervolgens alleen de actieve zijbalk(en). Deze toevoeging is voor het Boilerplate thema nodig om de gebieden anders over elkaar heen worden geplaatst. Wanneer je op een andere plek (of in een ander thema) een gebied toevoegd kun je meestal terugvallen op eerdere methode waarbij je alleen de namen veranderd.

Goed. Kopieer en plak nu de aangepast code hierboven over de code heen van het huidige sidebar first gebied (dat begint bij <?php if ($page['sidebar_first']): ?>  en eindigt bij <!-- /sidebar-first -->).

Nu het moeilijke deel achter de rug is hoeven we het blokgebied alleen nog maar te registreren, pas dan kunnen we er via de adminstratie een blok aan koppelen. Weet je nog dat het klantenportal.info bestand een lijst met regions bevat? Open dit bestand en voeg aan deze lijst het volgende nieuwe gebied toe:

regions[sidebar_first_bottom] = Eerste zijbalk onder

Waarbij "sidebar_left_secondary" de machine naam is zoals gebruikt in de PHP code en "Eerste zijbalk onder" de gewenste labelnaam in de Drupal adminstratie. Het meest logische is om dit nieuwe gebied onder de regel regions[sidebar_first] te plaatsen aangezien de rangorde van deze lijst parallel is aan volgorde gebruikt op de blokken administratie pagina.

Als alles goed is gegaan kun je straks gebruik maken van jouw nieuwe blokgebied onder de eerste zijbalk. Dit is nu niet direct heel zinvol, want of je nu twee blokken in de eerste zijbalk of één in de eerste en één in de tweede zijbalk: het ziet er nu hetzelfde uit. Ze bevinden zich in dezelfde zogenaamde overkoepelende "wrapper" (in dit geval ASIDE). Maar doordat de ID's van de DIV elementen daaronder wel degelijk verschillen kun je met CSS indien gewenst nu een visueel onderscheid maken tussen de onderste en de bovenste blokken.

Template wijzigingen komen vaak niet direct door, leeg zonodig even de cache (instellingen > prestaties > cache leegmaken).

Het child-thema uploaden en activeren

In het ftp programma upload je de volledige map "klantenportal" naar /sites/all/themes/. Log nu in de de Drupal website en activeer op de Uiterlijk pagina het nieuwe thema zoals je hebt geleerd op Dag 5.

Klik achter het Corporate Clean en Bartik thema gelijk even op uitschakelen (dit hoeft niet persee maar het voorkomt dat de thema's terug komen in bepaalde configuratie pagina's zoals bij het bepalen van blok posities).

Wat is er allemaal veranderd?

Neem nu eerst eens een kijkje op de website om te zien hoe deze eruit ziet.

(...) Dat is nog al een verschil nietwaar? Een bijna blanco blad waarbij drie als eerste dingen opvallen:

  • - Het logo is verdwenen
  • - Alles is wat op elkaar gepropt
  • - Sommige onderdelen hebben een andere plek gekregen (zoals de "mijn facturen")
  • - Er is een zoekfunctie bijgekomen

Het wijzigen van het standaard logo hebben we al eerder gedaan op dag 5, dus dit zou geen problemen moeten opleveren. Wat betreft het ontbreken van marges: om dit te wijzigen zullen we ons tot het CSS bestand moeten wenden van ons child-thema. De zaken die verplaatst zijn, inclusief het zoekblok, kunnen we vanuit de Drupal administratie aanpassen. Laten we daar als eerste mee beginnen.

De reden dat sommige onderdelen zijn verdwenen of een andere positie hebben gekregen heeft te maken met de unieke instellingen en regionen van elk thema. Blijkbaar heeft het vorige thema onderin een gebied gehad waar dit thema niet over bezit of een andere naam voor gebruikt. De blok module weet dan niet meer waar hij het Gebruikersmenu moet plaatsen en schakelt deze automatisch uit. Nu hoeft dat geen probleem te zijn want de links naar "mijn facturen","mijn account" en "uitloggen" zijn wel zichtbaar, namelijk in het hoofdmenu. In tegenstelling tot Corporate Clean ondersteunt dit thema namelijk "secundaire" menu links, waardoor het menu naast het hoofdmenu het gebruikers menu als extra bron gebruikt.

Kwa toegankelijkheid maakt het weinig verschil waar de menu links zich bevinden. Wij werken echter niet voor niets met Drupal: we willen zelf kunnen bepalen waar wat wordt getoont. Om een idee te krijgen van de nieuwe blokgebieden ga je eerst naar  Structuur > Blokken* en klik je bovenaan op de link "blokgebieden demonstreren". Sluit het voorbeeld af en sleep het user menu naar de Eerste zijbalk of een andere gewenste positie en sla de wijzigingen op. Nu je er toch bent kun je ook de titel van dit blok misschien aanpassen naar "Mijn menu" of iets dergelijks.

* Wanneer je een extra regio hebt gemaakt zie je deze als het goed is hier op de blokadministratie pagina terugkomen.

Dan zijn de extra links in het menu aan de beurt. Ga naar Structuur > Menu's en klik rechtsboven op het tabblad "instellingen". Hier kun je precies bepalen welke links het hoofdmenu moet bevatten, en of er ook secundaire links aanwezig moeten zijn. Die secundaire links zijn in dit geval de links van het gebruikersmenu, welke uiteraard alleen worden getoond als iemand is ingelogd. Op zich prima, maar wil je dit menu alleen in een blok tonen dan heb je hier de optie om de links uit het hoofdmenu te halen.

Tip: Als je het hoofdmenu helemaal wilt uitschakelen om deze alleen in de blok te plaatsen dan kan dat dus ook op deze plek.

Dan is er nog een zoekblok bijgekomen, welke momenteel alleen zichtbaar is voor administratoren. Je weet inmiddels wel hoe je dit blok kunt uitschakelen.

Wil je dit blok juist behouden en aan iedere bezoekers tonen? Normaal gesproken regel je dit in de blok instellingen maar je zult merken dat hier al is ingesteld dat iedereen het blok mag zien. Waarom krijgt dan toch niet iedereen het zoekveld te zien? Precies! Dit moet te maken hebben met toegansrechten.

Ga naar Personen, klik op het tabblad Toegangsrechten, en geef vervolgens bezoekers het recht om van de zoekfunctie gebruik te maken.

Staat alles op de plek zoals jij het hebben wilt? Dan kunnen we ons nu richten op het verfraaien van het uiterlijk.

Het CSS bestand aanpassen

Stel je bent ergens niet tevreden over wat betreft het uiterlijk van de website, en dat kan ik me goed voorstellen want het is nu nogal ..kaal. Maar hoe pas je dat dan precies aan? De eerste stap is bepalen wat je precies wilt aanpassen. De marge tussen de zijbalk en de content lijkt mij bijvoorbeeld een goed begin.

Je kunt dit marge probleem via meerdere kanten benaderen, bijvoorbeeld door de zijbalk te versmallen of hier een marge (de ruimte tussen elementen) aan te verbinden. Of juist door een padding (de ruimte tussen de tekst en de rand van een element) toe te voegen aan het content gebied. Voor dit specifieke thema is de laatste optie waarschijnlijk het beste.

Open de voorpagina in jouw browser en ga met een ontwikkelaars tool op zoek naar de ID van het element dat verantwoordelijk is voor de afstanden tussen content en zijbalk. Zelf vind ik de ingebouwde tool van Google Chrome hiervoor het prettigste werken, maar Mozilla Firefox, eventueel in combinatie met de Firebug extensie, is ook zeer geschikt hiervoor.

Er van uitgaande dat je Chrome gebruikt: klik met de rechtermuisknop ergens op de pagina en ga naar Element Inspecteren (Firefox gebruikers: ga je in het hoofdmenu naar Extra > Webontwikkelaar > Inspecteren (of gebruik de snelkoppeling CTRL-SHIFT-I).

Na een korte inspectie kom je dan bijvoorbeeld uit bij het DIV element met de naam "content" als gegadigde voor onze aanpassingen.

Aan de rechtzijde (in de rode circel) is af te lezen dat dit element al wat opmaakregels kent, zo is de padding nu 0. Laten we die wat omhoogschroeven. Om onze aankomende ingreep van te voren te testen, klik je eerst eenmaal met de muis gelijk achter de laatste opmaakregel, zie de afbeelding hieronder. (Firefox gebruikers: klik eerst op het #content element en vervolgens rechts in de ontwikkelaarsbalk (helemaal onderaan) op "stijl")

  

Nadat je hier hebt geklikt kun je zelf een nieuwe regel kunt toevoegen:

Laten we zeggen dat de padding aan de linkerkant op 20px moet komen. Type in dat geval "padding-left: 20px;" en druk op Enter.

Als het goed is zie je de content direct naar rechts verschuiven. Je kunt uiteraard naar eigen voorkeur een andere waarde invoeren of een ander (onderliggend) element kiezen.

Zodra je tevreden bent kun je de ingreep echt door gaan voeren in het child-theme. Open daarvoor klantenportal/css/style.css vanaf jouw pc en zoek(CTRL-F) hierbinnen naar #content. Voeg nu binnen de haakjes "{ }" onderaan de regel padding-left: 20px; toe.

P.S maak je gebruik van de @import rule? Dan zou je style.css bestand er in theorie zo uit mogen zien:

@import url(../../boilerplate/css/style.css);

#content {
padding-left: 20px;
}

Sla daarna het bestand op en upload deze naar de server waarbij je het bestand sites/all/themes/klantenportal/css/style.css overschrijft.

Keer nu terug naar jouw Drupal website en vernieuw de pagina (F5) om het resultaat te bekijken. Is het gelukt? Dan ligt de wereld nu voor je open want je kunt dit kunstje op alle elementen herhalen en met alle denkbare opmaakstijlen.

Unieke ID's en automatisch gegenereerde classes

Door de elementen op de pagina en het CSS bestand (en eventueel de template bestanden) verder te inspecteren krijg je een goed idee van hoe de pagina structuur in elkaar steekt. Precies zoals hierboven beschreven kun je vervolgens menu's, blokken, content, etc, een eigen stijl meegeven. Ook individuele blokken of velden kun je een unieke opmaak meegeven, hieronder zie je bijvoorbeeld de unieke ID van het redactie menu ("#block-menu-menu-redacteur").

Als je goed kijkt zie je dat de klasse een "odd" bevat, en het blok eronder "even" (die daaronder zou weer "even" zijn, etc). Bepaalde content krijgt automatisch gegenereerde classes mee waarmee je in dit geval content in een rij (bijvoorbeeld facturen) visueel van elkaar kunt onderscheiden.

Net zo goed krijgen sticky berichten (berichten die altijd bovenaan worden geplaatst ongeacht de datum) van Drupal de klasse "sticky" en content in teaserweergave de klasse "teaser". Ook veldtypen zoals een factuurnummer hebben een eigen ID ("div.field.field-name-field-factuurnummer"). Je begrijpt dat dit legio mogelijkheden schept om het uiterlijk naar wens aan te passen, mits je overweg kunt met CSS.

Slot

Je hebt vandaag de basisprincipes van theming onder de knie gekregen. Een belangrijk aspect daarvan is de onderlinge hiërarchie van thema bestanden, HTML elementen en CSS opmaakstijlen. Wanneer je hier meer inzicht in hebt gekregen dan kom je vrijwel niks tekort om het uiterlijk van jouw Drupal website helemaal van de grond af op te bouwen, afgezien misschien van de nodige CSS (en HTML/PHP) kennis.

Er zijn nog genoeg theming-gerelateerde onderwerpen om te belichten, waaronder de Display SuitePanels, Context Layout en Style Guide modules, maar deze tutorial is al behoorlijk uitgelopen dus dat bewaren we voor een eventuele volgende bonusdag.

Dan is het nu de beurt aan jou om naar eigen idee jouw website vorm te geven. Mocht je hierbij tegen vragen aanlopen dan zullen we je natuurlijk proberen te helpen. Ook horen we het graag als je nog goede tips of handige modules kent op het gebied van theming.

Laatst gewijzigd op: