Правки темы ColorMag

Одна из самых популярных систем управления контентом — Wordpress.
igorbond

Правки темы ColorMag

igorbond 14 окт 2018, 21:23 Сообщение

Довольно популярная тема ColorMag и предлагаю в ней писать разные правки и дополнения, улучшения. :drink:

igorbond

Правки темы ColorMag

igorbond 15 окт 2018, 11:38 Сообщение

Ну и сразу у меня несколько вопросов.

1. Как добавить хлебные крошки в эту тему без плагина?

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 15 окт 2018, 16:35 Сообщение

Ну, добавление хлебных крошек без плагина не отличается в разных стилях.
Добавляется всё всегда в function.php:

Код: Выделить всё

function the_breadcrumb() { if (!is_front_page()) { echo '<a href="'; echo get_option('home'); echo '">'; echo esc_html__( 'Home' ); echo "</a> » "; if (is_category() || is_single()) { the_category(' '); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo esc_html__( 'Home' ); } }

и уже в шаблоне используется <?php the_breadcrumb(); ?>, тут уж где удобно, можно в конце хедера, можно в single.php, после <div id="content" class="clearfix">, например.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 15 окт 2018, 16:48 Сообщение

Уже разобрался, теперь бы стиль сделать

Код: Выделить всё

ul.breadcrumbs { /* font: 11px 'Lucida Grande',Verdana,Arial,Sans-Serif; */ /* background-image:url(images/bc_bg.gif); */ /* background-repeat:repeat-x; */ /* height:30px; */ /* line-height:30px; */ /* color:#888; */ color: #ffffff; /* border:solid 1px #cacaca; */ /* width:100%; */ overflow:hidden; /* margin:0px; */ /* padding:0px; */ padding: 3px 10px; font-size: 12px; /* background-color: #289dcc; */ background-color: #40a521; border-radius: 3px; display: inline-block; } ul.breadcrumbs li { list-style-type:none; padding-left:5px; display:inline-block; float:left; } ul.breadcrumbs a { display:inline-block; background-image:url(images/bc_separator.png); background-repeat:no-repeat; background-position:right; padding-right: 23px; text-decoration: none; color: #ffffff; outline:none; } ul.breadcrumbs a:hover { color:#35acc5; } ul.breadcrumbs .hm{ float:left; margin:7px 5px 0 0; position: relative; }


Вот как сделать так, чтобы работало так, при выборе раздела и при наведении на него мышкой, менялся цвет этого раздела

Изображение

От стрелка до стрелки, у меня сейчас только ссылка подсвечивается.

PS: Кстати тема уже в поиске при поиске данных для этой темы

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 15 окт 2018, 19:52 Сообщение

К ul.breadcrumbs a:hover { добавить background-color: #40a521; со своим цветом.
Может быть цвет будет не всё пространство между стрелками заполнять, судя по стилям.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 16 окт 2018, 15:48 Сообщение

CabinetAdmin писал(а):Источник цитаты Может быть цвет будет не всё пространство между стрелками заполнять, судя по стилям.


Это я и сам сделал ))), но в том то и дело что он заполняет не очень хорошо, стрелки бегают. А мне хотелось бы чтобы все было красиво.

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 16 окт 2018, 20:44 Сообщение

Сначала надо убрать отступы в ul.breadcrumbs {, сделать padding: 0;. Удалить padding-left:5px; из ul.breadcrumbs li {. Заменить padding-right: 23px; на padding-right: 3px 23px 3px 5px;, либо со своими значениями, в ul.breadcrumbs a {.
Это так, на вскидку. Если разделитель, это картинка с зелёным фоном, то менять цвет при наведении будет бессмысленно, поскольку будет выглядеть некрасиво.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 16 окт 2018, 21:23 Сообщение

CabinetAdmin, Разделитель это картинка с прозрачным фоном. Но такой способ делает стиль вообще жутким

И сразу же вопрос туда же, как сделать чтобы в моб. уменьшенной версии именно для этих правок размер текста увеличивался? Не весь, а только тут?

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 17 окт 2018, 15:30 Сообщение

Код: Выделить всё

@media (max-width: 700px) { ul.breadcrumbs { font-size: 14px; } }

700px - ширина экрана от 700 и уже.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 06 ноя 2018, 23:19 Сообщение

Подскажите как для этой темы организовать стиль ночной темы?

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 07 ноя 2018, 16:22 Сообщение

Видел такой плагин, что-то там "... night". Не ставил.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 07 ноя 2018, 21:52 Сообщение

CabinetAdmin писал(а):Источник цитаты Видел такой плагин, что-то там "... night". Не ставил.



Плагин я видел и поставил, но там подстраивать стили нужно, чтобы ночной режим был читабельный и удобный, мне вот и нужно как то css подобрать оптимально, а у меня с этим проблемы.

igorbond

Правки темы ColorMag

igorbond 14 ноя 2018, 21:16 Сообщение

Пытаюсь сделать вот так

Изображение

с помощью таблицы, но как видно тут, у меня текст уезжает вправо, вот как сделать чтобы он был рядом с картинкой, а при уменьшении экрана под ней, но без участия таблиц?

Аватара пользователя
CabinetAdmin

Правки темы ColorMag

CabinetAdmin 15 ноя 2018, 16:34 Сообщение

Структуру что ли нужно?
Вот так к примеру:

Код: Выделить всё

<div class="ca_table"> <div class="ca_table_line"> <div class="ca_table_image"><img src="image_src.jpg" alt="img" /></div> <div class="ca_table_title">Text</div> </div> -- // -- </div>

Стили:

Код: Выделить всё

.ca_table_line { padding: 5px 0; } .ca_table_line:after { clear: both; content: ''; display: block; } .ca_table_image { float: left; margin-right: 10px; vertical-align: middle; } .ca_table_image img { max-width: 100%; } .ca_table_title { /* styles text */ } @media (max-width: 400px) { .ca_table_image { float: none; margin-right: 0; margin-bottom: 10px; } }


Это так, на коленке.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Правки темы ColorMag

igorbond 15 ноя 2018, 21:16 Сообщение

Почему то не работает vertical-align: middle; , так вроде то что нужно

Изображение



Похожие темы

Вернуться в «WordPress»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость