0 Пользователей и 1 Гость просматривают эту тему.
  • 11 Ответов
  • 7915 Просмотров
*

Demon572

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Подскажите пожалуйста как изменить/убрать выделение цветом ссылки при наведении.
Рылся в CSS, не нашел. Сильно не пинайте, только учусь, пытаюсь сделать первый сайт.
Заранее спасибо.
« Последнее редактирование: 10.03.2012, 07:15:52 от Demon572 »
*

assaru

  • Давно я тут
  • 763
  • 88 / 1
Слегка подпну в сторону FireBug :)
файл beez5.css стр. 37-43


a
:hover,
a:active,
a:focus
{
background:#669933;
color:#FFF;
}
Проблему можно решить и по скрину и по эмоциям, счет на оплату через ЛС (с) Nobody
*

Demon572

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Спасибо. подскажите еще пожалуйста, если я к
Код
#social-icon {
height: 240px;
width: 60px;
position: fixed;
top: 150px;
left: 2px;
z-index: 999;
}
#social-icon span.facebook-icon {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 60px;
float: left;
}
#social-icon span.facebook-icon:hover {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: left -60px;
}
#social-icon span.twitter-icon {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -60px top;
height: 60px;
width: 60px;
float: left;
}
#social-icon span.twitter-icon:hover  {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -60px -60px;
}
#social-icon span.vkontakte-icon {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -120px top;
height: 60px;
width: 60px;
float: left;
}
#social-icon span.vkontakte-icon:hover  {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -120px -60px;
}
#social-icon span.youtube-icon {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -180px top;
height: 60px;
width: 60px;
float: left;
}
#social-icon span.youtube-icon:hover  {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -180px -60px;
}
#social-icon span.googleplus-icon {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -240px top;
height: 60px;
width: 60px;
float: left;
}
#social-icon span.googleplus-icon:hover  {
background-image: url(../images/social-icon.png);
background-repeat: no-repeat;
background-position: -240px -60px;
}
#social-icon span.facebook-icon a, #social-icon span.twitter-icon a,
#social-icon span.vkontakte-icon a,  #social-icon span.youtube-icon a, #social-icon span.googleplus-icon a {
display: block;
    height: 60px;
width: 60px;
    text-indent: -99999em;
добавлю background-color: transparent будет при наведении картинка прозрачной? читал учебник, ниче не понял.сейчас при наведении она зеленая http://kemgma.org/ на сайте dgs понравилась с боку панель, решил  прикрутить, прикрутил, а она при наведении зеленая(
*

assaru

  • Давно я тут
  • 763
  • 88 / 1
#social-icon span.facebook-icon a, #social-icon span.twitter-icon a,
#social-icon span.vkontakte-icon a, #social-icon span.youtube-icon a, 
#social-icon span.googleplus-icon a 
{
    
backgroundnone repeat scroll 0 0 transparent;
    
displayblock;
    
height60px;
    
text-indent: -99999em;
    
width60px;
}
Проблему можно решить и по скрину и по эмоциям, счет на оплату через ЛС (с) Nobody
*

Demon572

  • Осваиваюсь на форуме
  • 13
  • 0 / 0
Большое человеческое спасибо, все прекрасно работает! :D
Решил выложить готовый вариант с исправлениями assaru, вдруг кому пригодиться, надеюсь владельцы D-G-S меня не засудят, идея стырена у них
в CSS добавить:
Код
/*social-icon*/
#social-icon {
  height: 240px;
  width: 60px;
  position: fixed;
  top: 150px;
  left: 2px;
  z-index: 999;
}
#social-icon span.facebook-icon {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: left top;
  height: 60px;
  width: 60px;
  float: left;
}
#social-icon span.facebook-icon:hover {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: left -60px;
}
#social-icon span.twitter-icon {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -60px top;
  height: 60px;
  width: 60px;
  float: left;
}
#social-icon span.twitter-icon:hover  {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -60px -60px;
}
#social-icon span.vkontakte-icon {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -120px top;
  height: 60px;
  width: 60px;
  float: left;
}
#social-icon span.vkontakte-icon:hover  {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -120px -60px;
}
#social-icon span.youtube-icon {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -180px top;
  height: 60px;
  width: 60px;
  float: left;
}
#social-icon span.youtube-icon:hover  {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -180px -60px;
}
#social-icon span.googleplus-icon {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -240px top;
  height: 60px;
  width: 60px;
  float: left;
}
#social-icon span.googleplus-icon:hover  {
  background-image: url(http://ваш сайт/images/social-icon.png);
  background-repeat: no-repeat;
  background-position: -240px -60px;
}
#social-icon span.facebook-icon a, #social-icon span.twitter-icon a,
#social-icon span.vkontakte-icon a, #social-icon span.youtube-icon a,
#social-icon span.googleplus-icon a
{
    background: none repeat scroll 0 0 transparent;
    display: block;
    height: 60px;
    text-indent: -99999em;
    width: 60px;
}
затем добавить HTML код на страницы:
Код
<!--social-icon-->
<div id="social-icon">
  <span class="facebook-icon"><a href="https://ссылка на вашу страницу" target="_blank" title="Мы на Facebook">Мы на Facebook</a></span>
  <span class="twitter-icon"><a href="http://ссылка на вашу страницу" target="_blank" title="Мы на Twitter">Мы на Twitter</a></span>
  <span class="vkontakte-icon"><a href="http://ссылка на вашу страницу" target="_blank" title="Вконтакте">Вконтакте</a></span>
  <span class="youtube-icon"><a href="http://ссылка на вашу страницу" target="_blank" title="Наш канал YouTube">Наш канал YouTube</a></span>
  <span class="googleplus-icon"><a href="https://ссылка на вашу страницу" target="_blank" title="Страница в Google+">Страница в Google+</a></span>
</div>
Положить картинку по указанному пути
Пример - http://www.d-g-s.ru/
*

Voprosss

  • Новичок
  • 5
  • 0 / 0
Слегка подпну в сторону FireBug :)
файл beez5.css стр. 37-43


a
:hover,
a:active,
a:focus
{
background:#669933;
color:#FFF;
}

Поменять цвет при наведении получилось!))
А подскажите пожалуйста как поменять цвет когда уже нажимаешь на ссылку?цвет фона все равно остается зеленым как в шаблоне(((
*

Voprosss

  • Новичок
  • 5
  • 0 / 0
ааааа, ответьте кто- нибудь на вопрос выше!ПОЖАЛУЙСТА!
Заранее спасибо:)
*

r88

  • Новичок
  • 4
  • 0 / 0
Подскажите пожалуйста, всю голову уже сломал...
в haeder вставлен модуль авторизации для JoomShopping из этой темы. На главной странице выпадающее окно правильно отображается, а на странице каталога и корзины залезает под contentarea. z-index менял для модуля, безрезультатно...

P.s. стоит расширение JoomShopping.
« Последнее редактирование: 16.08.2013, 11:27:27 от r88 »
*

jss

  • Осваиваюсь на форуме
  • 36
  • 9 / 0
Цитировать
А подскажите пожалуйста как поменять цвет когда уже нажимаешь на ссылку?цвет фона все равно остается зеленым как в шаблоне(((

Не понятно что вы хотите.... менять цвет при нажатии на линк или же в нажатом положении.
P.S. ссылку на сайт
*

r88

  • Новичок
  • 4
  • 0 / 0
Подскажите пожалуйста, всю голову уже сломал...
в haeder вставлен модуль авторизации для JoomShopping из этой темы. На главной странице выпадающее окно правильно отображается, а на странице каталога и корзины залезает под contentarea. z-index менял для модуля, безрезультатно...

P.s. стоит расширение JoomShopping.

Может это быть связанно, что модуль находится в одном div'e с параметром position:relative, и поэтому другой div с таким же значением перекрывает его?
*

r88

  • Новичок
  • 4
  • 0 / 0
Код
<div id="back">
      <div id="header">
             <header id="header">
  <div class="topmenu">
                          <jdoc:include type="modules" name="topmenu" />
                   </div>
                   ...
       </div>
       </header>
       <div id="<?php echo $showRightColumn ? 'contentarea2' : 'contentarea'; ?>">
     <div id="breadcrumbs">
              ...
              </div>
        </div>

CSS
Код
#back {margin: 0; padding: 0px;}
#header {display: block; position: relative; padding: 0px; overflow: hidden;}
#contentarea, #contentarea2 {position: relative; overflow: hidden; margin: 0;}

« Последнее редактирование: 17.08.2013, 15:24:30 от r88 »
*

r88

  • Новичок
  • 4
  • 0 / 0
Разобрался...
Вынес <div class="topmenu"> в <div id="back">
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Изменение шаблона Joomla! 2.5.24

Автор SecondPC

Ответов: 0
Просмотров: 181
Последний ответ 26.03.2021, 18:09:33
от SecondPC
Как в Joomla 3 отключить позицию вывода или убрать надпись?

Автор Алексей Лоскутов

Ответов: 2
Просмотров: 4328
Последний ответ 10.04.2020, 19:07:02
от Алексей Лоскутов
Руководство - создание шаблона для Joomla 2.5

Автор dynamit

Ответов: 6
Просмотров: 24024
Последний ответ 02.02.2020, 22:28:15
от AlinaBut
Добавляем rel="canonical" в шаблоны материалов Joomla 1.7 - 2.5

Автор AmdAveO

Ответов: 126
Просмотров: 70525
Последний ответ 28.05.2019, 18:41:25
от Клим
Проблемы в горизонтальном меню Joomla 2.5

Автор Димьяна

Ответов: 1
Просмотров: 781
Последний ответ 27.11.2018, 14:58:30
от Ragivort