FAQ по дизайну и верстке (HTML, CSS)

Готовые ответы по дизайну и верстке

Помогите в шаблоне увеличить body поста

взываю о помощи!:) нужно увеличить body поста , сутки голову ломаю, http://avtodetali.dn.ua/ нужно чтоб пост был правее и шире…

Нужна помощь за Wmr

Помогите, пожалуйста, найти ошибку в верстке. Вроде wrap везде стоит с фоном ffffff, даже в шаблоне уже прописала, на всякий случай, но при загрузке в Гугл Хром, почему-то грузится бордовый фон body, потом на него грузятся буквы и рисунки, а потом между бордовым фоном боди и буквами/черточками грузится белая прослойка? Почему общий контейнер сразу не загружается белым?

Помогите в визуальной настройке Меню

Есть мой сайт http://auramusic.com.ua/
В нем создано свое трехуровневое меню в сайдбаре
Для него нужно настроить визуализацию почти как в сайте http://kam-pod.gov.ua/ настроено левое меню

Чтобы при наведении разварачивался другой уровень меню и соответственно при дальнейшем наведениии разварачивался третий уровень меню

Подскажите пожалуйства есть ли какой плагин для визуализации своего сайдбарного меню, или же подскажите тему (доступную для скачивания) в которой уже реализовано даную визуализацию

Большое спасибо!

Как удалить ссылки в футоре (видео)

Друзья, для тех кому нужно удалить ссылки из подвала (footer.php) я написал 3 видео урока. Надеюсь, что они вам пригодятся. Вот 3 ссылки на видео:

1. Как удалить закодированные ссылки в футоре на шаблонах WordPress (урок №1)
2. Как удалить закодированные ссылки в подвале на WordPress (урок 2)
3. Как удалить закодированные ссылки в футоре на WordPress (Урок 3)

С Уважением, Вячеслав Дронов

Стилизация списка комментариев

Вот в файле comments.php есть такой блок:

<ol class="commentlist">
      <?php wp_list_comments();?>
</ol>

который выводит список комментариев к записи, точнее функция <?php wp_list_comments();?> выводит список комментариев. Поскольку функция заключена в блок списка с классом commentlist, то тут понятно как стилизовать этот список. А по какому тогда принципу стилизуются метаданные комментария (автор, дата, ссылка "ответить" и т.д)?

Нужно немного подправить Css

