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

Discussion in 'Внешний вид, шаблоны, графика' started by freelancer2x2, Oct 26, 2014.

  1. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    Хочется украсить сайт, сделать ссылки на нем более привлекательными. Погуглил плагины для этого - ничего не нашел. В конкретном случае - очень нравится отображение ссылок на этом форуме - при наведении она красиво выделяется.
    Подскажите, что это за плагин, или такая украшалка сделана только на этом форуме?
    Спасибо.
     
    freelancer2x2, Oct 26, 2014
    #1

  2. Ads Master

     
  3. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Ты о чём? Приведи пример. Ссылки в верхнем меню или какие?
     
    AKopytenko, Oct 27, 2014
    #2
  4. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    Например вот, навожу на ссылку, даже в подписи, она как анимированная:
    kiss_4kb.1414430155.jpg
    Смотрится красиво, это сделано плагином или специально написано для этого форума?
     
    freelancer2x2, Oct 27, 2014
    #3
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Это стандартное оформление ссылок. Оформлено на CSS 3.
    C помощью того же Firebug можно всё увидеть. ;)
     
    OlegM, Oct 27, 2014
    #4
    freelancer2x2 likes this.
  6. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Конечно, это же просто 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, Oct 28, 2014
    #5
    freelancer2x2 likes this.
  7. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    По моему, я что-то не так вписываю, не получается. Насколько я понял, править надо в этом стиле public_html/templates/мой шаблон/css/template.css . Дописал внизу 37-41 строки, результата не принесло, ссылки отображаются по старому...
    kiss_161kb.1418986680.jpg
     
    freelancer2x2, Dec 19, 2014
    #6
  8. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Ты не знаешь что стили могут переопределяться в любом элементе ?
    пробуй для основного правила ссылки добавить !important
     
    OlegK, Dec 19, 2014
    #7
  9. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    css никак мне не дается, даже по учебнику мало что понял. С html более-менее освоился, дошел до написания странички в ручную. А с ss сложнее. Вписал правило, но результата не принесло:
    kiss_9kb.1418990433.jpg
    Попробовал вставить после первой фигурной скобки - не помогло.
     
    freelancer2x2, Dec 19, 2014
    #8
  10. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    и не поможет
    Код (css):
    1. a:hover {color:green !important;}
     
    OlegK, Dec 19, 2014
    #9
  11. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    Увы, не получилось.. Думал, возможно скобки не хватает после a:hover, добавил, тоже безрезультатно.
    Код (css):
    1. a:hover {color:green !important;}
    2.     background: #FDFDFD;
    3.     color: #SGSGSG;
    4.     box-shadow: 5% 5% 10 #YTERER;
    5. }
     
    freelancer2x2, Dec 19, 2014
    #10
  12. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Код (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
    --- добавлено: Dec 19, 2014, первое сообщение размещено: Dec 19, 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 и будет
     

    Attached Files:

    • s.JPG
      s.JPG
      File size:
      64 KB
      Views:
      1
    OlegK, Dec 19, 2014
    #11
  13. freelancer2x2
    Offline

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

    Joined:
    Dec 21, 2012
    Messages:
    268
    Likes Received:
    7
    Gender:
    Male
    Кажется понял, буду разбираться. Потом напишу что получилось в результате, спасибо)
     
    freelancer2x2, Dec 19, 2014
    #12
  14. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Да с чем тут разбираться то? CSS - элементарная вещь. Сложности должны начинаться, когда начинаются вопросы кросс-браузерности или вёрстки шаблонов по сложным макетам дизайна.
    КУЧА видео-пособий в интернете.
    Самые адекватные, по-моему, от Sorax:
     
    AKopytenko, Dec 21, 2014
    #13
< Выпадающее меню прячется под слайдер. | Как разобраться с позицией модуля? >

Share This Page

Loading...