Сайт Артем Гребенюк
Я решил все вопросы по темизации моего сайта расположить в одной теме.
Меня сюда отправили за советом из Вконтакте.
Сразу к делу:
Темизирую 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" после запятой пробел вставьте!
С ув. Гребенюк Артем
>>Значит вопрос номер один! Как избавиться от дополнительных дивов изза которых этот отступ?
Установите firebug для firefox, через него проще смотреть у какого именно блока отспуты.
.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;
}>>Вопрос номер два! Как сделать, чтобы вместа слова tags было слово тэги , они шли в строку и с запятой после каждого?
Они у вас скорее всего отображаются как блоки, то есть display: block. Поменяйти на display: inline, что-то вроде этого:
ul.links li{
display: inline;
}>>P.p.s При регистрации прикольная капча, неподскажете где взять?
Это key captcha, вот ссылка
http://drupal.org/project/keycaptcha
>>P.p.p.s Как после вставки кода в тему опять печатать обычным текстом, а то приходилось отключать визуал и перемещать тэги.
Я делаю заранее дополнительный параграф прежде чем вставлять код, потом что-нибудь придумаю с этим и сделаю, пока только я через него вставлял код.
>>P.p.p.p.s Админы подправьте чуток поле "Здраствуйте,Login" после запятой пробел вставьте!
Спасибо, поправил
Вопрос номер 1:
А совсем от них из бавится нельзя что бы их небыло вообще, т.е. на каком уровне они вставляются.
Вотпрос номер 2: Через блок Inline Они встают в строчку но слитно: "тег одинтег дватег три" и без запятых.
Можно ли оба вопроса решить препроцесами в template.php??
Если да (я пхп плохо знаю) то как выводить?
Хотелось чтобы выводилось:
<a href="Ссылка на просмотр материалов с этим тэгом">тег один</a>, <a href="Ссылка на просмотр материалов с этим тэгом">тег два</a>
P.s. В некоторых новостях текст наплывает на картинку, например здесь https://drupalbook.org/ru/drupal/alfavit-yazyka-php
p.p.s как на этом сайте реализованы теги, можно участок кода с тэгами и участок из template.php
С тэгами разобрался вот таким кодом
.node#tagsnode .field-item{
float: left;}
.node#tagsnode .field-item:after{
content:" ";
}>>А совсем от них избавиться нельзя что бы их не было вообще, т.е. на каком уровне они вставляются.
Вставляются в шаблоне node.tpl.php
Если для 6ки, то можно задать шаблон node-content_type.tpl.php для каждого контент типа, если для Друпал 7, то node--content_type.tpl.php (то есть уже 2 тире)
>>Вотпрос номер 2 Через блок Inline Они встают в строчку но слитно: "тег один тег два тег три" и без запятых.
Используйте лучше margin-right (поле справа)
ul.links li{
display: inline;
margin-right: 10px;
}Мои кнопочки:
ul.links li.comment_add{
padding-top: 10px;
margin-left: 10px;
display: block;
padding-left: 20px;
background:url('images/comment_add.gif') 0 10px no-repeat;
}
ul.links li {
display: inline;
padding: 0 0.5em;
margin-left: 15px;
}
.terms li a {
background: none repeat scroll 0 0 #4B8EFA;
border: 1px solid #EBEBEB;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
font-weight: bold;
padding: 4px 8px;
text-decoration: none;
}Как-то так, а вообще можете воспользовать генератором кода CSS для кнопок, например этим:
http://css3buttongenerator.com/
Почемуто у меня на сайт не заходит,
Но вот проблема дано значит Нужно чтобы главное меню генерировалось таким образом
<div id="main_menu" class="menu_list">Вот Это должно обволакивать все меню</div>
<div class="mtitle_n" onClick="window.location='Это должна быть ссылка'" style="cursor:pointer">Вот так должен выглядеть не раскрывающийся пункт меню</div>
А если есть под пункты то вот так
<div class="mtitle"><div class="mopenclose" onclick="kodimg(id)" id="Это айди раскрывающегося меню и в каждом следущем должнобыть айди на 1 больше">Это заголовок раскрывающегося пункта, он не кликается</div></div>
<div class="mcontent">
<div class="minmtitle"><a href="ССылка на подпункт 1">Подпункт - 1</a></div>
<div class="minmtitle"><a href="ССылка на подпункт 2">Подпункт - 2</a></div>
<div class="minmtitle"><a href="ССылка на подпункт 2">Подпункт - 3</a></div>
</div>вот как это реализовать?
Насколько я понял, вам нужно сделать раскрывающийся список меню. Попробуйте использовать этот готовой модуль
http://drupal.org/project/jquerymenu
Или использовать сам плагин jquery treeview. Чтобы поменять код отдельного блок, обернуть его в див, используйте шаблон block.tpl.php. Block.tpl.php задает сразу всем блокам шаблон но можно сделать так:
<?php
switch ($block->delta){
case 11: //где 11 - дельта вашего блока
break;
default: // все остальные блоки по умолчанию
?>
<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>">
<?php if ($title): ?>
<h2 class="title"><?php print $title; ?></h2>
<?php endif; ?>
<div class="content">
<?php print $content; ?>
</div>
<?php print $edit_links; ?>
</div><!-- /.block -->
<?php
} //end of switch
?>Про то, что такое дельта и как его найти можете прочитать здесь:
https://drupalbook.org/ru/content/temizatsiya-views-pravim-shablony-viewtplphp-polya-stroki-bloki-stranitsy-podklyuchaem-jquer
https://drupalbook.org/ru/drupal/drupal-hookblockinfo-i-hookblockview-vyvodim-informaciyu-v-bloke