Установила к себе на блог (http://zhenskij-sajt-katerina.ru, WordPress) 2 блока тизеров LadyCash: один в сайдбаре (работает), второй внизу постов (отображается некрасиво, видно несколько серых границ). Написала в службу поддержки и получила такой ответ: "Блок подцепляет стили сайта. Нужно подправить стили на своем сайте, либо задать для нашего блока другие стили." Тем, кто разбирается, моя проблема скорее покажется пустяком, а я вот весь день искала в файле style.css, какие строки отвечают за цвет границы таблиц. Хотя не совсем уверена, что те серые границы тизерного блока вообще имеют хоть какое-то отношение к таблице. Сразу оговорюсь, что при оформлении самого тизерного блока никаких границ я не выбирала вообще, тем более серых. Кто сталкивался с такой проблемой, подскажите, что мне изменить.

Интеграция меню в движок

Имеется вот такое меню (изображение кликабельно):

HTML+CSS код для него уже сделан. Как видно, меню нестандартное для Вордпресс, просто так к wp_list_categories его не приладишь, имеются разные иконки в каждом меню+иконки сделаны спрайтом и при наведении картинка меняется+название категории написано нестандартно, так в админке не напишешь. Верстал часто под вордпресс, но с таким случаем столкнулся впервые. Есть мысли как можно такое меню реализовать?

P.S Дизайнеру бы руки оторвал… Видимо не знал, что в вордпресс такое меню не так просто сделать

Помогите за деньги

Помогите или подскажите пожалуйста, мне нужно чтобы в полной новости сайдбар был уже и наполнен совсем другим контентом, а также чтобы сама новость была более растянута в ширину.
А также хотелось бы чтобы в одной из рубрик новости выкладывались в другом порядке.
мой сайт http://blogforlife.cc/

Положение страницы в иерархии страниц

Требуется сделать в шапке строку, в которой в виде "Раздел – Подраздел – Страница" вывести полный путь конечной страницы в иерархии, а каждый вышележащий узел сделать ссылкой (Раздел со ссылкой на этот раздел, подраздел – со ссылкой на подраздел и т.д.). Все узлы являются страницами.
Как это реализовать?

Аккордеон для списка подрубрик

Если взять следующую конструкцию <?php wp_list_categories(‘child_of=4&hide_empty=0&orderby=ID&title_li=&depth=1’); ?>
Мы получим список подрубрик некой рубрики и список её подрубрик.
Что-то типа

ul > li.cat-item > ul.children > li.cat-item > a

При этом ul -> li.cat-item это будет заголовок , а ul.children > li.cat-item > a — вложенный список подрубрик.

Вопрос, кто-нибудь пробовал писать аккордеон для конструкции такого типа?

Рабочая форма поиска на русском

Помоги перевести форму поиска на русский, чтобы она нормально работа. Вот сама форма:

<form method="get" id="searchForm" action="<?php bloginfo(‘home’); ?>/">
<span><input type="text" value="Search the archives…" onfocus="if

(this.value == ‘Search the archives…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value =

‘Search the archives…’;}" name="s" id="s" /></span>
</form>

Вставлял вместо Search the archives "Поиск по архиву" и форма не правильно работа. Т.е. когда нажимаешь на форму текст должен автоматически исчезать, а при переводе на русский текст приходится самостоятельно удалять

сглаживание текста

Здравствуйте
Я по этому поводу гуглил, но в основном в 2002-2005годах
время течет и все меняеться, вот мб и со сглаживанием шрифтов тоже что то поменялось?

я бы не стал думать о переменах если не увидел бы это в действие
на данном сайте http://webreading.ru/
там во время загрузки текст сперва немного гривой, а потом красиво сглажен
"Вы любите читать книги? Тогда вы попали по адресу. Найдите книгу или автора через форму поиска:" (текст о катором речь)

“Оцентровать” страницу в Css для Ie

Уважаемые форумчане!
Помогите новичку.
посмотрите эту страницуhttp://daniel.guide-moscou.com/

в мозилле всё хорошо, блоки располагаются по центру, а вот в ИЕ- страница была сдвинута на левый край, так как margin: o auto он не понимает
Из всего,что пробовал, помогло только добавление к body в css text-align: center;

Всё вроде бы нормально, но теперь содержимое и текст в блоках тоже весь по центру :/
Мне это совсем ни к чему, надо как в мозилле.
Начал пробовать править у каждого атрибута в отдельности отступы и поля: запутался и уже заболела голова. Вернул всё обратно.

Может есть какое-то простое решение, чтобы фиксануть эту проблему? 🙁

Вот нынешний css

*/
body
{
font-family:Times New Roman;
background:#fff url("images/bk-body.gif") repeat top center;
margin:0px auto 0 auto;

}

img
{
border:0;
display:inline;
}

#top
{
height:220px;
background:url("images/bk-top.jpg") repeat-x top center;
color:Blue;
}

#top-drop-shadow
{
height:28px;
background:url("images/top-drop-shadow.gif") repeat-x top center;
}

#header
{
width:803px;
margin:0px auto 0 auto;
height:220px;
background:url("images/bk-header.jpg") ;
position:relative;
color:green;
}

#sitetitle a
{
position:absolute;
text-decoration:none;
color:#fff;
font-size:35px;
top:65px;
left:16px;
}

#sitetitle a:hover
{
position:absolute;
text-decoration: underline;
color:#fff;
font-size:35px;
top:65px;
left:16px;
}

#stamp
{
width:118px;
height:117px;
background:url("images/stamp.png") no-repeat top left;
position:absolute;
right:-21px;
top:88px;
}
*html #stamp
{
background:none;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/stamp.png', sizingmethod='scale');
}

#content
{
background:#fff url("images/bk-content.jpg") no-repeat top left;
width:803px;
margin:0 auto;

}

#mainnav
{
position:absolute;
top:183px;
left:189px;
margin:0;
padding:0;
height:36px;
}

#mainnav li
{
font-size:16px;
font-weight:bold;
line-height:100%;
float:left;
margin-left:10px;
margin-top:12px;
color:#fff;
}

#mainnav li a
{
color:#fff;
text-decoration:none;
margin-right:10px;
}

#mainnav li a:hover
{
text-decoration:underline;
color:#fff;
}

/*content
--------------------------------------*/

a, a:hover
{
color:#108070;

}

h1
{
font-size:18px;
line-height:100%;
margin:0 0 12px 0;
padding:12px 0 0 0;
color:#CC0033;
}

h2
{
margin:20px 0 0 0;
padding:0 0 10px 0;
color:#9933FF;
font-size:15px;
}

p
{
font-size:12px;
color:#333;
line-height:150%;
margin:0 0 20px 0;
padding:0;
}

p a, p a:hover
{
color:#333;
}

p.blue, p.blue a, p.blue a:hover
{
color:#108070;
}

p.bottom
{
margin-bottom:0;
}

ul
{
list-style-position:outside;
list-style-type:none;
}

#nav
{
float:left;
width:150px;
display:inline;
margin-top:28px;
margin-right:17px;
padding-left:21px;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background: #fff;
border: 1px solid #333;
padding: .2em;
}

#commentform textarea {
width: 550px;
}

