Сайдбар с виджетами без ul-li

@Doudnick_Val · Регистрация: 01.07.2011

Студворк — интернет-сервис помощи студентам

Уже задолбался разбираться с этим сайдбаром на виджетах. По-умолчанию блоки строятся на маркированном списке, а это строковые элементы, что мне не нравится совершенно. Я хочу, в идеале, чтобы виджеты вставлялись в уже готовые размеченные блоки. Чтобы потом вопросов не было, сразу скажу что в сайдбаре должны быть следующие блоки: дочерние рубрики (не отображается вне страницы какой-либо рубрики), популярные записи (по просмотрам), новые записи, календарь (или как он там называется - архив?), облако тегов, другие статьи по теме (по меткам) и несколько блоков просто под код. Такое возможно реализовать? И как.

@USW · 17.09.2013, 10:54

ну...тут 2 варианта:
- display: block
- или править код темы

SergWP · 17.09.2013, 18:46

Сообщение от Doudnick_Val

задолбался разбираться с этим сайдбаром на виджетах.

Не удивительно при таком понимании

Сайдбар - фикс. область темы, относительно жестко созданная версткой и занимающее всё вертикальное или горизонтально пространство экрана. Мб справа, слева, снизу.

Виджет - как правило небольшая динамическая область с определёнными функциями. Может располагаться где угодно, но как правило вставляется в сайбар(ы). Может использоваться один или несколько раз с разными настройками.

Таким образом "сайдбар на виджетах" это как "дом на холодильниках"

Сообщение от Doudnick_Val

строковые элементы

Таких не бывает. Бывают блочные и строчные. ul относится к блочным

Ок, ликбез закончили. Теперь объясни чего же ты хочешь

Сообщение от Doudnick_Val

чтобы виджеты вставлялись в уже готовые размеченные блоки.

?

Сообщение от Doudnick_Val

сразу скажу что в сайдбаре должны быть следующие блоки

Ну и вставляй в сайдбар соответствующие виджеты. В чём проблема и причём тут маркированные списки?

@Doudnick_Val · 17.09.2013, 19:53 **[ТС]**

Таким образом "сайдбар на виджетах"

Ну хорошо, сайдбар с виджетами.

Теперь объясни чего же ты хочешь

Не буду придраться к словам, как некоторые

. Во-многих темах, в том числе и в той которую я редактирую под себя (скорее перестраиваю с сырца) sidebar.php выглядит так:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="sidebar1">
    <ul>
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar 1') ) : else : ?>
            <li>
                <div class="sidebar1_title">Страницы</div>
                <ul>
                    <div class="sidebar_content">
                    <?php wp_list_pages('title_li='); ?>
                    </div>
                </ul>
            </li>
            <li>
                <div class="sidebar1_title">Блогролл</div>
                <ul>
                    <div class="sidebar_content">
                    <?php get_links(-1, '<li>', '</li>', 'between', FALSE, 'name', FALSE, FALSE, -1, FALSE); ?>
                    </div>
                </ul>
            </li>
        <?php endif; ?>
    </ul>
</div>

,
причем классов sidebar1_title и sidebar_content в CSS нет.

А вот классы для сайдбара:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.sidebar1 h2 {
    line-height:30px;
    font-size:10pt;
    color:#fff;
    margin:0;
    padding:0px 0px 0px 5px;
    background:#637746;
    font-weight:bold;
    font-family:Tahoma,Arial,Verdana,sans-serif;
    border-bottom:1px solid #687F47;
    }
.sidebar1 ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;
    margin-bottom:7px;
    }
.sidebar1 ul ul  {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 10px 0px;
    background-repeat:no-repeat;
        }
.sidebar1 ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:1px black;
    }
.sidebar1 ul ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:0;
    }
.sidebar1 ul li {
    height:100%;
    line-height:18px;
    float: left; 
    clear: left;    
    width: 100%;
    }

И усё, приехали. Настраивать отступ margin можно только сверху (т.е. для sidebar h2), если поставить margin снизу для sidebar ul li, то почему-то под каждой ссылкой появляется отступ. Про-то что мне не очень то нравится отсутствие общего контейнера для каждого блока я вообще молчу.

Одним словом не дружу я со списками. Опять таки, если вставлять виджет в каждый блок кодом, то не понятно как его (виджет) настроить.

SergWP · 17.09.2013, 20:45

Сообщение от Doudnick_Val

причем классов sidebar1_title и sidebar_content в CSS нет.

Ну так никто не мешает их добавить

Сообщение от Doudnick_Val

Одним словом не дружу я со списками.

Скорее всего с CSS

Мне сложно что-то конкретное сказать, не видя результ. кода. (я не гуру по css). Обычно я в файрбаге всё смотрю и экспериментирую, если надо что-то поменять.

ида

Сообщение от Doudnick_Val

Не буду придраться к словам,

Ты пойми - это не придирки. Правильно заданный вопрос (правильно сформулированный) - уже 50% ответа. А бывает - некоторые спрашивают одно, им рассказываешь-рассказываешь, а потом оказывается, что им совсем не то надо было.

@Doudnick_Val · 17.09.2013, 22:54 **[ТС]**

Скорее всего с CSS

Это первый мой затык с CSS

Добавлено через 1 час 45 минут
Короче, редактирую .sidebar ul li, ставлю padding-bottom, паддинг появляется под каждым пунктом, как сделать паддинг для всего блока - непонятно.

Donald28 · 18.09.2013, 17:35

стили для селектора:

CSS
1
.sidebar1 ul {

будут применены и для селектора:

CSS
1
.sidebar1 ul ul

а селектор:

CSS
1
.sidebar1 ul li

вообще для всех li, лежащих внутри .sidebar1, применит эти стили.

Если хочешь прописывать для каждого вложенного элемента то лучше используй дочерние селекторы ">"

@Doudnick_Val · 19.09.2013, 13:38 **[ТС]**

Н у и как сделать? .sidebar1 ul > li - ноль реакции, будто и не писал такого вовсе. Вообще не понятно как это вордпресс считает уровни вложенности ul и li.

Donald28 · 19.09.2013, 13:47

CSS
1
.sidebar1 > ul > li

Сообщение от Doudnick_Val

Вообще не понятно как это вордпресс считает уровни вложенности ul и li.

вордпресс тут не причем. Это CSS

@Doudnick_Val · 19.09.2013, 14:00 **[ТС]**

Собственно то, чего я хочу добиться, оформлено в виде html.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
.sidebar {
    width:200px;
    height:100%;
    }
.block {
    width:100%;
    border:1px solid black;
    margin-bottom:7px;
    }
.title {
    border-bottom:1px solid black;
    height:20px;
    background-color:#eee6a3;
    padding:3px 5px;
    }
.content {
    background-color:#b9ff4e;
    padding:5px;
    }
</style>
<div class="sidebar">
 
<div class="block">
<div class="title">Заголовок</div>
<div class="content">Содержимое</div>
</div>
 
<div class="block">
<div class="title">Заголовок</div>
<div class="content">Содержимое</div>
</div>
 
<div class="block">
<div class="title">Заголовок</div>
<div class="content">Содержимое</div>
</div>
 
</div>

Как подобное повторить так, чтобы виджеты нормально работали - не понятно совершенно. Объясните пожалуйста.

Donald28 · 19.09.2013, 14:11

ну а ты покажи код сайдбара, который получается в ВП (не ПХП, а уже сформированный HTML)

@Doudnick_Val · 19.09.2013, 22:21 **[ТС]**

Спасибо вам большое, все понял, все получилось.

Добавлено через 2 часа 43 минуты
Блин, теперь wrapper по высоте подстраивается не по sidebar, который у меня float:left, а по content, как настроить?

Donald28 · 20.09.2013, 07:07

CSS
1
#wrapper{ overflow: hidden;}

@Doudnick_Val · 20.09.2013, 08:49 **[ТС]**

Спасибо, помогло.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Doudnick_Val 0 / 0 / 1 Регистрация: 01.07.2011 Сообщений: 13

	Сайдбар с виджетами без ul-li 16.09.2013, 21:32. Показов 2429. Ответов 13 Метки нет (Все метки) Уже задолбался разбираться с этим сайдбаром на виджетах. По-умолчанию блоки строятся на маркированном списке, а это строковые элементы, что мне не нравится совершенно. Я хочу, в идеале, чтобы виджеты вставлялись в уже готовые размеченные блоки. Чтобы потом вопросов не было, сразу скажу что в сайдбаре должны быть следующие блоки: дочерние рубрики (не отображается вне страницы какой-либо рубрики), популярные записи (по просмотрам), новые записи, календарь (или как он там называется - архив?), облако тегов, другие статьи по теме (по меткам) и несколько блоков просто под код. Такое возможно реализовать? И как. 0

@USW 30 / 29 / 5 Регистрация: 07.11.2012 Сообщений: 274
	17.09.2013, 10:54
	ну...тут 2 варианта: - display: block - или править код темы 0

@Doudnick_Val 0 / 0 / 1 Регистрация: 01.07.2011 Сообщений: 13
	19.09.2013, 13:38 [ТС]
	Н у и как сделать? .sidebar1 ul > li - ноль реакции, будто и не писал такого вовсе. Вообще не понятно как это вордпресс считает уровни вложенности ul и li. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	19.09.2013, 14:11
	ну а ты покажи код сайдбара, который получается в ВП (не ПХП, а уже сформированный HTML) 0

@Doudnick_Val 0 / 0 / 1 Регистрация: 01.07.2011 Сообщений: 13
	19.09.2013, 22:21 [ТС]
	Спасибо вам большое, все понял, все получилось. Добавлено через 2 часа 43 минуты Блин, теперь wrapper по высоте подстраивается не по sidebar, который у меня float:left, а по content, как настроить? 0

@Doudnick_Val 0 / 0 / 1 Регистрация: 01.07.2011 Сообщений: 13
	20.09.2013, 08:49 [ТС]
	Спасибо, помогло. 0