Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как отредактировать стиль встроенного элемента "Закладки"?

Как отредактировать стиль встроенного элемента "Закладки"?


     29.12.2020    Все вопросы » Стили (CSS)    937

вопрос
Здравствуйте. Хочу вставить сторонний плагин "Закладки", который на аяксе для гостей. Не могу разобраться со стилем (css), - чтобы иконка зеленого цвета "Добавить в закладки" располагалась в одном поле, на ровне с соседними элементами, а не вылазило в отдельное поле.

Как отредактировать стиль  встроенного элемента "Закладки"?

.favmod {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
	margin: 0;
	width: 16px;
	height: 16px;
	padding: 4px;
	opacity: .5;
}
.favmod.active,
.favmod:hover {
	opacity: 1;
}
.favmod.active:hover{
	opacity: .7;
}
	.favmod-add,
	.favmod-unset {
		display: block;
		width: 100%;
		height: 100%;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNJREFUeNrslM8rRFEUx9973iC/KVGSBX8E2TBvN2p2yo6d/AMWJEpKibVs2NmysJxG2bG2tqBEGIkJwzyfozO585o3PYZSnPr0bvfce96559z7tePxeNKyrEXogkM4gWrrw3y4hCfogQHYhLVUKpV3GaxCH9zCAhyBaxXbFPTCPCzBCrTCrKsDsRzcE9XX8bt5nufwGYVB2ICMumbwZcT5rBN2iT+LyZoHyOpxYoZv2gmc9bVEAJlvhHoNljN8tvnHKlmkKduB+XXYgStoMXwvZoA22IazwFEkgwt4BOlYv5meuVDO2KntDJptBMsWsi0EkKKcQgKu1VnOpE5NsAvtrhbmBo61hVHsnFpJPToco1A1ETfL3Yhp9r5jVWjfEkAeTj7kEpUrpOyJSYA7aAi5xmEmNauTi2TznMf0OR9oN6K0sRmGYdntnqvN6uVIflIPJreG9n5AD4hapAcT+yOheoDvN+qBpvxn9UBbGEkPqNXX9YDN/3pg6sF4OlGRHrwJMADPaJXvw5WmBQAAAABJRU5ErkJggg==) no-repeat 0 0;
	}
	.favmod-unset {
		background-position: 0 -16px;
	}

	.favmod .favmod-unset,
	.favmod.active .favmod-add {
		display: none;
	}
	.favmod.active .favmod-unset {
		display: block;
	}

................

html
<a href="#" class="favmod[favmod={news-id}] active[/favmod]" data-id="{news-id}">
	<span class="favmod-add" title="Добавить в закладки"></span>
	<span class="favmod-unset" title="Удалить из закладок"></span>
</a>

Ответа пока нет


36 комментариев

doom45
Юзер

doom45 - 29 декабря 2020 22:11 -

Мои знания CSS заканчивается на этом: ставьте html код кнопки в одну линию как в других кнопках внутри <li>. Ну и юзайте теги типо [desktop], [smartphone]

TeraMoune
Эксперт

TeraMoune - 30 декабря 2020 08:32 -

Прочитайте про свойства display в css. В чём отличие между block и inline-block.

Сергей55
Юзер

Сергей55 - 30 декабря 2020 13:30 -

TeraMoune, спасибо хороший человек за подсказку. Благодарю за помощь.
Подскажите пожалуйста, как правильно к иконке рядом прописать текстовую ссылку - "Добавить в закладки" / "Удалить из закладок" ?
<a href="#" class="favmod[favmod={news-id}] active[/favmod]" data-id="{news-id}">
	<span class="favmod-add" title="Добавить в закладки"></span>
	<span class="favmod-unset" title="Удалить из закладок"></span>
</a>


Пытаюсь прописывать перед закрытием </span> - и ссылка наезжает на иконку

TeraMoune
Эксперт

TeraMoune - 30 декабря 2020 18:01 -

иконки уже в ссылке находятся, следовательно внутри span иконок нужно дописать текст, и прописать правильные стили для правильного отображения

Сергей55
Юзер

