Jump to content

Клик на лого


Escape
 Share

Recommended Posts

Как сделать, чтобы при нажатии на изображение перекидывало на гл.страничку? но, что бы клик был не по всей шапке а по этому прямоугольнику (скрин ниже)

12312313123123123.thumb.png.7c43106ef790

Вот код "logo"

{{if \IPS\Theme::i()->logo['front']['url'] !== null }}
{{$logo = \IPS\File::get( 'core_Theme', \IPS\Theme::i()->logo['front']['url'] )->url;}}
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>
{{else}}
<br><br><br><br>
{{endif}}

 

12312313123123123.png

Link to comment
Share on other sites

1 час назад, Escape сказал:

Как сделать, чтобы при нажатии на изображение перекидывало на гл.страничку? но, что бы клик был не по всей шапке а по этому прямоугольнику (скрин ниже)

12312313123123123.thumb.png.7c43106ef790

Вот код "logo"

{{if \IPS\Theme::i()->logo['front']['url'] !== null }}
{{$logo = \IPS\File::get( 'core_Theme', \IPS\Theme::i()->logo['front']['url'] )->url;}}
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>
{{else}}
<br><br><br><br>
{{endif}}

 

12312313123123123.png

Вместо 

href='{setting="base_url"}'

Пропиши 

href='/'
Link to comment
Share on other sites

Ну или находишь у себя  ipsLayout_header

Над ним вставляешь код картинки с url к примеру 

<a href="https://diktum.ru/" id="elLogo" accesskey="1" class="logo justImage"><span class="vAlign"><img src="https://diktum.ru/uploads/monthly_2015_11/5643616a25d0c_.png.ed46bec884b5f253ac383500c9abc50e.png" alt="Диктум Фактум"></span></a>

Картинку сам подбираешь по размеру. Можешь например взять просто прозрачный прямоугольник если тебе нужно и с помощью css делаешь.
В данном случае будет:

a#elLogo {
 position: absolute;
top: 0;
left: 0;
z-index: 10;
}

и с помощью top  и left ставишь куда тебе нужно.

logo.png

Link to comment
Share on other sites

18 минут назад, andros0789 сказал:

Вместо 

href='{setting="base_url"}'

Пропиши 

href='/'

не помогло

9 минут назад, SoNWarrioR сказал:

Ну или находишь у себя  ipsLayout_header

Над ним вставляешь код картинки с url к примеру 

<a href="https://diktum.ru/" id="elLogo" accesskey="1" class="logo justImage"><span class="vAlign"><img src="https://diktum.ru/uploads/monthly_2015_11/5643616a25d0c_.png.ed46bec884b5f253ac383500c9abc50e.png" alt="Диктум Фактум"></span></a>

Картинку сам подбираешь по размеру. Можешь например взять просто прозрачный прямоугольник если тебе нужно и с помощью css делаешь.
В данном случае будет:

a#elLogo {
 position: absolute;
top: 0;
left: 0;
z-index: 10;
}

и с помощью top  и left ставишь куда тебе нужно.

logo.png

Другого способа нет? Как то это не, то. Накладывать изображение на изображение 

Link to comment
Share on other sites

2 минуты назад, Escape сказал:

не помогло

Другого способа нет? Как то это не, то. Накладывать изображение на изображение 

Убей меня придурка, но я не вижу у тебя лого на сайте. Вижу что шапку ты поменял и на фоне у тебя типа лого.

Link to comment
Share on other sites

18 минут назад, SoNWarrioR сказал:

Убей меня придурка, но я не вижу у тебя лого на сайте. Вижу что шапку ты поменял и на фоне у тебя типа лого.

Прости видимо я не так выразился.

У меня установлен плагин , который заменяет задний фон шапки.

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

Link to comment
Share on other sites

11 минут назад, Escape сказал:

Прости видимо я не так выразился.

У меня установлен плагин , который заменяет задний фон шапки.

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

еще раз прочти свой вопрос, и поймешь что речь оказывается идет о невозможном. Лого не судьба вставить?  И фон нормально сделать без плагинов всяких.

Вот вставь в GlobalTemplate сразу после <body>:

<div id="base-background">

 <div class="video-container show">
 <video id="background-video" autoplay="" loop="" name="media" preload="auto">
 <source media="screen" src="http://eaassets-a.akamaihd.net/battlelog/background-videos/bg-video.webm" type="video/webm">
 <source media="screen" src="http://eaassets-a.akamaihd.net/battlelog/background-videos/bg-video.ogg" type="video/ogg">
 <source media="screen" src="http://eaassets-a.akamaihd.net/battlelog/background-videos/bg-video.mp4" type="video/mp4">
 </video>
 </div>
 

 </div>