#commentlist li ul {
border-left: 1px solid #ddd;
font-size: 110%;
list-style-type: none;
}

#commentlist li .avatar {
float: right;
margin-right: 25px;
border: 1px dotted #ccc;
padding: 2px;
}

#content #nav .top
{
margin-top:0;
}

#content #nav ul
{
font-size:14px;
line-height:160%;
margin:0;
padding:0;
color:#666;
}

#content #nav ul li
{
margin-bottom:8px;
}

#content #nav ul li a, #content #nav ul li a:hover
{
color:#108070;
}

#center
{
float:left;
width:614px;
display:inline;
}

#content .top
{
margin-top:22px;
}

#content .item
{
background: url("images/line.gif") no-repeat 0 5px;
position:relative;
margin-top:18px;
}

#content .item .date
{
color:#666;
font-size:10px;
position:absolute;
right:10px;
}

#content #center ul
{
padding:0 0 10px 0;
margin:0 0 0 0;
font-size:12px;
color:#333;
}

#content #center ul li
{
background:url("images/bullet.gif") no-repeat left center;
padding-left:10px;
margin-bottom:10px;
}

#content img
{
border:solid 5px #eee;
margin-bottom:20px;
}

#content #footer
{
background: url("images/line.gif") repeat-x;
position:relative;
margin-top:18px;
margin-right:10px;
}

#content #footer ul li a
{
font-size: 11px;
color: #999;
}

#content #footer ul li a:hover
{
font-size: 11px;
color: #999;
}

#content #footer ul li
{
display: inline;
background: none;
padding: 0 5px 0 0;
}

#rss-link
{
display:block;
text-indent:-9999px;
width:77px;
height:71px;
position:absolute;
top:172px;
left:46px;
outline:none;
}

Дизайн категории

Нужна Ваша помощь, отблагодарю WMZ. Вот сайт, http://takos.com.ua , нужно изменить дизайн рубрик слева. Когда будет создаваться новая, чтобы неприходилось редактировать стиль её. Сейчас установлен плагин, спомощью которого они могут выдвигаться вниз. Помогите пожалуйста сделать дизай рубрик, чтобы были хотябы в виде какой-то кнопочки простой. Заранье благодарен. Напишите пожалуйста в ЛС, вышлю ICQ.

Логотип в шапке , а не название-текст

Здравствуйте. Подскажите пожалуйста, как в уже установленном стандартном шаблоне реализовать в шапке сайта не название сайта в виде текста, а вывод графического логотипа. На примере сайта http://www.marinbiz.ru/ Естественно, Title для поисковых систем хотелось бы оставить прежним.

Спасибо.

Нестандартное меню

Добрый вечер! Можно на вордпрессе сделать вот такое меню?

Тема Traction. Как поменять логотип?

