Довольно популярная тема ColorMag и предлагаю в ней писать разные правки и дополнения, улучшения.
Комментарии: 53
Расширение использует встроенные скрипты форума, не добавляя ничего нового. Здесь же надо переписывать скрипты навигации, возможно просто заимствуя их из phpbb с последующей подгонкой. Надо смотреть и пробовать.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Приветствую, не могу понять как сделать такое же к произвольному тексту и картинке?
https://southklad.ru/
https://southklad.ru/
Хм... Ну ладно...
Если не изменяя структуру, сделать блоки максимально похожими на все остальные блоки в ленте, то, в принципе, это не так уж и сложно:
Если не изменяя структуру, сделать блоки максимально похожими на все остальные блоки в ленте, то, в принципе, это не так уж и сложно:
Код: Выделить всё
#custom_html-25 {
margin-bottom: 20px;
}
#custom_html-25 .custom-html-widget {
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#custom_html-25 .catalogmonetprices {
width: 48.7013%;
position: relative;
max-height: 195px;
border: none;
border-radius: 0;
padding: 0;
}
#custom_html-25 .catalogmonetprices img {
display: block;
float: none;
width: 100%;
margin: 0;
}
#custom_html-25 .catalogmonetprices h3,
#custom_html-25 .catalogmonetprices h3 a,
#custom_html-25 .catalogmonetprices h3:before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#custom_html-25 .catalogmonetprices h3 {
top: 0;
padding: 0;
margin: 0;
font-size: 18px;
}
#custom_html-25 .catalogmonetprices h3 a {
top: 0;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding: 0 4% 15px;
}
#custom_html-25 .catalogmonetprices h3:before {
content: '';
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8));
background: -moz-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8));
display: block;
height: 55px;
}
@media screen and (max-width: 420px){
#custom_html-25 .catalogmonetprices{width: auto;}
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
У этого виджета так и сделано, див с классом:
Плюс родительский див. Но если хочется, чтобы было отдельным, то можно поменять класс на любой свой, например:
Стили те же, только
Код: Выделить всё
<div class="catalogmonetprices">
<img src="image.jpg">
<h3><a href="#">заголовок</a></h3>
</div>
Код: Выделить всё
<div class="block__pic">
<div class="block__pic-item">
<img src="image.jpg">
<h3><a href="#">заголовок</a></h3>
</div>
<div class="block__pic-item">
<img src="image.jpg">
<h3><a href="#">заголовок</a></h3>
</div>
<!-- Плюс такие же блоки -->
</div>
#custom_html-25
поменять на .block__pic
, а .catalogmonetprices
на .block__pic-item
. Если блоку нужен заголовок, то перед первым <div class="block__pic-item">
добавить:
Код: Выделить всё
<h3 class="widget-title"><span>Заголовок блока</span></h3>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Доброе утро. Есть у меня на форуме PHPBB такая функция как анимация в шапке. Там геометрические фигуры движутся. Как добавить такое же в шапку...
-
Небольшое расширение, позволяющее добавить небольшое изображение к теме. Изображение показывается в списке тем (страница viewforum), рядом с...