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

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

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

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

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">, например.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

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: Кстати тема уже в поиске при поиске данных для этой темы
  • 0
Изображение

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

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

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

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

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 {.
Это так, на вскидку. Если разделитель, это картинка с зелёным фоном, то менять цвет при наведении будет бессмысленно, поскольку будет выглядеть некрасиво.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

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

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

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

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

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

@media (max-width: 700px) {
	ul.breadcrumbs {
		font-size: 14px;
	}
}
700px - ширина экрана от 700 и уже.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

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

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

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

Видел такой плагин, что-то там "... night". Не ставил.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

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

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

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

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

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

Изображение

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

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;
	}
}
Это так, на коленке.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

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

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

Изображение
  • 0
Изображение

Похожие темы