Здравствуйте. Помогите пожалуйста изменить логотип в шаблоне Traction. Взял от сюда http://www.wpbot.ru/?p=1568
Я хочу вместо стандартного логотипа, вставить свой рисунок размера 500х100. Но не получается, он съезжает…

Насколько я понимаю, надо изменить эти куски?
header.php

<div id="header" class="clear">
      <div class="logo">
        <?php if (is_home()) echo('<h1 id="title">'); else echo('<div id="title">');?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><?php if (is_home()) echo('</h1>'); else echo('</div>');?>
        <div id="description">
          <?php bloginfo('description'); ?>
        </div><!--end description-->
      </div><!--end logo-->
      <div id="cat-nav" class="clear">
        <ul class="nav">
          <?php if ($traction->hideCategories() != 'true') : ?>
            <?php wp_list_categories('orderby=ID&title_li='); ?>
          <?php endif; ?>
        </ul>
      </div><!--end navigation-->
    </div><!--end header-->

master.css

/*Header
------------------------------------------------------------ */
#header { padding-bottom: 20px; }
div.logo { float: left; }
h1#title, div#title, div.logo img {
  padding: 30px 0 0 20px;
  font-size: 3em;
  color: #f8f8f8;
  font-weight: bold;
  text-shadow: 0 2px 0 #000;
}
h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited  { color: #fff; }
h1#title a:hover, div#title a:hover { text-decoration: none; }
div.banner {
  float: right;
  margin: 20px 0 0 0;
}

Подскажите, что делать? Заранее спасибо.

Нужна помощь по WordPress 3.0

Доработать тему сайта
1. Галерея должна работать как тут: todayautonews.com
2. Раздел закладки Интересное отображает самые последние статьи. Как на todayautonews
3. Вкладки, что под галереей отображают фото из статьи.
4. Избранные статьи отображают статьи из выбранных в админке категорий. См. настройки темы.
5. Внедрить галерею для отображения фото на сайте. Типа lightbox. Установка плагина.

Какая-то белая полоса….

У меня на блоге на некоторых страницах в нижней части дизайн прерывается какой-то белой полосой, которая начинается сразу после копирайта и идет до самого низа, причем ширина у неё меньше видимой части сайта. Посмотрел в файрбуге, она никак себя не выдает. Что это может быть? С таким сталкиваюсь первый раз. Посмотрите на картинки, может кто-то сможет разобраться с этим явлением. На одной картинке страница без полосы, на второй – с полосой.

1)

2)

Заранее спасибо!

Вместо цитаты текст поста

Столкнулся с проблемой и не могу самостоятельно решить.

Там где должен выводиться Анонс, выводится текст поста, а в тексте поста выводится Анонс.
Этот перевертыш можно увидеть по этой ссылке
http://www.supermassager.ru/mn в статье апавпав

Выручайте, на Вас вся надежда, я слышал, что Вы профи!

Высылаю содержимое index.php

<?php
get_header();
?>

<div id="content">

<?php query_posts($query_string.’&cat=55′); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged()) echo ‘ firstpost’;?>">
<h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a> </h3>

<div class="entrymeta">
<?php the_time(‘F dS, Y’);
echo " | ";the_category(‘,’);?>
</div>

<div class="entrybody">
<?php the_excerpt();?>
<a class="more-link" href="<?php the_permalink(); ?>">Читать далее</a>

<?php comments_popup_link( ‘Нет комментариев ‘,’1 Комментарий ‘,’% Комментариев ‘, ‘comments-link ‘,’Комментирование закрыто ‘);
edit_post_link(__(‘<strong>Изменить</strong>’));?>

</div>
<!–
<?php trackback_rdf(); ?>
–>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p>
<?php _e(‘Извините, ничего не найдено.’); ?>
</p>
<?php endif; ?>
<p>
<?php posts_nav_link(‘ — ‘, __(‘&laquo; Предыдущие товары’), __(‘Следующие товары &raquo;’)); ?>
</p>

</div>
<?php get_sidebar(); ?>

<!– The main column ends –>
<?php get_footer(); ?>

Anonymous
Отправить
Ответ на: