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

DLE FAQ » Все вопросы » Общие вопросы » Скажите, пожалуйста

Скажите, пожалуйста

vip.boss 13.08.2014 Все вопросы » Общие вопросы 2644

вопрос

При наведении на социальные сети :hover меняет цвет на #ea3e26.Как сделать так чтобы при наведении на "Твинтер" :hover менял цвет на #55acee,"Фейсбук" на #3b5998,"ВКонтакте" на #2B587A Гугл+ на #ea3e26.

css

#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

Ответил: КЭП

Пожалуйста!

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

Юзер

1599

FastFud - 2014-06-2113 августа 2014 13:52 - #33786

Если я правильно понял то:

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

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
    background-color: #55acee;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
    background-color: #3b5998;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
    background-color: #2B587A;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
    background-color: #ea3e26;
}

Гости

116

vip.boss - 2014-06-2113 августа 2014 13:58 - #33787

Как сделать чтобы только менял цвет текста

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:26 - #33789

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

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-color: #55acee;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-color: #3b5998;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-color: #2B587A;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-color: #ea3e26;
}

Гости

116

vip.boss - 2014-06-2113 августа 2014 14:29 - #33790

Опять красный цвет текста, меняется только цвет иконок.

вот весь css код

/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/
#marker-bar,
#txtselect_marker {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
        background-position: -0px -32px;
}

#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
    visibility: visible;
}

#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
    visibility: visible;
    width: 32px;
    height: 32px;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
    cursor: pointer;
    display: block;
    margin: 0 5px;
    float: left;
}

#marker-bar .masha-marker{
    line-height: 1em;
    color: #aaa;
    border-bottom: 1px dotted #aaa;
    margin-right: 10px;
}

#marker-bar .masha-marker:hover {
    color: #ea3e26;
    border-color: #ea3e26;
}

.user_selection, .user_selection_true {
    background: #c4f47d;
    padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
    display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
    position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
    display: inline-block;
    position: absolute;
    top: -7px;
    left: -5px;
    width: 33px;
    height: 33px;
    background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
    background-position: -0px -33px;
}


#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:33 - #33791

Добавить:

color: #fff;

#fff - Это белый цвет.

Гости

116

vip.boss - 2014-06-2113 августа 2014 14:49 - #33792

нифига не выходит

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:50 - #33793

Скиньте ваш код: сюда и тогда и я может пойму и помогу.

Гости

116

vip.boss - 2014-06-2113 августа 2014 15:00 - #33794

Я ведь написал

css код

/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/
#marker-bar,
#txtselect_marker {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
        background-position: -0px -32px;
}

#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
    visibility: visible;
}

#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
    visibility: visible;
    width: 32px;
    height: 32px;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
    cursor: pointer;
    display: block;
    margin: 0 5px;
    float: left;
}

#marker-bar .masha-marker{
    line-height: 1em;
    color: #aaa;
    border-bottom: 1px dotted #aaa;
    margin-right: 10px;
}

#marker-bar .masha-marker:hover {
    color: #ea3e26;
    border-color: #ea3e26;
}

.user_selection, .user_selection_true {
    background: #c4f47d;
    padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
    display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
    position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
    display: inline-block;
    position: absolute;
    top: -7px;
    left: -5px;
    width: 33px;
    height: 33px;
    background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
    background-position: -0px -33px;
}


#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

При наведении на социальные сети текст меняется на красный цвет.Как сделать так чтобы при наведении на "Твинтер"
менял цвет на #55acee,"Фейсбук" на #3b5998,"ВКонтакте" на #2B587A Гугл+ на #ea3e26.

Юзер

DreamFix - 2014-06-2115 августа 2014 17:21 - #33903

1.Заменяете свой код на этот:

ul,
ol {display:block; padding:0; margin:0;}
ul li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style-type: none;}
ol li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style-type: none;}

2. после:


/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/

добавьте:


a.fb:hover {
color: #3b5998 !important;
}
a.vk:hover {
color: #2B587A !important;
}
a.tw:hover {
color: #55ACEE !important;
}

+БОНУС
Если нужно также сменить иконки.
Скачайте картинку и замените ней свою в папке ВАШ_ШАБЛОН/dleimages/social-icons.png

Гости

116

vip.boss - 2014-06-2115 августа 2014 18:21 - #33911

Спасибо тебе огромное :)

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

Не работает увеличение картинок

30.08.2011 SlimYalta Общие вопросы

Кривое отображение сайта в IE

30.08.2011 SlimYalta Общие вопросы

Отправленные письма Вылазит За Пределы Шаблона

26.12.2013 selfire Общие вопросы

Как изменить вид навигации 1 фотки на 2 ?

12.01.2014 mypes Общие вопросы

Форма добавление комментариев

14.03.2014 vip.boss Общие вопросы

Плавающую навигационную панель

29.03.2014 savenco Общие вопросы

Кнопка Вверх

28.05.2014 prolight Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), jQuery, Модули, Хаки, Ламерские вопросы

Как сделать чтобы черный менялся на белый цвет ?

18.06.2014 vip.boss Общие вопросы

Вид добавления комментариев DataLife Engine

18.06.2014 vip.boss Общие вопросы

Как изменить цвет рейтинга mrating

21.06.2014 vip.boss Общие вопросы

Последние события

mondolfo | Как вывесит в comments.tpl картинку с но ... ⁷

mondolfo
Как вывесит в comments.tpl картинку с новости?
Вчера, 23:42

кто-нибудь решил эту?
Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
22-11-2024, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 13:52

где выводить? админка или сайт
TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
21-11-2024, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .

наверх