Сергей55 - 1 января 2021 21:26 -

Подскажите пожалуста, что примерно в css нужно подправить, дописать?

deadluk
Юзер

deadluk - 2 января 2021 19:08 -

.favmod {
display: flex; align-items:center;
}
самое простое

либо обернуть эти спэны другим родителем и присвоить код выше

Сергей55
Юзер

Сергей55 - 2 января 2021 21:10 -

Цитата: deadluk
.favmod {
display: flex; align-items:center;
}

Вставил в css - не помогло. Может я что-то не понял.
Подскажите пожалуйста, как правильно?

deadluk
Юзер

deadluk - 3 января 2021 13:55 -

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

<a href="#" class="favmod[favmod={news-id}] active[/favmod]" data-id="{news-id}">
	<span class="favmod-add" title="Добавить в закладки"></span>
	<span class="favmod-unset" title="Удалить из закладок"></span>
</a>
этот код обёрнутый в другой код, div(например) блок - вот к нему нужно добавить стили. к родителю. flex действует только на дочерний элемент

<div class="РОДИТЕЛЬ">
   <div class="ребёнок"></div>
   <div class="ребёнок"></div>
</div>

.РОДИТЕЛЬ {
display: flex; align-items:center;
}

deadluk
Юзер

deadluk - 3 января 2021 14:05 -

название классов на латинице! ну и го уроки по css and html + js

Сергей55
Юзер

Сергей55 - 3 января 2021 18:14 -

конечно не помогло, вы не скинули нужный кусок кода,
Я вставляю в дефолтный шаблон - в
<div class="meta ignore-select"><ul class="left">код закладок </ul>
	</div>

Подскажите пожалуйста, что и как правильно прописать код в данном случае?

deadluk
Юзер

deadluk - 4 января 2021 23:33 -

скинь весь код html, где хочешь эти закладки применить

Сергей55
Юзер

Сергей55 - 5 января 2021 13:36 -

В дефолтном shortstory.tpl - в самом конце. Полный код:
<article class="box story[fixed] fixed_story[/fixed] shortstory">
	<div class="box_in">
		[not-group=5]
		<ul class="story_icons">
			<li class="fav_btn">
				[add-favorites]<span title="Добавить в закладки"><svg class="icon icon-fav"><use xlink:href="#icon-fav"></use></svg></span>[/add-favorites]
				[del-favorites]<span title="Убрать из закладок"><svg class="icon icon-star"><use xlink:href="#icon-star"></use></svg></span>[/del-favorites]
			</li>
			<li class="edit_btn">
				[edit]<i title="Редактировать">Редактировать</i>[/edit]
			</li>
		</ul>
		[/not-group]
		<h2 class="title"><a href="{full-link}">{title}</a></h2>
		<div class="text">
			{short-story}
			[edit-date]<p class="editdate grey">Новость отредактировал: <b>{editor}</b> - {edit-date}<br>
			[edit-reason]Причина: {edit-reason}[/edit-reason]</p>[/edit-date]
		</div>
		<div class="story_tools">
			<div class="category">
				<svg class="icon icon-cat"><use xlink:href="#icon-cat"></use></svg>
				{link-category}
			</div>
			<a href="{full-link}" title="Читать подробнее: {title}" class="btn"><b>Подробнее</b></a>
			[rating]
				<div class="rate">
					[rating-type-1]<div class="rate_stars">{rating}</div>[/rating-type-1]
					[rating-type-2]
					<div class="rate_like">
					[rating-plus]
						<svg class="icon icon-love"><use xlink:href="#icon-love"></use></svg>
						{rating}
					[/rating-plus]
					</div>
					[/rating-type-2]
					[rating-type-3]
					<div class="rate_like-dislike">
						[rating-plus]<span title="Нравится"><svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg></span>[/rating-plus]
						{rating}
						[rating-minus]<span title="Не нравится"><svg class="icon icon-dislike"><use xlink:href="#icon-dislike"></use></svg></span>[/rating-minus]
					</div>
					[/rating-type-3]
				</div>
			[/rating]
		</div>
		[fixed]<span class="fixed_label" title="Важная новость"></span>[/fixed]
	</div>
	<div class="meta">
		<ul class="right">
			<li class="grey" title="Просмотров: {views}"><svg class="icon icon-views"><use xlink:href="#icon-views"></use></svg> {views}</li>
			<li title="Комментариев: {comments-num}">[com-link]<svg class="icon icon-coms"><use xlink:href="#icon-coms"></use></svg> {comments-num}[/com-link]</li>
		</ul>
		<ul class="left">
           
 <a href="#" class="favmod[favmod={news-id}] active[/favmod]" data-id="{news-id}">
	<span class="favmod-add" title="Добавить в закладки">Добавить в избранное</span>
	<span class="favmod-unset" title="Удалить из закладок">Удалить из избранного</span>
