Нужно прописать новые стили для элементов - Вопросы по CSS

Приветствую! Я не программист, поэтому прошу вашей помощи.

С помощью специального сервиса я создал плавающие иконки соцсетей, и добавил эту плавающую панельку себе на сайт. Сама панелька состоит всего из 2 файлов: иконок формата png и яваскрипта. JavaScript выглядит вот так:
Изменить то иконки я смог, тут особых навыков не нужно. А вот со стилями всё никак не могу разобраться. У этой панельки их нет. Их нужно задать, но как это сделать, я не знаю. Повторюсь, что нужно их только лишь задать, а уж с остальным я разберусь сам. Я просто не понимаю, как в стилях шаблона задать название для этой панельки и её элементов. Вот скриншот, на нём просмотр кода этой панельки ( тыкните для увеличения):


Повторюсь, я в этом деле профан, поэтому особо ничего не придумал, разве что попробовал прописать в template.css типа такого:


или


В общем, ни одна моя затея успехом так и не увенчалась. Понятия не имею, как правильно задать стили для этой панельки. Сразу добавлю главное: это не расширения для Joomla. Панелька ставилась на сайт так:

скачивалась сама панелька (папка с двумя файлами). Эта папка закидывалась в корень сайта. Далее в index.php шаблона вставлялся код:


На этом всё. А вот как дальше быть со стилями, я не знаю. Помоги, пожалуйста. Мне только их нужно задать, и всё. А уж дальше внешний вид создавать я смогу сам. В этом уже потихоньку осваиваюсь.

Дальше в фигурных скобках пишем соответствующие стили. html-book.ru Вам в помощь.

Дальше в фигурных скобках пишем соответствующие стили. html-book.ru Вам в помощь.

Да прописывал я стили. Повторю, со стилями у меня проблем нет. В этом я разбираюсь. А вот как их задать для панели и её элементов, я не знаю.
Я прописывал разное, но ничего не работает. И сдвиги, и границы, и цвета. Это я умею. Но оно не действует.

Есть ссылка на сайт?

Есть ссылка на сайт?

пока что на локалке стоит. Но если че надо еще предоставить, могу написать или отскриншотить.

Хотя бы js-скрипт выложите.

Хотя бы js-скрипт выложите.

посмотрите в шапке темы. Добавил скрипт.

Кстати, можете посмотреть вот этот сайт и его код элементов: [ссылка на известный варезник и рассадник заразы]. На нем точно такая же панель стоит, только, как видите, там стилей добавили.

Как я преполагал, стиль задается в js-скрипте inline и, как следствие, имеет самый высокий приоритет, то есть его можно менять только там же.

Как я преполагал, стиль задается в js-скрипте inline и, как следствие, имеет самый высокий приоритет, то есть его можно менять только там же.

да, попробовал изменять/добавлять кое-что. действительно, получается. Я и не предполагал, что в этом файле сразу всё будет. Думал, что JavaScript только исполнением функций занимается. Даже не рассматривал его подробно.
Получается, я могу там вносить точно такие же стили, как и в CSS?? Будет всё воспринимать? Или есть какие-то ограничения?

Да, если все правильно делаете.

Да, если все правильно делаете.

Понял. А как мне, например, сделать так, чтобы панелька была полупрозрачной, а при наведении мыши становилась полностью насыщенной?
Я вот сейчас прописал там opacity: 0.5. Вся панель стала прозрачной. А дальше хз что делать. Или такое уже к стилям не относится?

.панелька:hover,.панелька:focus {opaccity:1;}

.панелька:hover,.панелька:focus {opaccity:1;}

ну, с ховером всё понятно. только как мне его в код внедрить?  У меня в этом яваскрипте вся полностью панелька обозначена названием el.html. То есть, вот, как она у меня сейчас выглядит в виде кода:

