Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

Сайт Артем Гребенюк

22/02/2025, by Гость (не проверено)
Форумы

Я решил все вопросы по темизации моего сайта расположить в одной теме.

Меня сюда отправили за советом из Вконтакте.

Сразу к делу:

Темизирую Drupal, Page.tpl.php Создал без проблем.

Появились затыки в  Node.tpl.php

Значит дано:

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">просто текст <a href="#">ссылка</a></div>
<div class="node" id="posttitle">просто текст <a href="#">ссылка</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">Всемирную паутину образуют миллионы веб-серверов сети Интернет, расположенных по всему миру. Веб-сервер является программой, запускаемой на подключённом к сети компьютере и использующей протокол HTTP для передачи данных. В простейшем виде такая программа получает по сети HTTP-запрос на определённый ресурс, находит соответствующий файл на локальном жёстком диске и отправляет его по сети запросившему компьютеру. Более сложные веб-серверы способны динамически распределять ресурсы в ответ на HTTP-запрос. Для идентификации ресурсов (зачастую файлов или их частей) во Всемирной паутине используются единообразные идентификаторы ресурсов URI (англ. Uniform Resource Identifier). Для определения местонахождения ресурсов в сети используются единообразные локаторы ресурсов URL (англ. Uniform Resource Locator). Такие URL-локаторы сочетают в себе технологию идентификации URI и систему доменных имён DNS (англ. Domain Name System) — доменное имя (или непосредственно IP-адрес в числовой записи) входит в состав URL для обозначения компьютера (точнее — одного из его сетевых интерфейсов), который исполняет код нужного веб-сервера.
Для обзора информации, полученной от веб-сервера, на клиентском компьютере применяется специальная программа — веб-браузер. Основная функция веб-браузера — отображение гипертекста. Всемирная паутина неразрывно связана с понятиями гипертекста и гиперссы́лки. Большая часть информации в Вебе представляет собой именно гипертекст. Для облегчения создания, хранения и отображения гипертекста во Всемирной паутине традиционно используется язык HTML (англ. HyperText Markup Language), язык разметки гипертекста. Работа по разметке гипертекста называется вёрсткой, ма́стера по разметке называют веб-мастером или вебмастером (без дефиса). После HTML-разметки получившийся гипертекст помещается в файл, такой HTML-файл является основным ресурсом Всемирной паутины. После того, как HTML-файл становится доступен веб-серверу, его начинают называть «веб-страницей». Набор веб-страниц образует веб-сайт. В гипертекст веб-страниц добавляются гиперссылки. Гиперссылки помогают пользователям Всемирной паутины легко перемещаться между ресурсами (файлами) вне зависимости от того, находятся ресурсы на локальном компьютере или на удалённом сервере. Гиперссылки веба основаны на технологии URL.</div>
<div><div class="node" id="tagsnode">Тэги: <a href="#">Раз тэг</a>, <a href="#">Два тэг</a>, <a href="#">Три тэг</a></div><a href="#" id="more" class="node">Подробнее</a></div>
<div class="node" id="post"></div>
</div>

Вот как это выглядит 

Далее интегрирую в друпал: Css тот же а вот сам Node.tpl.php (до того места где отображать комментарии и все такое еще не дошел)

<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">Подробнее</a></div>
 <?php print render($content['comments']);  ?>
<div class="node" id="post"></div></div>

А вот как это отображается на сайте 

Заначит вопрос номер один! Как избавиться от дополнительных дивов изза которых этот отступ?

Вопрос номер два! Как сделать, чтобы вместа слова tags было слово тэги , они шли в строку и с запятой после каждого?

P.s.    В ответах прошу пояснять какие действия выполняются в изменненом коде, чтобы я далее смог сам в разобраться в подобных проблемах!

P.p.s При регистрации прикольная капча, неподскажете где взять?

P.p.p.s Как после вставки кода в тему опять печатать обычным текстом, а то приходилось отключать визуал и перемещать тэги.

P.p.p.p.s Админы подправьте чуток поле "Здраствуйте,Login" после запятой пробел вставьте!

С ув. Гребенюк Артем