</a>
            
        </ul>
	</div>
</article>

deadluk
Юзер

deadluk - 5 января 2021 14:16 -

.meta { display: flex; align-items: center; }
не поможет, то скинь ссылку на сайт в ЛС или тут.

Сергей55
Юзер

Сергей55 - 5 января 2021 14:58 -

Не помогло - да еще нарушило верстку (правый левый див элементов шаблона в кучу смешало)
https://na-obzore.ru/istorija-tajny-20-veka/

deadluk
Юзер

deadluk - 5 января 2021 15:11 -

у .story > .meta из этого

border-: ;
    radius: 0 0 2px 2px;


сделай это

border-radius: 0 0 2px 2px;


у .favmod сделай такой код
.favmod {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    margin: 0;
    margin-left: 12px;
    height: 16px;
    padding: 4px;
    opacity: .5;
}


у .favmod-add, .favmod-unset такой

.favmod-add, .favmod-unset {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNJREFUeNrslM8rRFEUx9973iC/KVGSBX8E2TBvN2p2yo6d/AMWJEpKibVs2NmysJxG2bG2tqBEGIkJwzyfozO585o3PYZSnPr0bvfce96559z7tePxeNKyrEXogkM4gWrrw3y4hCfogQHYhLVUKpV3GaxCH9zCAhyBaxXbFPTCPCzBCrTCrKsDsRzcE9XX8bt5nufwGYVB2ICMumbwZcT5rBN2iT+LyZoHyOpxYoZv2gmc9bVEAJlvhHoNljN8tvnHKlmkKduB+XXYgStoMXwvZoA22IazwFEkgwt4BOlYv5meuVDO2KntDJptBMsWsi0EkKKcQgKu1VnOpE5NsAvtrhbmBo61hVHsnFpJPToco1A1ETfL3Yhp9r5jVWjfEkAeTj7kEpUrpOyJSYA7aAi5xmEmNauTi2TznMf0OR9oN6K0sRmGYdntnqvN6uVIflIPJreG9n5AD4hapAcT+yOheoDvN+qBpvxn9UBbGEkPqNXX9YDN/3pg6sF4OlGRHrwJMADPaJXvw5WmBQAAAABJRU5ErkJggg==) no-repeat 0 0;
    padding-left: 25px;
}

Сергей55
Юзер

Сергей55 - 5 января 2021 15:49 -

Не совсем получилось...
https://na-obzore.ru/istorija-tajny-20-veka/

deadluk
Юзер

deadluk - 5 января 2021 16:03 -

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

верни всё как было и попробуй вновь

Сергей55
Юзер

Сергей55 - 5 января 2021 16:12 -

ну как ты указал -
код .favmod-add, .favmod-unset заменил на твой.
Там нет дуближа. Я проверял.

deadluk
Юзер

deadluk - 5 января 2021 16:16 -


а это видимо кто-то за тебя сделал?

ты неправильно вставил код. верни как было

Сергей55
Юзер

Сергей55 - 5 января 2021 16:48 -

