Заменяем графический логотип на текстовый

[Mirovinger]

Mirovinger добавил(а) новый ресурс:

Заменяем графический логотип на текстовый - Заменяем графический логотип на текстовый средствами less/css

Посмотреть вложение 75876
Заменить графический логотип на текстовой без правки шаблонов, можно воспользовавшись средствами less/css.
Для этого в шаблон - extra.less, добавить такой код.

/* Текстовый логотип =============== */

/* Основной логотип, используется как в полной так и адаптивной вёрстке */
    .header-logo-content-before() {
        content: "xenForo.info";
        font-weight: bold;
    }

.p-header-logo.p-header-logo--image {
   
    img {...

Узнать больше об этом ресурсе...

 

[PlayStation]

Как поменять на свой шрифт, при замене на свой ничего не меняется, беру от седава

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 font-weight: bold;

 

[Mirovinger]

Здорово, шрифт подключили, прописали?
То что жирным сделали, это хорошо.

 

[PlayStation]

Mirovinger, Но в обзоре не написано шрифт подключить и как это сделать, я думал достаточно название шрифта указать какой нужен.

 

[Mirovinger]

Извините, но прописные истины из гугла, тем более на форуме не раз описывалось, как это можно сделать.
И Вы название шрифта нигде не указали по сути.

 

[PlayStation]

Mirovinger, Я менял название шрифта (bold)

 

[zBlock]

Mirovinger, Я менял название шрифта (bold)

Это вообще то свойства шрифта.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Кароче качаешь нужный себе шрифт и заливаешь на хост и потом:

@font-face {
    font-family: Roboto; /* Имя шрифта */
    src: url(Roboto.woff); /* Путь к файлу со шрифтом */
}

Вставляешь этот код.

 

[RusyaPlay]

Странно,у меня на XF 2.0.0 Beta 2 не сработало.
upd
извиняюсь,все отлично

 

[PlayStation]

PerfectUser, Так это поменяется шрифт по всему форуму? мне надо только что бы на логотипе поменялось.

P.S всё сделал но шрифт так и не поменялся =(

@font-face {
    font-family: Emotion Engine; /* Имя шрифта */
    src: url(https://suite.com/Emotion_Engine_Bold.otf); /* Путь к файлу со шрифтом */
}

 

[nond]

Подскажите, на мобильном шаблоне остаётся графический логотип. Как сделать текстовый и на мобильном шаблоне?

 

[Mirovinger]

Точно всё верно сделали?
Там учтено и это, только если у Вас стиль изменённый, тогда нужно смотреть у Вас.

 

[nond]

Точно всё верно сделали?
Там учтено и это, только если у Вас стиль изменённый, тогда нужно смотреть у Вас.

Сейчас перепроверил, код был не полным. Все работает корректно. Размер выставил 18px для шрифта, вместо 20, иначе не влазит.
Как вариант может в % соотношении задать, чтобы адаптировался размер текста к длине строки.

 

[Mirovinger]

Код открытый, так что изменяйте под себя как угодно.

 

[asanohin]

Подскажите, а что прописать в коде чтобы буквы были более объемные и с тенью как на этом сайте?

 

[Mirovinger]

Можно так.

/* Текстовый логотип */

    .header-logo-content-before() {
        content: "xenForo.Info";
        font-weight: bold;
        text-shadow: 3px 3px 3px #333333;
    }

.p-header-logo.p-header-logo--image {
    
    img {
         display: none;
    }
    
    a {
        &:before {
            .header-logo-content-before;
            font-size: 2em;
        }
        
        &:after {
            content: "- Ваш путеводитель по миру xenForo";
            position: relative;
            top: -2px;
            text-shadow: 3px 3px 3px #333333;
        }
    }
}
@media (max-width: @xf-responsiveMedium) {
    .p-nav-inner .p-nav-smallLogo {
        max-width: 150px;
        
        img {
          display: none;
        }

        a {       
            &:before{
                .header-logo-content-before;
                font-size: 20px;
            }
            
            &:hover {
                text-decoration: none;
            }
        }
    }
}
/* / Текстовый логотип */

 

[freeorel]

Mirovinger, есть предложение к вам, добавить ротацию в часть слогана, там где "- Ваш путеводитель по миру xenForo", менять при обновлении страницы или по переходу по форуму.
Тоесть каждый раз новое предложение будет, как пример:
1. "- Ваш путеводитель по миру xenForo"
2. "- лучший из лучших! "
3. "- профессиональная техподдержка"
4. ...

Есть скрипт на Джаве ,

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

<script language="JavaScript"><!--
var h=(Math.random()*5);
 if (h <1) document.writeln("Текст 1");
 if (h > 1 && h < 2) document.writeln("Текст 2");
 if (h > 2 && h < 3) document.writeln("Текст 3");
 if (h > 3 && h < 4) document.writeln("Текст 4");
 if (h > 4 && h < 5) document.writeln("Текст 5");

// --></script>

Можно реализовать такое?

 

[Captain]

Можно

 

[viper]

Всех с НГ! Народ, подскажите как сделать графический на десктопе, текстовый на мобиле? чёт пару вариантов потыкал - нифига, а косяков исправлять предостаточно(обновил ночью рабочий с 1.5.x до 2.1)чтоб на одном месте топтаться. Спасибо.

 

[Magix]

Всех с НГ! Народ, подскажите как сделать графический на десктопе, текстовый на мобиле? чёт пару вариантов потыкал - нифига, а косяков исправлять предостаточно(обновил ночью рабочий с 1.5.x до 2.1)чтоб на одном месте топтаться. Спасибо.

Использовать media запросы и там уже display: none;.

 

[Captain]

Всех с НГ! Народ, подскажите как сделать графический на десктопе, текстовый на мобиле? чёт пару вариантов потыкал - нифига, а косяков исправлять предостаточно(обновил ночью рабочий с 1.5.x до 2.1)чтоб на одном месте топтаться. Спасибо.

/* Текстовый логотип для адаптивного дизайна */
@media (max-width: @xf-responsiveMedium) {
    .p-nav-inner .p-nav-smallLogo {
        max-width: 150px;
     
        img {
          display: none;
        }

        a {    
            &:before{
                content: "xenForo.Info";
                font-weight: bold;
                font-size: 20px;
            }
         
            &:hover {
                text-decoration: none;
            }
        }
    }
}
/* / Текстовый логотип  ==============*/

Ну а на десктопе просто настройки стиля.