Как поменять логотип и иконки DLE, зашитые в sprite.svg?

Как поменять логотип и иконки DLE, зашитые в sprite.svg? Инструкция для тех, кто измучился со стандартными шаблонами.

Как поменять логотип и иконки DLE, зашитые в sprite.svgНачиная с 11-версии шаблона в Green, Red и Default славные ребят из DataLife Engine зачем-то зашили лого, иконки, стрелки и прочие элементы интерфейса в файл sprite.svg. Конечно, с точки зрения скорости загрузки и современных технологий, это дело положительное, но обычный пользователь может с ума сойти от попытки поменять дизайн по умолчанию на что-то свое. 


Программисты почему-то думают, что каждый человек должен шарить в коде, как они, причем мануал по поводу редактирования SVG-файлов не говорит ничего.

Первый вариант


Первый вариант – смена логотипа из SVG на простую картинку. Для этого в шаблоне main.tpl нужно найти код: 
<!-- Логотип -->
<a class="logotype" href="/" title="Fozo.Info">
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
<span class="title_hide">Fozo.Info</span>
</a>
<!-- / Логотип -->

И поменять его на:

<!-- Логотип -->
<a class="logotype" href="/">
    <span class="logo_icon"><img class="icon icon-logo" src="{THEME}/images/logo.png" alt="logo"></span>
    <span class="logo_title">Fozo.Info</span>
</a>
<!-- / Логотип ?

При этом саму картинку в формате .png нужно нарисовать и загрузить в папку imagesвашего шаблона.


К слову, сам логотип может быть и в .jpg и в любом другом формате, просто в этом случае он не будет прозрачным. Если шаблон перекрашивается в один цвет, то почему бы и не создать маленькую картинку .jpg. Она будет весить мало, и грузиться быстро.


Размеры логотипа меняются в файле css/styles.css в папке шаблона. Там нужно найти строчку:


/* --- Иконки --- */
.icon {
    display: inline-block;
    width: 1em; height: 1em;
    fill: #919191;
    vertical-align: middle;
}
    .icon-logo { width: 42px; height: 42px; }

Соответственно, нужно поменять последние параметры icon-logo на свои.


Второй вариант


Второй вариант замены логотипа – это непосредственно изменение sprite.svg. Чем открыть этот файл?


Для начала — обычным блокнотом. Щелкните по нему правой кнопкой и выберете «Открыть блокнотом». Найдите там начало нашего логотипа:

<symbol id="icon-logo" viewBox="0 0 1024 1024">

Далее нужно зайти на любой онлайн-редактор SVG-файлов.


Например, на https://jarjad.ru/svg-editor/. В сети их довольно много, просто не все знают, как пользоваться. Если вставить код прямо из SVG, то там не отобразиться ничего.


Нажмите в редакторе Ctrl+U (либо зайдите «Просмотр — Код для вставки» и в размере по умолчанию выставите размеры логотипа на 1600:

<svg width="1600" height="1600" xmlns="http://www.w3.org/2000/svg">

Затем вставьте код из файла sprite.svg, где описываются параметры логотипа, в редактор между svg width строчкой и концом файла </svg>:

<path class="path1" d="M736.305 202.362l-24.381-4.876-199.924-197.486-99.962 104.838 190.171 102.4 134.095-4.876zM297.448 280.381l63.39-119.467-17.067 17.067-270.629 78.019 41.448 141.41 182.857-117.029zM889.905 553.448l-7.314-24.381 68.267-273.067-141.41-34.133 7.314 219.429 73.143 112.152zM134.095 468.114l7.314 24.381-68.267 275.505 141.41 34.133-7.314-219.429-73.143-114.59zM287.695 821.638l24.381 4.876 199.924 197.486 99.962-104.838-190.171-102.4-134.095 4.876zM726.552 743.619l-63.39 119.467 17.067-17.067 270.629-78.019-41.448-141.41-182.857 117.029zM675.352 724.114l7.314-14.629 168.229-99.962-51.2-87.771-104.838 112.152-19.505 90.21zM775.314 472.99l-9.752-14.629-2.438-197.486-102.4 2.438 43.886 146.286 70.705 63.39zM611.962 263.314h-17.067l-170.667-97.524-48.762 90.21 146.286 36.571 90.21-29.257zM316.952 614.4l-68.267-65.829 9.752 14.629 2.438 197.486 102.4-2.438-46.324-143.848zM348.648 299.886l-9.752 17.067-168.229 99.962 51.2 87.771 104.838-112.152 21.943-92.648zM412.038 760.686h17.067l170.667 97.524 48.762-90.21-146.286-36.571-90.21 29.257z"></path>

Ваш логотип откроется в редакторе огромным. Зажмите ALT и колесиком мыши отмасштабируйте до нужного размера.

Далее в редакторе можно зайти в Shape Library, где можно выбрать другое лого. Также посредством инструментов — фигурок, линий и пера можно нарисовать свой новый логотип.


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


Соответственно, после рисования/написания опять нужно зайти в код для вставки в онлайн-редакторе и скопировать (только то, что нужно, без размеров:

<symbol id="icon-logo" viewBox="0 0 1024 1024">
<title>Fozo.info</title>
<text stroke="null"  xml:space="preserve" text-anchor="start" font-family="'Courier New', Courier, monospace" font-size="450" id="svg_3" y="634" x="-60" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#ffffff">FOZO</text>

Можете использовать прямо этот код, если текстовое название вас устраивает.


Дополнительно для редактирования SVG можно использовать сервис https://codepen.io/pen/. Сервис удобен тем, что при изменении кода сразу видны визуальные изменения. Если там ничего не отображается, можно поиграть параметрами и y,размером шрифта font-size. Те же параметры придется дорабатывать потом в sprite.svg для точной координации логотипа.


Результат может и не очень красивый, но зато скорость загрузки не страдает, и все ушло минут 5. Потом, правда, мы вообще от логотипа отказались. Но не суть, главное - работает!


Конечно, профессиональный верстальщик и программист наверняка напишет более логичный код, но для «чайников» такая смена логотипа в SVG в штатных шаблонах DLE вполне подойдет.

Похожие новости

Добавить комментарий

Автору будет очень приятно узнать обратную связь о своей новости.

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0