1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

hover эффект вкладки в navbar'е

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем Dimanok, 14 сен 2014.

Загрузка
  1. Dimanok

    Dimanok Новичок

    Регистрация:
    12.09.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.4.0
    Здравствуйте. Подскажите пожалуйста где же все-таки найти и изменить этот самый hover эффект навигационных вкладок меню ?
    Объясню на примере моего скриншота:
    navi.png
    вкладка пользователи, главная, etc. отображаются цветом:
    Код:
    #a5cae4;
    если смотреть через firebug
    Код:
    .navTabs .navTab.PopupClosed .navLink {color: #a5cae4; }
    Не нашел параметров этих ссылок в админке через редактирование стилей, хоть убейся.
    Мне нужно выставить цвет этих ссылок rgb (153, 153, 153 ). Собственно также как и вкладка форум, которая отображается как мне нужно.
    Вобщем нужно поменять цвет самих ссылок и hover этих ссылок при наведении. Также собственно как выбранная вкладка форум.
    Полез в navigation.css не нашел нигде этого цвета - #a5cae4
    Кстате говоря в админке есть только NavTabLinkHover, а того что мне нужно, а именно navLinkHover нету.
     
  2. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    Ну просто Вы не совсем представляете себе, как вообще работает ксен :)
    На самом деле надо было искать в шаблонах строку:
    Код:
    .navTabs .navTab.PopupClosed .navLink
    Это бы Вам дало найти шаблон navigation.css.
    Ну а в нем уже нашли бы такую конструкцию:
    Код:
      .navTabs .navTab.PopupClosed .navLink
       {
         color: @primaryLighter;
       }
    Ну и там дальше, думаю, тоже найдете интересующий Вас код.

    Теперь разберемся, а где же номер цвета? Тут все просто. Вместо жестко заданного цвета здесь лишь переменные с указанием на параметры в стиле. Соответственно, можно прямо в админке в поиске вбить primaryLighter и сразу же найти нужное свойство стиля, где и редактируется сие.

    Сразу предупреждаю. Ни в коем случае не редактируйте файл navigation.css. Если уж надо жестко прописать что-то в CSS, то это сделайте через EXTRA.css, в который впишите нужный Вам код. Чтобы переопределить иногда потребуется указать !important.

    Также, если хотите изменить стиль, то можно создать свой, который будет дочерним к изменяемому. Ну и там уже делайте все, что хотите.

    Все это позволит в дальнейшем безболезненно обновляться.
     
    Mirovinger нравится это.
  3. Dimanok

    Dimanok Новичок

    Регистрация:
    12.09.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.4.0
    Да, я имел дело только с IPB ) В ксене я новичок. Спасибо за ответ.
     
  4. Dimanok

    Dimanok Новичок

    Регистрация:
    12.09.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.4.0
    Еще один вопросик возник, подскажите пожалуйста если сможете.
    Хочу добавить свое меню выше логин-бара ( в самом верху страницы ).
    Создал шаблон - menu
    Добавил css в EXTRA.css
    Так куда же мне пихать сам инклуд шаблона <xen:include template="menu" /> ?
    Пробовал в header - получается над самим лого, под полосой логина.
    Пробовал в login_bar - меню вообще не отображается, а формы входа при нажатии логин сьезжают.
    Нашел шаблон PAGE CONTAINER я так понимаю сюда мне нужно. Куда только не пихал меню не хочет отображаться.
    Стиль стандартный. Вот код шаблона menu
    Код:
    <div class="menu">
    <ul class="menu">
            <li><a href="/">Главная</a></li>
            <li><a href="#">Новости</a>
                <ul>
                    <li><a href="#">Наука</a></li>
                    <li><a href="#">Культура</a></li>
                    <li><a href="#">Образование</a></li>
                </ul>
            </li>
            <li><a href="#">Статьи</a>
                <ul>
                    <li><a href="#">Дизайн</a></li>
                    <li><a href="#">Программирование</a></li>
                    <li class="dir"><a href="">Оптимизация</a>
                        <ul>
                            <li><a href="#">В Google</a></li>
                            <li><a href="#">В Yandex</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Маркетинг</a></li>
                </ul>
            </li>
            <li><a href="/about">О сайте</a></li>
        </ul>
        </div>
    
    CSS в EXTRA
    Код:
    .menu, .menu li ul{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    .menu{
        background-color: #242424;
        margin: 20px;
        float:left;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;    
        background: #7d7e7d;
        background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
        background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
        -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    4px 4px 5px rgba(50, 50, 50, 0.75);
        box-shadow:         4px 4px 5px rgba(50, 50, 50, 0.75);    
    }
    .menu > li{
        float:left;
        text-align: center;
        padding: 12px 30px;
        margin-left: 1px;
        cursor: pointer;
        border-radius:inherit;    
    }
    .menu > li ul{
        visibility: hidden;
        opacity:0;
        position:absolute;
        text-align: left;
        z-index:100;
        background-color:#393939;
        width:200px;    
        margin-top:25px;
       
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;        
       
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .menu > li > ul{
        margin-left:-13px;
        font-size:80%;
    }
    
    .menu > li > ul > li.dir{
        background:url('arrow.png') 96% center no-repeat;
    }
    
    .menu > li:hover > ul{ visibility:visible; opacity:1; margin-top:10px;}
    .menu > li:hover > a{ color:white; }
    .menu > li:hover, .menu > li > ul li:hover{
        background: #6db3f2;
        background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #1e69de 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(40%,#54a3ee), color-stop(100%,#1e69de));
        background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#1e69de 100%);
        background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#1e69de 100%);
        background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#1e69de 100%);
        background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#1e69de 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
    }
    .menu > li li{
        padding:8px 0 8px 10px;
        border-radius:inherit;
    }
    
    .menu > li > ul > li:hover > ul{  visibility:visible; opacity:1; margin-left:190px;}
    
    .menu > li > ul > li > ul{
        margin-left:210px;
        margin-top:-17px;
        width:220px;
    }
    .menu > li a{
        text-decoration: none;
        color: #D1D1D1;
        display:block;
    }
    
    Так куда же его воткнуть, чтобы оно было выше строки логин-бара ?

    Заранее спасибо.
     
    Последнее редактирование: 15 сен 2014
  5. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.321
    Версия XF:
    1.5.9
    Я так подозреваю, что логин жестко прописывается с помощью CSS к верху страницы. Поэтому попытка впихнуть что-то перед ним без изменения CSS не получится. Я в этом не специалист, так что ждите ответа спецов.

    А по поводу, куда же добавить, то используйте TMS или штатный аналог для внедрения своего кода в любой нужный шаблон (так будет проще потом обновляться). Ну и да, можно по идее в шаблон логина это впихнуть перед ним.
     
  6. Dimanok

    Dimanok Новичок

    Регистрация:
    12.09.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.4.0
    Спасибо за ответы, я разобрался.
    Да, действительно как и предполагал нужно было инклудить в PAGE CONTAINER перед логин баром.
    Проблема была только лиш в моем меню ).
     

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