Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Стили (CSS) » Как отредактировать стиль встроенного элемента "Закладки"?

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

Сергей55 29.12.2020 Все вопросы » Стили (CSS) 1047

вопрос

Здравствуйте. Хочу вставить сторонний плагин "Закладки", который на аяксе для гостей. Не могу разобраться со стилем (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 комментариев

Юзер

129

doom45 - 2020-12-2929 декабря 2020 22:11 - #78676

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

Эксперт

802

TeraMoune - 2020-12-2930 декабря 2020 08:32 - #78679

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

Тестовый репозиторий установки плагинов: teramoune

Юзер

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

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> - и ссылка наезжает на иконку

Эксперт

802

TeraMoune - 2020-12-2930 декабря 2020 18:01 - #78684

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

Тестовый репозиторий установки плагинов: teramoune

Юзер

Сергей55 - 2020-12-291 января 2021 21:26 - #78692

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

Юзер

588

deadluk - 2020-12-292 января 2021 19:08 - #78693

.favmod {
display: flex; align-items:center;
}

самое простое

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

Юзер

Сергей55 - 2020-12-292 января 2021 21:10 - #78694

Цитата: deadluk

.favmod {
display: flex; align-items:center;
}

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

Юзер

588

deadluk - 2020-12-293 января 2021 13:55 - #78697

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

<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;
}

Юзер

588

deadluk - 2020-12-293 января 2021 14:05 - #78698

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

Юзер

Сергей55 - 2020-12-293 января 2021 18:14 - #78702

конечно не помогло, вы не скинули нужный кусок кода,

Я вставляю в дефолтный шаблон - в

<div class="meta ignore-select"><ul class="left">код закладок </ul>
	</div>

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

Юзер

588

deadluk - 2020-12-294 января 2021 23:33 - #78715

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

Юзер

Сергей55 - 2020-12-295 января 2021 13:36 - #78716

В дефолтном 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>

Юзер

588

deadluk - 2020-12-295 января 2021 14:16 - #78718

.meta { display: flex; align-items: center; }

не поможет, то скинь ссылку на сайт в ЛС или тут.

Юзер

Сергей55 - 2020-12-295 января 2021 14:58 - #78719

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

Юзер

588

deadluk - 2020-12-295 января 2021 15:11 - #78720

у .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 - 2020-12-295 января 2021 15:49 - #78721

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

Юзер

588

deadluk - 2020-12-295 января 2021 16:03 - #78722

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

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

Юзер

Сергей55 - 2020-12-295 января 2021 16:12 - #78723

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

Юзер

588

deadluk - 2020-12-295 января 2021 16:16 - #78724

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

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

Юзер

Сергей55 - 2020-12-295 января 2021 16:48 - #78725

Там действительно код как бы повторяется - но это изначально там было.
Я вернул всё обратно. Добавил повторно - пробовал удалять повтор. Но ничего не меняется.
Как нужно правильно?

/* В избранное */
 .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;
	}

Юзер

588

deadluk - 2020-12-295 января 2021 16:51 - #78726

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

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

Юзер

Сергей55 - 2020-12-295 января 2021 16:54 - #78727

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

Юзер

Сергей55 - 2020-12-295 января 2021 17:00 - #78728

Вот. Вернул.

.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;
	}

Юзер

588

deadluk - 2020-12-295 января 2021 17:10 - #78729

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

Показать / Скрыть текст

вот это:

.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 {
    -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: 0.5;
}

вот это:


.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-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;
}

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

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

Юзер

Сергей55 - 2020-12-295 января 2021 17:28 - #78730

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

Юзер

588

deadluk - 2020-12-295 января 2021 17:44 - #78732

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

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

Юзер

Сергей55 - 2020-12-295 января 2021 17:31 - #78731

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

Юзер

Сергей55 - 2020-12-292 января 2021 21:11 - #78695

Цитата: deadluk

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

Цитата: deadluk

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

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

Эксперт

802

TeraMoune - 2020-12-293 января 2021 03:35 - #78696

Сергей55, http://htmlbook.ru/css/after, http://htmlbook.ru/css/before

Тестовый репозиторий установки плагинов: teramoune

Юзер

Сергей55 - 2020-12-293 января 2021 14:44 - #78699

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

Эксперт

802

TeraMoune - 2020-12-293 января 2021 16:08 - #78700

Как вариант

Тестовый репозиторий установки плагинов: teramoune

Юзер

Сергей55 - 2020-12-293 января 2021 18:05 - #78701

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

Эксперт

802

TeraMoune - 2020-12-293 января 2021 18:49 - #78703

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

Тестовый репозиторий установки плагинов: teramoune

Юзер

Сергей55 - 2020-12-293 января 2021 19:05 - #78704

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

Эксперт

802

TeraMoune - 2020-12-293 января 2021 19:42 - #78705

Оба

Тестовый репозиторий установки плагинов: teramoune

Юзер

Сергей55 - 2020-12-295 января 2021 18:42 - #78733

Цитата: deadluk

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

В смысле?
Этот скрипт для сайта не безопасен?

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

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

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

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

Что надо добавить в код, чтобы было меню 3-го уровня

Выдвигающиеся меню

Всплывающие (диалоговые) окна DLE появляются внизу сайта

подскажите что переделать в коде

Картинка в short-story с высотой auto

Настройка модального окна

Помогите исправить верстку слайдера

Как сделать адаптивную таблицу?

Можно ли сделать появление скрытого текста при наведении мыши на CSS?

Как сделать Pop-up окно без закрытия?