Довольно популярная тема ColorMag и предлагаю в ней писать разные правки и дополнения, улучшения.
Комментарии: 53
Ну, добавление хлебных крошек без плагина не отличается в разных стилях.
Добавляется всё всегда в
и уже в шаблоне используется
Добавляется всё всегда в
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">
, например.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Уже разобрался, теперь бы стиль сделать
Вот как сделать так, чтобы работало так, при выборе раздела и при наведении на него мышкой, менялся цвет этого раздела
От стрелка до стрелки, у меня сейчас только ссылка подсвечивается.
PS: Кстати тема уже в поиске при поиске данных для этой темы
Код: Выделить всё
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: Кстати тема уже в поиске при поиске данных для этой темы
Сначала надо убрать отступы в
Это так, на вскидку. Если разделитель, это картинка с зелёным фоном, то менять цвет при наведении будет бессмысленно, поскольку будет выглядеть некрасиво.
ul.breadcrumbs {
, сделать padding: 0;
. Удалить padding-left:5px;
из ul.breadcrumbs li {
. Заменить padding-right: 23px;
на padding-right: 3px 23px 3px 5px;
, либо со своими значениями, в ul.breadcrumbs a {
.Это так, на вскидку. Если разделитель, это картинка с зелёным фоном, то менять цвет при наведении будет бессмысленно, поскольку будет выглядеть некрасиво.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Код: Выделить всё
@media (max-width: 700px) {
ul.breadcrumbs {
font-size: 14px;
}
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Структуру что ли нужно?
Вот так к примеру:
Стили:
Это так, на коленке.
Вот так к примеру:
Код: Выделить всё
<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;
}
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Доброе утро. Есть у меня на форуме PHPBB такая функция как анимация в шапке. Там геометрические фигуры движутся. Как добавить такое же в шапку...
-
Небольшое расширение, позволяющее добавить небольшое изображение к теме. Изображение показывается в списке тем (страница viewforum), рядом с...