el.html ('<span id="share42" style="position:fixed;z-index:9999;padding:5px;border:1px solid #373737;background-color:#464646;border-radius:5px;opacity:0.5;)

в начале пишу el.html:hover, но тогда панель вообще пропадает.

так в CSS пропишите, js не поддерживает псевдоклассы

так в CSS пропишите

так не воспринимает оно CSS. ВЫ шапку темы читали? Я сразу прашивал, как подключить стили CSS к панели. В js панель обозначена id="share42". В коде элемента еще смотрел. Потом зашел в тэмплэйт.css шаблона и начал там вписывать все варианты, которые только были.

.share42init:hover {
  opacity: 0.5;
}


или

.share42:hover {
  opacity: 0.5;
}

не воспринимает и всё. Смог только в самом js добавить пару стилей. А так оно не реагирует никак почему-то. Вот, собственно, я в начале самом и спрашивал, как именно привязать эту панель к стилям.

el.html:hover

Неправильно, пишите в
http://htmlbook.ru/html/attr/style.
http://htmlbook.ru/html/style (причем <style/> необязательно положить только в <head/>).

Неправильно, пишите в

Код: php-brief

style="..."

http://htmlbook.ru/html/attr/style

Так, а что именно мне в style записать? Просто слово hover туда вписать? Я с самого начала еще предполагал, что именно туды надо вписывать. Но что именно, вот это ума не приложу. Если не сложно, подскажите, пожалуйста.

Для ховера opacity: 1, если и с ховером и без у вас опасити одинаков, то ничего и не получится. И да: у вас же не класс а id:

В js панель обозначена id="share42"

Попробуйте:

Для ховера opacity: 1, если и с ховером и без у вас опасити одинаков, то ничего и не получится. И да: у вас же не класс а id:
Попробуйте:

Код: css

#share42init:hover,#share42:hover {
  opacity:1!important;
}

безрезультатно

В общем, мне щас отписался разработчик. Сказал, что у него в CSS стилях выставлено так:


Я вставил, но реакции всё равно никой. Не знаю.... может, надо как-то специально задать путь к файлу стилей для этой панели?

Здесь могу предложить только продолжить диалог с разработчиком: его консультация будет самой компетентной - у него оригинальный образец под рукой.

Обнаружил, что по какой-то причине псевдокласс hover не работает, когда opacity задана inline. Верстальщики, подтвердите, пожалуйста.
Для mr.shusty: касаясь opacity

Странное поведение hover можно наблюдать здесь.

Да, есть такая фишка, встречался, потому и рекомендовал в ксс приписывать

Обнаружил, что по какой-то причине псевдокласс hover не работает, когда opacity задана inline. Верстальщики, подтвердите, пожалуйста.
Для mr.shusty: касаясь opacity

Код: php-brief

el.html ('<span id="share42" onmouseover="this.style.opacity=1;" onmouse="this.style.opacity=0.5;" style="...

Странное поведение hover можно наблюдать здесь.

Благодарствую!! Заработало! Эх, ну, тут бы я точно не разобрался...
Кстати, ответил разработчик опять. Сказал, что все стили должны без проблем работать в CSS. И ничего не надо прописывать дополнительно. Странно это... может, надо было стили этой панели не в template.css вставлять?? о_О
Это уже не важно, конечно, но всё равно интересно.
Еще раз спасибо!

У этой панели должен быть свой файл стилей.

У этой панели должен быть свой файл стилей.

разработчик сказал, что нет. не обязательно. Вписываются стили в общак тэмплэйта. Да и на других сайтах через код элемента видно, что эти стили тоже лежат в темплэйте шаблона.
Он мне когда написал свой вариант стилей, то так и сказал, что ничего делать не нужно.Заливаешь файлы на сайт и в тэмплэйте пишешь им стили. Всё. Но че у меня не работает - хз. Тем более он свой вариант написания стилей кинул. Тот, что у него на сайте сейчас.

Сложно сказать, что именно у вас там не так. Возможно, ссылка на пациента что-то прояснит, но не уверен.