Это в стили ваши:

@media screen and (min-width: 1261px) {
    html:not(.is-touch) body:not(.no-comcenter) #base-background {
        margin-left: -237px;
    }
    html:not(.is-touch) body:not(.no-comcenter) .no-comcenter #base-background {
        margin-left: 0;
    }
    #base-background {
        background: #230d0d url(//d34ymitoc1pg7m.cloudfront.net/bf4/backgrounds/bg-video-overlay-dcc29baf.jpg) 50% 0 no-repeat;
        text-align: center;
    }
    #base-background .video-container {
        height: 960px;
        width: 1920px;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -960px;
        opacity: 0;
        overflow: hidden;
        -webkit-transition: opacity 8s ease;
        -moz-transition: opacity 8s ease;
        transition: opacity 8s ease;
    }
    #base-background .video-container.show {
        opacity: 1;
    }
    #base-background .video-container video {
        outline: none;
    }
    #base-background {
        position: fixed;
        background-color: black;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #background-video {
        outline: none;
    }

И будет красивый видео фон как у меня например.

566d6bced7b7d_.thumb.JPG.68058643a358343

Link to comment
Share on other sites

9 минут назад, Escape сказал:

Прости видимо я не так выразился.

У меня установлен плагин , который заменяет задний фон шапки.

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

Смотри - ты заменил шапку - изображением. Лого убрал....

Ничего сами делать не хотят)

Вверху я подробно описывал что сделать. Ну если нужно так то вот.

находишь у себя  ipsLayout_header

Над ним вставляешь код картинки с url к примеру 

<div id="newpp"><a id="newppp" href="#"><div id="newpp"></div></a></div>

и css управляешь

div#newpp {
  position: absolute;
  top: 1.75%;
  left: 15%;
  z-index: 10;
  height: 120px;
  width: 320px;
}

 

logo.png

logo.png

Ленивые задницы

Link to comment
Share on other sites

4 минуты назад, SoNWarrioR сказал:

Смотри - ты заменил шапку - изображением. Лого убрал....

Ничего сами делать не хотят)

Вверху я подробно описывал что сделать. Ну если нужно так то вот.

находишь у себя  ipsLayout_header

Над ним вставляешь код картинки с url к примеру 

<div id="newpp"><a id="newppp" href="#"><div id="newpp"></div></a></div>

и css управляешь

div#newpp {
  position: absolute;
  top: 1.75%;
  left: 15%;
  z-index: 10;
  height: 120px;
  width: 320px;
}

 

logo.png

logo.png

Ленивые задницы

трудно же почитать людям что и как))) лень скоро заполонит все и везде

Link to comment
Share on other sites

18 минут назад, SoNWarrioR сказал:

Смотри - ты заменил шапку - изображением. Лого убрал....

Ничего сами делать не хотят)

Вверху я подробно описывал что сделать. Ну если нужно так то вот.

находишь у себя  ipsLayout_header

Над ним вставляешь код картинки с url к примеру 

<div id="newpp"><a id="newppp" href="#"><div id="newpp"></div></a></div>

и css управляешь

div#newpp {
  position: absolute;
  top: 1.75%;
  left: 15%;
  z-index: 10;
  height: 120px;
  width: 320px;
}

 

logo.png

logo.png

Ленивые задницы

тогда в мобильной версии вот что:

 

EGWSEVkh1Ws.jpg

Link to comment
Share on other sites

53 минут назад, SoNWarrioR сказал:

%!№;!%*" %*!"!"? %:!%? !!!!!!

Вот. Держи

@media screen and (max-width: 979px) {

          div#newpp {
			display: none;
          }

}

 

Вставил в css, после этого у меня форум перестал работать.

Link to comment
Share on other sites

В 14.12.2015 в 14:49, SoNWarrioR сказал:

Вы я надеюсь вставили хотя бы в custom.css и не внутрь другого @media?

Да.

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

Link to comment
Share on other sites

Вам в примере давали код где 

<a id="newppp" href="#">

вместо сеточки # вставили ссылку ? Она и отвечает за переход , куда укажете, туда и перейдёт.

Link to comment
Share on other sites

12 часов назад, Escape сказал:

Да.

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

Для мобильной версии я вам Лого убрал. 

display: none;

Вы можете подогнать сами размер, открыв сайт в мобильной версии. Так же, у вас Шапка респонсивная - а значит будет сделать тяжело. Или делайте отдельно лого от шапки, или ковыряйте css, чтобы подогнать размеры лого под разрешения экрана.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...