Joomla 2.5 Красивое отображение ссылок

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем freelancer2x2, 26.10.2014.

  1. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    Хочется украсить сайт, сделать ссылки на нем более привлекательными. Погуглил плагины для этого - ничего не нашел. В конкретном случае - очень нравится отображение ссылок на этом форуме - при наведении она красиво выделяется.
    Подскажите, что это за плагин, или такая украшалка сделана только на этом форуме?
    Спасибо.
     
    freelancer2x2, 26.10.2014
    #1

  2. Наши спонсоры

     
  3. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Ты о чём? Приведи пример. Ссылки в верхнем меню или какие?
     
    AKopytenko, 27.10.2014
    #2
  4. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    Например вот, навожу на ссылку, даже в подписи, она как анимированная:
    kiss_4kb.1414430155.jpg
    Смотрится красиво, это сделано плагином или специально написано для этого форума?
     
    freelancer2x2, 27.10.2014
    #3
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Это стандартное оформление ссылок. Оформлено на CSS 3.
    C помощью того же Firebug можно всё увидеть. ;)
     
    OlegM, 27.10.2014
    #4
    freelancer2x2 нравится это.
  6. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Конечно, это же просто CSS :)
    Нам нужно повесить стили на событие наведения курсора мыши на элемент страницы (в данном случае - ссылка).
    Соответственно:
    Код (css):
    1. a:hover {
    2.     background: цвет_фона_ссылки;
    3.     color: цвет_текста;
    4.     box-shadow: смещение_по_оси_X смещение_по_оси_Y размер_тени цвет_тени;
    5. }


    Рекомендую добавить в закладки!
    http://htmlbook.ru/

    Про те же псевдоклассы (hover, focus, ntd-child и т.д.) можно почитать здесь:
    http://htmlbook.ru/css/cat/pseudoclass
     
    AKopytenko, 28.10.2014
    #5
    freelancer2x2 нравится это.
  7. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    По моему, я что-то не так вписываю, не получается. Насколько я понял, править надо в этом стиле public_html/templates/мой шаблон/css/template.css . Дописал внизу 37-41 строки, результата не принесло, ссылки отображаются по старому...
    kiss_161kb.1418986680.jpg
     
    freelancer2x2, 19.12.2014
    #6
  8. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Ты не знаешь что стили могут переопределяться в любом элементе ?
    пробуй для основного правила ссылки добавить !important
     
    OlegK, 19.12.2014
    #7
  9. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    css никак мне не дается, даже по учебнику мало что понял. С html более-менее освоился, дошел до написания странички в ручную. А с ss сложнее. Вписал правило, но результата не принесло:
    kiss_9kb.1418990433.jpg
    Попробовал вставить после первой фигурной скобки - не помогло.
     
    freelancer2x2, 19.12.2014
    #8
  10. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    и не поможет
    Код (css):
    1. a:hover {color:green !important;}
     
    OlegK, 19.12.2014
    #9
  11. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    Увы, не получилось.. Думал, возможно скобки не хватает после a:hover, добавил, тоже безрезультатно.
    Код (css):
    1. a:hover {color:green !important;}
    2.     background: #FDFDFD;
    3.     color: #SGSGSG;
    4.     box-shadow: 5% 5% 10 #YTERER;
    5. }
     
    freelancer2x2, 19.12.2014
    #10
  12. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Код (css):
    1. a:hover {color:green !important;
    2. background: #FDFDFD !important;
    3. box-shadow: 5% 5% 10 #YTERER !important;}

    Ты в какой файл прописываешь ? И чтобы переопределить правило стиля, нужно писать в конце файла,а не в 1 строчке templates.css
    А в модуле последних новостей под меню,стили определены в файле /templates/gk_twn2/css/style4.css
    --- добавлено: 19.12.2014, первое сообщение размещено: 19.12.2014 ---
    Код (css):
    1. a:hover {color:red !important;
    2. background: #FDFDFD !important;
    3. box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */}
    в файл /templates/gk_twn2/css/style4.css и будет
     

    Вложения:

    • s.JPG
      s.JPG
      Размер файла:
      64 КБ
      Просмотров:
      1
    OlegK, 19.12.2014
    #11
  13. freelancer2x2
    Offline

    freelancer2x2 Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    21.12.2012
    Сообщения:
    268
    Симпатии:
    7
    Пол:
    Мужской
    Кажется понял, буду разбираться. Потом напишу что получилось в результате, спасибо)
     
    freelancer2x2, 19.12.2014
    #12
  14. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Да с чем тут разбираться то? CSS - элементарная вещь. Сложности должны начинаться, когда начинаются вопросы кросс-браузерности или вёрстки шаблонов по сложным макетам дизайна.
    КУЧА видео-пособий в интернете.
    Самые адекватные, по-моему, от Sorax:
     
    AKopytenko, 21.12.2014
    #13
< Выпадающее меню прячется под слайдер. | Как разобраться с позицией модуля? >

Поделиться этой страницей

Загрузка...