logo

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

Extra Paragraph Types (EPT) - analoge op paragrafen gebaseerde set modules.

Demo EPT-modules Download EPT-modules

Scroll

Website Artem Grebenyuk

22/02/2025, by Anoniem (niet gecontroleerd)
Forums

Ik heb besloten om al mijn vragen over de thematisering van mijn website in één thema te plaatsen.

Ik ben hierheen gestuurd voor advies vanuit Vkontakte.

Laten we meteen ter zake komen:

Ik thematiseer Drupal, Page.tpl.php heb ik zonder problemen aangemaakt.

Er zijn echter hobbels in  Node.tpl.php

Dus dit is wat ik heb:

Css 

.node#wrapper{width:720px; margin:0 auto;}
.node#title{height:20px; width:720px; font-size:20px; font-family:Arial, Helvetica, sans-serif; color:#37B700;}
.node#title::first-letter{text-transform:uppercase} 
.node#title a{color:#37B700; text-decoration:none;}
.node#title a:hover{color:#37B700; text-decoration:underline;}
.node#posttitle{height:10px; width:720px; font-size:9px; font-family:Arial, Helvetica, sans-serif; color:#AAA;}
.node#posttitle::first-letter{text-transform:uppercase}
.node#posttitle a{text-decoration:none}
.node#posttitle a:hover{text-decoration:underline}
.node#img{float:left; margin-right:5px;margin-bottom:5px; border:ridge 2px #CCC}
.node#comments{display:block; width:50px; height:60px; float:right; margin-left:5px; margin-bottom:5px; background:url(images/comment.png); font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:24px; text-decoration:none; text-align:center;}
.node#comments p{ margin-top:13px;}
.node#more{background-image:url(images/more.png);display: block;float: right;height: 28px;line-height: 24px;margin-left: 5px;font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px;text-decoration:none; text-align:center;width: 85px;}
.node#content{width:720px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:justify;}
.node#post{width:738px; height:8px; margin-left:-8px; background:url(../images/postnode.png); clear:both; margin-top:35px; background-repeat:repeat-x; margin-bottom:6px;}
.node#tagsnode{float:left; margin-top: 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.node#tagsnode a{color:#37B700; text-decoration:none;}
.node#tagsnode a:hover{color:#37B700; text-decoration:underline;} 

Html

<div class="node" id="wrapper">
<div class="node" id="title">gewone tekst <a href="#">link</a></div>
<div class="node" id="posttitle">gewone tekst <a href="#">link</a></div>
<hr width="100%" size="3">
<div class="node" id="img"><img src="logo.png" /></div>
<a href="#" class="node" id="comments"><p>56</p></a>
<div class="node" id="content">Het wereldwijde web bestaat uit miljoenen webservers die over de hele wereld zijn verspreid. Een webserver is een programma dat draait op een computer die met het netwerk is verbonden en het HTTP-protocol gebruikt voor gegevensoverdracht. In de eenvoudigste vorm ontvangt zo'n programma een HTTP-verzoek voor een bepaalde bron, vindt het bijbehorende bestand op de lokale harde schijf en verzendt het via het netwerk naar de computer die het heeft aangevraagd. Complexere webservers kunnen middelen dynamisch toewijzen als reactie op een HTTP-verzoek. Voor de identificatie van bronnen (vaak bestanden of delen daarvan) op het wereldwijde web worden uniforme resource identifiers (URI) gebruikt. Voor het bepalen van de locatie van bronnen op het netwerk worden uniforme resource locators (URL) gebruikt. Dergelijke URL-locators combineren de technologie van URI-identificatie met het domain name system (DNS) — de domeinnaam (of direct IP-adres in numerieke notatie) maakt deel uit van de URL om de computer aan te duiden (nauwkeuriger gezegd, een van zijn netwerkinterfaces) die de code van de benodigde webserver uitvoert.
Voor het bekijken van informatie die van de webserver is ontvangen, wordt op de clientcomputer een speciaal programma gebruikt — een webbrowser. De belangrijkste functie van een webbrowser is het weergeven van hypertekst. Het wereldwijde web is onlosmakelijk verbonden met de concepten hypertekst en hyperlinks. Het grootste deel van de informatie op het web is inderdaad hypertekst. Om het creëren, opslaan en weergeven van hypertekst op het wereldwijde web te vergemakkelijken, wordt traditioneel de HTML-taal (HyperText Markup Language) gebruikt, de opmaaktaal voor hypertekst. Het werk aan de opmaak van hypertekst wordt lay-out genoemd, en de specialisten in opmaak worden webmasters of webmeesters (zonder koppelteken) genoemd. Na de HTML-opmaak wordt de resulterende hypertekst in een bestand geplaatst, dat HTML-bestand is de belangrijkste bron van het wereldwijde web. Zodra het HTML-bestand beschikbaar komt voor de webserver, wordt het een "webpagina" genoemd. Een set webpagina's vormt een website. In de hypertekst van webpagina's worden hyperlinks toegevoegd. Hyperlinks helpen gebruikers van het wereldwijde web gemakkelijk tussen bronnen (bestanden) te navigeren, ongeacht of de bronnen zich op de lokale computer of op een externe server bevinden. Webhyperlinks zijn gebaseerd op URL-technologie.</div>
<div><div class="node" id="tagsnode">Tags: <a href="#">Eén tag</a>, <a href="#">Twee tags</a>, <a href="#">Drie tags</a></div><a href="#" id="more" class="node">Meer informatie</a></div>
<div class="node" id="post"></div>
</div>

Zo ziet het eruit 

Vervolgens integreer ik in Drupal: Css is hetzelfde, maar hier is de Node.tpl.php zelf (ik ben nog niet aangekomen bij het gedeelte waar de opmerkingen en dergelijke worden weergegeven)

<div class="node" id="wrapper">
<div class="node" id="title"><?php if ($page == 0): ?><a href="<?php print $node_url; ?>"><?php endif; ?><?php print $title ?><?php if ($page == 0): ?></a><?php endif; ?></div>
<div class="node" id="posttitle"><?php print $submitted ?></div>
<hr width="100%" size="3">
<?php if ($content[field_image]): ?>
<div class="node" id="img"><?php print render($content['field_image'])?></div>
<?php endif; ?>
<a href="<?php print $node_url; ?>" class="node" id="comments"><p><?php print $comment_count ?></p></a>
<div class="node" id="content"><?php print render($content['body'])?></div>
<div><div class="node" id="tagsnode"><?php print render($content['field_tags']) ?></div><a href="<?php print $node_url; ?>" id="more" class="node">Meer informatie</a></div>
 <?php print render($content['comments']);  ?>
<div class="node" id="post"></div></div>

En zo wordt het weergegeven op de site 

Dus vraag nummer één! Hoe kom ik van de extra divs af die deze marge veroorzaken?

Vraag nummer twee! Hoe zorg ik ervoor dat in plaats van het woord tags het woord tégs komt, dat ze in een rij staan en met een komma erachter?

P.s.    In de antwoorden verzoek ik om uit te leggen welke acties worden uitgevoerd in de gewijzigde code, zodat ik later zelf kan begrijpen hoe ik soortgelijke problemen kan oplossen!

P.p.s Bij registratie is er een leuke captcha, kunt u me vertellen waar ik die kan vinden?

P.p.p.s Hoe kan ik na het invoegen van de code in het thema weer normaal tekst typen, want ik moest de visuele editor uitschakelen en de tags verplaatsen.

P.p.p.p.s Beheerders, pas alsjeblieft een beetje het veld "Hallo, Login" aan, voeg een spatie toe na de komma!

Met vriendelijke groet, Grebenyuk Artem