Главная страница / Изменения в шаблонах DLE при обновлении
Изменения в шаблонах DLE при обновлении
Внесение изменений в шаблоны осуществляется в порядке очередности от версии к версии, в зависимости от той версии с которой вы обновлялись. Например вы проводили обновление скрипта DLE с версии 17.2 до версии 18.1, то в данном случае вам нужно поочередно вносить изменения, сначала те, которые были между версиями 17.2 и 17.3, потом изменения которые были между версиями 17.3 и 18.0, потом изменения между версиями 18.0 и 18.1 и т. д.
Чтобы сэкономить время на обновление CSS шаблона, все стили для DLE от 15.0 и выше добавлены в CSS файл update_style_dle.css, можете его скачать, залить в папку с шаблоном и подключить его в шаблон, либо скопировать с него все стили, и добавить их в свой style.css, или любой другой файл стилей. И дальше уже выполнить только правки по файлам шаблонам, если нужно будет.
<link href="{THEME}/style/update_style_dle.css?v={cache-id}" type="text/css" rel="stylesheet">
- Добавьте в CSS стили вашего шаблона:
.quote_link { float: right; } .quote_link svg { color: #6c838e; vertical-align: middle; }
- Из шаблона находящегося в общей папке templates/rss.tpl полностью удалите секцию:
где многоточие это все что находится между этими тегами.[turbo]...[/turbo]
- Добавьте в CSS стили вашего шаблона:
.pm th{ text-align: left; font-weight: 500; white-space: nowrap; } .pm th.pm_checkbox { text-align: center; } .pm_list.pm_subj, .pm_list.pm_icon, .pm_list.pm_last_user { cursor: pointer; } .pm_list.pm_icon svg { width: 1.4rem; height: 1.4rem; vertical-align: middle; } .pm_list.pm_icon.pm-unread-image { color: #3394e6; } .pm td.pm_list.pm_icon, .userstop td, th.pm_head.pm_icon { border-bottom: none; } .pm_list.pm_icon.pm-reply-image { color: #087e02c4; } .pm_list.pm_icon.pm-read-image { color: #afafaf; } .pm_list .pm_last_message, .pm_list .pm_last_date, .pm_list .pm_with_user { color: #64748b; font-size: .8rem; } .pm tbody > tr:hover { background-color: #e2e8f099; } .pm_navigation { margin-top: 1rem; } .pm_navigation .navigation { display: inline-block; color: #333333; background-color: #f5f5f5; border-radius: 0.188rem; padding: .4rem; } .pm_navigation .navigation a, .pm_navigation .navigation span { padding: 0.5rem; min-width: 2.25rem; } .pm_navigation .navigation span { background-color: #4581d0; color: #fff; } .pm_navigation .navigation a { text-decoration: none; color: #000; } .pm_navigation .navigation a:hover { background-color: #e2e8f0; }
- Необходимо адаптировать шаблон pm.tpl под новую систему персональных сообщений:
Ключевым изменением является то, что теперь блок вывода сообщений в переписке находится внутри блока тегов [messages] …[/messages] которые в свою очередь находятся внутри блока тегов [readpm] … [/readpm] а также блок чтения перески содержи теги вывода редактора. Пример структуры блоков:
В качестве примера построения шаблона можете использовать код из стандартного шаблона:[readpm] Тема сообщения: {subj} [messages] Код для вывода сообщений [/messages] Ответ на сообщение {editor} <button type="submit">Ответить</button> [/readpm]
<article class="box story"> <div class="box_in"> <h1 class="title h1">Личные сообщения</h1> <div class="pm-box"> <nav id="pm-menu"> [inbox]<span>Список сообщений</span>[/inbox] [new_pm]<span>Написать новое сообщение</span>[/new_pm] </nav> <div class="pm_status"> {pm-progress-bar} {proc-pm-limit} % / ({pm-limit} сообщений) </div> </div> [pmlist] <div class="pmlist"> {pmlist} </div> [/pmlist] [newpm] <h4 class="heading">Создать сообщение</h4> <div class="addform addpm"> <ul class="ui-form"> <li class="form-group combo"> <div class="combo_field"> <input placeholder="Имя адресата" type="text" name="name" value="{author}" class="wide" required> </div> <div class="combo_field"> <input placeholder="Тема сообщения" type="text" name="subj" value="{subj}" class="wide" required> </div> </li> <li id="comment-editor">{editor}</li> [recaptcha] <li>{recaptcha}</li> [/recaptcha] [question] <li class="form-group"> <label for="question_answer">Вопрос: {question}</label> <input placeholder="Ответ" type="text" name="question_answer" id="question_answer" class="wide" required> </li> [/question] </ul> <div class="form_submit"> [sec_code] <div class="c-captcha"> {sec_code} <input placeholder="Повторите код" title="Введите код указанный на картинке" type="text" name="sec_code" id="sec_code" required> </div> [/sec_code] <button class="btn btn-big" type="submit" name="add"><b>Отправить</b></button> <button class="btn-border btn-big" type="button" onclick="dlePMPreview()">Предпросмотр</button> </div> </div> [/newpm] </div> </article> [readpm] <div class="comments"> <div class="box"> <h4 class="heading">{subj}</h4> <div class="com_list"> [messages] <div class="comment"> <div class="com_info"> <div class="avatar"> <span class="cover" style="background-image: url({foto});">{login}</span> [online]<span class="com_online" title="{login} - онлайн">Онлайн</span>[/online] </div> <div class="com_user"> <b class="name">{author}</b> <span class="grey"> написал: {date} </span> </div> <div class="meta"> <ul class="left"> <li class="edit_btn" title="Редактировать"> [pm-edit]<i title="Редактировать">Редактировать</i>[/pm-edit] </li> <li class="reply grey" title="Цитировать"> [reply]<svg class="icon icon-reply"><use xlink:href="#icon-coms"></use></svg><span>Цитировать</span>[/reply] </li> <li class="reply grey" title="Игнорировать"> [ignore]<svg class="icon icon-reply"><use xlink:href="#icon-dislike"></use></svg><span>Игнорировать</span>[/ignore] </li> <li class="complaint" title="Жалоба"> [complaint]<svg class="icon icon-bad"><use xlink:href="#icon-bad"></use></svg><span class="title_hide">Жалоба</span>[/complaint] </li> <li class="del" title="Удалить"> [del]<svg class="icon icon-cross"><use xlink:href="#icon-cross"></use></svg><span class="title_hide">Удалить</span>[/del] </li> </ul> </div> </div> <div class="com_content"> <div class="text">{text}</div> [signature]<div class="signature">--------------------<br>{signature}</div>[/signature] </div> </div> [/messages] </div> <div class="box_in form-sep"> <h3>Ответить на сообщение</h3> {editor} <br><button class="btn btn-big" type="submit" name="submit" title="Ответить"><b>Ответить</b></button> </div> </div> </div> [/readpm]
- Уберите из шаблона добавления новостей addnews.tpl теги отвечающие за вывод BBCODES редактора и замените их на теги вывода визуального редактора.
- В случае если ранее вы использовали редактор Floara для написания новостей, то вам необходимо взять из файла engine/editor/css/default.css вашей старой версии, с которой вы обновлялись, стили CSS и внести их напрямую в стили своего шаблона. Если использовались другие редакторы, то выполнение данного пункта не требуется.
- Добавьте в CSS стили вашего шаблона:
.ui-dialog-buttonset button.ui-button-delete { background-color: #f44336; border-color: #f44336; color: #fff; text-shadow: 1px 1px 2px rgba(51, 51, 51, .5); } .ui-dialog-buttonset button.ui-button-delete:hover { background-color: #db3a2f; border-color: #db3a2f; color: #fff; text-shadow: 1px 1px 2px rgba(51, 51, 51, .5); } .form-check-label { cursor: pointer; } .form-check-input { color: #0c5f7eed; flex-shrink: 0; width: 1.12rem; height: 1.12rem; margin: -0.188rem 0.625rem 0 0; appearance: none; background-color: transparent; background-image: none; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid #0c5f7eed; vertical-align: middle; } .form-check-input:checked[type=checkbox] { background-image: url("dаta:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c5f7eed' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type=radio] { background-image: url("dаta:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230c5f7eed'/%3e%3c/svg%3e"); } .form-check-input[type=checkbox] { border-radius: .25rem; } .form-check-input[type=radio] { border-radius: 50%; }
- Необходимо адаптировать шаблон pm.tpl под новую систему персональных сообщений:
Ключевым изменением является то, что теперь блок вывода сообщений в переписке находится внутри блока тегов [messages] …[/messages] которые в свою очередь находятся внутри блока тегов [readpm] … [/readpm] а также блок чтения перески содержи теги вывода редактора. Пример структуры блоков:
В качестве примера построения шаблона можете использовать код из стандартного шаблона:[readpm] Тема сообщения: {subj} [messages] Код для вывода сообщений [/messages] Ответ на сообщение {editor} <button type="submit">Ответить</button> [/readpm]
<article class="box story"> <div class="box_in"> <h1 class="title h1">Личные сообщения</h1> <div class="pm-box"> <nav id="pm-menu"> [inbox]<span>Список сообщений</span>[/inbox] [new_pm]<span>Написать новое сообщение</span>[/new_pm] </nav> <div class="pm_status"> {pm-progress-bar} {proc-pm-limit} % / ({pm-limit} сообщений) </div> </div> [pmlist] <div class="pmlist"> {pmlist} </div> [/pmlist] [newpm] <h4 class="heading">Создать сообщение</h4> <div class="addform addpm"> <ul class="ui-form"> <li class="form-group combo"> <div class="combo_field"> <input placeholder="Имя адресата" type="text" name="name" value="{author}" class="wide" required> </div> <div class="combo_field"> <input placeholder="Тема сообщения" type="text" name="subj" value="{subj}" class="wide" required> </div> </li> <li id="comment-editor">{editor}</li> [recaptcha] <li>{recaptcha}</li> [/recaptcha] [question] <li class="form-group"> <label for="question_answer">Вопрос: {question}</label> <input placeholder="Ответ" type="text" name="question_answer" id="question_answer" class="wide" required> </li> [/question] </ul> <div class="form_submit"> [sec_code] <div class="c-captcha"> {sec_code} <input placeholder="Повторите код" title="Введите код указанный на картинке" type="text" name="sec_code" id="sec_code" required> </div> [/sec_code] <button class="btn btn-big" type="submit" name="add"><b>Отправить</b></button> <button class="btn-border btn-big" type="button" onclick="dlePMPreview()">Предпросмотр</button> </div> </div> [/newpm] </div> </article> [readpm] <div class="comments"> <div class="box"> <h4 class="heading">{subj}</h4> <div class="com_list"> [messages] <div class="comment"> <div class="com_info"> <div class="avatar"> <span class="cover" style="background-image: url({foto});">{login}</span> [online]<span class="com_online" title="{login} - онлайн">Онлайн</span>[/online] </div> <div class="com_user"> <b class="name">{author}</b> <span class="grey"> написал: {date} </span> </div> <div class="meta"> <ul class="left"> <li class="edit_btn" title="Редактировать"> [pm-edit]<i title="Редактировать">Редактировать</i>[/pm-edit] </li> <li class="reply grey" title="Цитировать"> [reply]<svg class="icon icon-reply"><use xlink:href="#icon-coms"></use></svg><span>Цитировать</span>[/reply] </li> <li class="reply grey" title="Игнорировать"> [ignore]<svg class="icon icon-reply"><use xlink:href="#icon-dislike"></use></svg><span>Игнорировать</span>[/ignore] </li> <li class="complaint" title="Жалоба"> [complaint]<svg class="icon icon-bad"><use xlink:href="#icon-bad"></use></svg><span class="title_hide">Жалоба</span>[/complaint] </li> <li class="del" title="Удалить"> [del]<svg class="icon icon-cross"><use xlink:href="#icon-cross"></use></svg><span class="title_hide">Удалить</span>[/del] </li> </ul> </div> </div> <div class="com_content"> <div class="text">{text}</div> [signature]<div class="signature">--------------------<br>{signature}</div>[/signature] </div> </div> [/messages] </div> <div class="box_in form-sep"> <h3>Ответить на сообщение</h3> {editor} <br><button class="btn btn-big" type="submit" name="submit" title="Ответить"><b>Ответить</b></button> </div> </div> </div> [/readpm]
- Уберите из шаблона добавления новостей addnews.tpl теги отвечающие за вывод BBCODES редактора и замените их на теги вывода визуального редактора.
- В случае если ранее вы использовали редактор Floara для написания новостей, то вам необходимо взять из файла engine/editor/css/default.css вашей старой версии, с которой вы обновлялись, стили CSS и внести их напрямую в стили своего шаблона. Если использовались другие редакторы, то выполнение данного пункта не требуется.
Изменений в шаблонах между данными версиями не требуется.
- Добавьте в CSS стили вашего шаблона:
.DLEPush { z-index: 2001; position: fixed; right: 20px; top: 20px } @keyframes DLEPush-show { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .DLEPush-notification.wrapper { animation-name: DLEPush-show; animation-duration: 1s; position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; color: #333; margin-bottom: 10px; width: 100%; max-width: 400px; box-shadow: 0 10px 15px rgb(0 0 0 / 20%); background-color: #fff; border-radius: 10px } .DLEPush-notification .DLEPush-icon { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; color: #fff; width: 45px; height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; text-align: center; } .DLEPush-notification .DLEPush-icon svg { scale: .8; } .DLEPush-notification .DLEPush-header { font-weight: 500; grid-column: 2; grid-row: 1; font-size: 1rem; margin-left: 1rem; margin-top: .5rem; } .DLEPush-notification .DLEPush-header:empty { margin-top: 0; } .DLEPush-notification .DLEPush-message { grid-column: 2; grid-row: 2; font-size: .875rem; margin: 1rem; } .DLEPush-notification .DLEPush-message li, .DLEPush-notification .DLEPush-message ul { list-style-type: none; padding-left: 0; } .DLEPush-notification .DLEPush-close { position: absolute; top: 8px; right: 10px; font-weight: 300; background: none; border: 0; font-size: 1.15rem; cursor: pointer; line-height: 1; padding: 0; color: inherit; outline: 0; opacity: 0.75; } @media only screen and (min-width: 601px) { .DLEPush-notification.wrapper { min-width: 400px; } } .DLEPush-notification .DLEPush-close:hover { opacity: 1; } .DLEPush-notification.wrapper.push-success { background-color: #e0f2f1; } .DLEPush-notification.wrapper.push-success .DLEPush-icon { background-color: #00897b; } .DLEPush-notification.wrapper.push-warning { background-color: #FFF3E0; } .DLEPush-notification.wrapper.push-warning .DLEPush-icon { background-color: #FF9800; } .DLEPush-notification.wrapper.push-error { background-color: #FBE9E7; } .DLEPush-notification.wrapper.push-error .DLEPush-icon { background-color: #FF5722; } input[type="text"].comments_author_field { width: 100%; margin-bottom: 10px; }
- Добавьте в CSS стили вашего шаблона:
.mce-accordion summary { cursor: pointer; } .self_delete_link { border: 0 none; display: inline-block; vertical-align: middle; cursor: pointer; padding: 12px 27px; border-radius: 10px; outline: none; background-color: #f44336; color: #fff; text-shadow: 0 1px #333; text-decoration: none !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); box-sizing: border-box; transition: all ease .1s; transition: all ease .1s; }
- Откройте файл userinfo.tpl и в нужном вам месте в секции редактирования профиля добавьте тег:
[delete]Удалить аккаунт[/delete]
-
Добавьте в CSS стили вашего шаблона:
.title_spoiler svg{ vertical-align: middle; margin-top: -4px; margin-right: 7px; height: 16px; width: 16px; }
-
В папке шаблона создайте файл fastsearchresult.tpl с содержимым:
<a href="{full-link}"><span class="searchheading">{title}</span><span>{short-story limit="150"}</span></a>
-
В файле шаблона userinfo.tpl проверьте корректность оформления тега {twofactor-auth} и при необходимости измените его оформление. В связи с тем что тип поля который выводит данный тег был изменен.
- Добавьте в CSS стили вашего шаблона:
.image-bordered { border: 1px solid #ddd; } .image-shadows { box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px; } .image-padded { padding: 0.5rem; } .comments-user-profile { font-weight: bold; cursor: pointer; color: #3394e6; }
- Откройте файл addnews.tpl и найдите:
Добавить новость
замените на:
{header-title}
- Откройте файл templates/rss.tpl и замените содержимое полностью на:
[rss]<item> <title>{title}</title> <guid isPermaLink="true">{rsslink}</guid> <link>{rsslink}</link> <dc:creator>{rssauthor}</dc:creator> <pubDate>{rssdate}</pubDate> <category>{category}</category> <description><![CDATA[{short-story}]]></description> </item>[/rss] [turbo]<item turbo="true"> <turbo:extendedHtml>true</turbo:extendedHtml> <link>{rsslink}</link> <author>{rssauthor}</author> <category>{category}</category> <pubDate>{rssdate}</pubDate> <turbo:content><![CDATA[<header><h1>{title}</h1></header>{full-story}]]></turbo:content> </item>[/turbo] [dzen]<item> <title>{title}</title> <link>{rsslink}</link> <pdalink>{rsslink}</pdalink> <guid>{news-id}</guid> <pubDate>{rssdate}</pubDate> <category>native-yes</category> {images} <content:encoded><![CDATA[{full-story}]]></content:encoded> </item>[/dzen]
- Добавьте в CSS стили вашего шаблона:
.comments-image-gallery { margin: 0; padding: 0; list-style: none; clear: both; } .comments-image-gallery li{ list-style: none; margin: 0; padding: 0; } .comments-image-gallery li img{ float: left; margin-right: 5px; border: 5px solid #fff; width: 100px; height: 100px; transition: box-shadow 0.5s ease; } .comments-image-gallery li img:hover { box-shadow: 0px 0px 7px rgba(0,0,0,0.4); } .mce-toc { border: 1px solid #dbdada; margin: 0 0 .7rem 0; } .mce-toc h2 { margin: 4px; } .mce-toc ul { padding-left: 20px; list-style: none; margin-top: 0; margin-bottom: 0; margin-block-start: 1em; margin-block-end: 1em; } .mce-toc ul ul { padding-left: 20px; margin-block-start: 0; margin-block-end: 0; } .mce-toc li { list-style-type: none; }
- Откройте файл addcomments.tpl и найдите:
<li id="comment-editor">{editor}</li>
ниже добавьте:
[image-upload]{image-upload}[/image-upload] [allow-comments-subscribe] <li>{comments-subscribe}</li> [/allow-comments-subscribe]
- Откройте файл comments.tpl и найдите:
<div class="text share-content">{comment}</div>
ниже добавьте:
[images]<div class="signature">--------------------</div><div class="clrfix">{images}</div>[/images]
Изменений в шаблонах между данными версиями не требуется.
- Добавьте в CSS стили вашего шаблона:
figure { margin: 0; } figure.align-left { float: left; } figure.align-right { float: right; } figure.image.align-center { display: table; margin-left: auto; margin-right: auto; } figure.image figcaption { padding: 1rem; background-color: #fafafa; font-size: .8rem; caption-side: bottom; word-break: break-word; text-align: center; } figure.image.align-center figcaption { display: table-caption; }
Изменений в шаблонах между данными версиями не требуется.
- Добавьте в CSS стили вашего шаблона:
/*--- Подсветка исходного кода ---*/ .hljs-comment, .hljs-quote { color: #a0a1a7; font-style: italic; } .hljs-doctag, .hljs-keyword, .hljs-formula { color: #a626a4; } .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e45649; } .hljs-literal { color: #0184bb; } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { color: #50a14f; } .hljs-built_in, .hljs-class .hljs-title { color: #c18401; } .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #986801; } .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #4078f2; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .hljs-link { text-decoration: underline; }
Изменений в шаблонах между данными версиями не требуется.
Изменений в шаблонах между данными версиями не требуется.
- Откройте файл css/engine.css и добавьте:
.emoji_box { width:100%; max-width: 390px; } .emoji_category { padding:7px; clear:both; } .emoji_list { margin-top:5px; margin-bottom:5px; width:100%; font-family:'Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'; font-size:2em; } .emoji_symbol { float:left; margin-bottom: 10px; width:12.5%; text-align:center; } .emoji_symbol a, .emoji_symbol a:hover { cursor: pointer; text-decoration:none; } .native-emoji { font-size: 1.3em; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'; }
- Откройте файл css/engine.css и добавьте:
.ui-front { z-index: 1000; } .ui-button-icon-only { overflow: hidden; text-indent: -9999px; }
Изменений в шаблонах между данными версиями не требуется.
- Откройте файл css/engine.css найдите:
.uploadedfile { display: inline-block; width: 115px; height: 140px; margin: 10px 5px 5px 5px; border:1px solid #B3B3B3; box-shadow: 0px 1px 4px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); text-align: center; background:#ffffff; } .uploadedfile .uploadimage { margin-top: 5px; width: 115px; height: 90px; display: table-cell; text-align: center; vertical-align:middle; }
Замените на:
.uploadedfile { display: inline-block; width: 115px; height: 160px; margin: 10px 5px 5px 5px; border:1px solid #B3B3B3; box-shadow: 0px 1px 4px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); text-align: center; background:#ffffff; } .uploadedfile .uploadimage { margin-top: 5px; width: 115px; height: 90px; display: flex; align-items: center; justify-content: center; cursor: move; cursor: -webkit-grabbing; } .sortable-ghost { opacity: 0.4; }
- В файлах shortstory.tpl, fullstory.tpl, comments.tpl добавьте при необходимости поддержку нового типа рейтинга:
[rating-type-4] <div class="rate_like-dislike"> <span class="ratingtypeplusminus ignore-select ratingplus">{likes}</span> [rating-plus]<span title="Нравится"><svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg></span>[/rating-plus] <span class="ratingtypeplusminus ratingminus ignore-select">{dislikes}</span> [rating-minus]<span title="Не нравится"><svg class="icon icon-dislike"><use xlink:href="#icon-dislike"></use></svg></span>[/rating-minus] </div> [/rating-type-4]
Изменений в шаблонах между данными версиями не требуется.
Изменений в шаблонах между данными версиями не требуется.
Изменений в шаблонах между данными версиями не требуется.
Внимание: Список изменений дан относительно стандартного шаблона Default. Вам необходимо вносить изменения в свой шаблон уже основываясь на нужды и верстку непосредственно вашего шаблона. Не все изменения необходимы именно вашему сайту, а также необязательно что оформление подойдет именно вашему сайту.
Источник