Там действительно код как бы повторяется - но это изначально там было.
Я вернул всё обратно. Добавил повторно - пробовал удалять повтор. Но ничего не меняется.
Как нужно правильно?
/* В избранное */
 .favmod {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    margin: 0;
    margin-left: 12px;
    height: 16px;
    padding: 4px;
    opacity: .5;
}
.favmod.active,
.favmod:hover {
	opacity: 1;
}
.favmod.active:hover{
	opacity: .7;
}
	.favmod-add,
	.favmod-unset {
		display: block;
		width: 100%;
		height: 100%;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNJREFUeNrslM8rRFEUx9973iC/KVGSBX8E2TBvN2p2yo6d/AMWJEpKibVs2NmysJxG2bG2tqBEGIkJwzyfozO585o3PYZSnPr0bvfce96559z7tePxeNKyrEXogkM4gWrrw3y4hCfogQHYhLVUKpV3GaxCH9zCAhyBaxXbFPTCPCzBCrTCrKsDsRzcE9XX8bt5nufwGYVB2ICMumbwZcT5rBN2iT+LyZoHyOpxYoZv2gmc9bVEAJlvhHoNljN8tvnHKlmkKduB+XXYgStoMXwvZoA22IazwFEkgwt4BOlYv5meuVDO2KntDJptBMsWsi0EkKKcQgKu1VnOpE5NsAvtrhbmBo61hVHsnFpJPToco1A1ETfL3Yhp9r5jVWjfEkAeTj7kEpUrpOyJSYA7aAi5xmEmNauTi2TznMf0OR9oN6K0sRmGYdntnqvN6uVIflIPJreG9n5AD4hapAcT+yOheoDvN+qBpvxn9UBbGEkPqNXX9YDN/3pg6sF4OlGRHrwJMADPaJXvw5WmBQAAAABJRU5ErkJggg==) no-repeat 0 0;
	}
	.favmod-unset {
		background-position: 0 -16px;
	}

.favmod-add, .favmod-unset {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNJREFUeNrslM8rRFEUx9973iC/KVGSBX8E2TBvN2p2yo6d/AMWJEpKibVs2NmysJxG2bG2tqBEGIkJwzyfozO585o3PYZSnPr0bvfce96559z7tePxeNKyrEXogkM4gWrrw3y4hCfogQHYhLVUKpV3GaxCH9zCAhyBaxXbFPTCPCzBCrTCrKsDsRzcE9XX8bt5nufwGYVB2ICMumbwZcT5rBN2iT+LyZoHyOpxYoZv2gmc9bVEAJlvhHoNljN8tvnHKlmkKduB+XXYgStoMXwvZoA22IazwFEkgwt4BOlYv5meuVDO2KntDJptBMsWsi0EkKKcQgKu1VnOpE5NsAvtrhbmBo61hVHsnFpJPToco1A1ETfL3Yhp9r5jVWjfEkAeTj7kEpUrpOyJSYA7aAi5xmEmNauTi2TznMf0OR9oN6K0sRmGYdntnqvN6uVIflIPJreG9n5AD4hapAcT+yOheoDvN+qBpvxn9UBbGEkPqNXX9YDN/3pg6sF4OlGRHrwJMADPaJXvw5WmBQAAAABJRU5ErkJggg==) no-repeat 0 0;
    padding-left: 25px;
}
	.favmod.active .favmod-unset {
		display: block;
	}

deadluk
Юзер

deadluk - 5 января 2021 16:51 -

балииин... верни всё как было, до моих правок.

ты его таким сделал, там нормальный код был

Сергей55
Юзер

Сергей55 - 5 января 2021 16:54 -

Хорошо. Сейчас верну.
Если что - изначальный код вверху - в первом посте темы. Сейчас верну

Сергей55
Юзер

Сергей55 - 5 января 2021 17:00 -

Вот. Вернул.
.favmod {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
	margin: 0;
	width: 16px;
	height: 16px;
	padding: 4px;
	opacity: .5;
}
.favmod.active,
.favmod:hover {
	opacity: 1;
}
.favmod.active:hover{
	opacity: .7;
}
	.favmod-add,
	.favmod-unset {
		display: block;
		width: 100%;
		height: 100%;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNJREFUeNrslM8rRFEUx9973iC/KVGSBX8E2TBvN2p2yo6d/AMWJEpKibVs2NmysJxG2bG2tqBEGIkJwzyfozO585o3PYZSnPr0bvfce96559z7tePxeNKyrEXogkM4gWrrw3y4hCfogQHYhLVUKpV3GaxCH9zCAhyBaxXbFPTCPCzBCrTCrKsDsRzcE9XX8bt5nufwGYVB2ICMumbwZcT5rBN2iT+LyZoHyOpxYoZv2gmc9bVEAJlvhHoNljN8tvnHKlmkKduB+XXYgStoMXwvZoA22IazwFEkgwt4BOlYv5meuVDO2KntDJptBMsWsi0EkKKcQgKu1VnOpE5NsAvtrhbmBo61hVHsnFpJPToco1A1ETfL3Yhp9r5jVWjfEkAeTj7kEpUrpOyJSYA7aAi5xmEmNauTi2TznMf0OR9oN6K0sRmGYdntnqvN6uVIflIPJreG9n5AD4hapAcT+yOheoDvN+qBpvxn9UBbGEkPqNXX9YDN/3pg6sF4OlGRHrwJMADPaJXvw5WmBQAAAABJRU5ErkJggg==) no-repeat 0 0;
	}
	.favmod-unset {
		background-position: 0 -16px;
	}

	.favmod .favmod-unset,
	.favmod.active .favmod-add {
		display: none;
	}
	.favmod.active .favmod-unset {
		display: block;
	}

deadluk
Юзер

deadluk - 5 января 2021 17:10 -

а сейчас, замени


и всё. ничего более не делай. если ты не видишь результата, то очистить кеш своего браузера.

сравни, то что заменяешь с тем, на что заменяешь. посмотри отличия, что я добавил. почитай в интернетах об этом. найди уроки по css и html, изучи базу.

Сергей55
Юзер

Сергей55 - 5 января 2021 17:28 -

Получилось. Огромное тебе СПАСИБО!))
Признаю свою невнимательность при первоначальной замене кода.
Благодарю за помощь!
А еще. Не подскажешь - подобный скрипт на безопасность сайта не повлияет? Скрипт от Сандера.

deadluk
Юзер

deadluk - 5 января 2021 17:44 -

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

найди уроки и смотри, читай и ещё раз читай, если нашёл непонятный тебе код, разбирай его подетально и читай о каждом селекторе, читай статьи связанные с сайтами и т.п.

Сергей55
Юзер

Сергей55 - 5 января 2021 17:31 -

Пойду теперь на основной сайт поставлю. Буду надеяться, что скрипт безопасен.

Сергей55
Юзер

Сергей55 - 2 января 2021 21:11 -

Цитата: deadluk
либо обернуть эти спэны другим родителем и присвоить код выше

Цитата: deadluk
либо обернуть эти спэны другим родителем и присвоить код выше

Что именно обернуть и как?

TeraMoune
Эксперт

TeraMoune - 3 января 2021 03:35 -


Сергей55
Юзер

Сергей55 - 3 января 2021 14:44 -

Вы имеете ввиду, что в моем случае нужно в css добавить что-то типа?
li:before {
content: "¶ "; /* Добавляем желаемый символ перед элементом списка */
}

TeraMoune
Эксперт

TeraMoune - 3 января 2021 16:08 -

Как вариант

Сергей55
Юзер

Сергей55 - 3 января 2021 18:05 -

А как этот код будет выглядеть с "пробелом"?

TeraMoune
Эксперт

TeraMoune - 3 января 2021 18:49 -

Добавить пробел или использовать другие правила css для манипуляции с позициями элемента

Сергей55
Юзер

Сергей55 - 3 января 2021 19:05 -

Какой самый простой и несложный?

TeraMoune
Эксперт

TeraMoune - 3 января 2021 19:42 -

Оба

Сергей55
Юзер

Сергей55 - 5 января 2021 18:42 -

Цитата: deadluk
на безопасность своего сайта повлияешь ты и не в лучшем свете. об этом стоит переживать
В смысле?
Этот скрипт для сайта не безопасен?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх