DataLife Engine şablonlarındaki değişiklikler
Şablonlardaki değişiklikler, hangi sürümden güncelleme yaptığınıza bağlı olarak, sürümden sürüme öncelik sırasına göre yapılır. Örneğin, DLE'yi 17.1 sürümünden 18.0 sürümüne yükseltme işlemi gerçekleştirdiyseniz, önce 17.1 ile 17.2 arasındaki değişikliklere, ardından 17.2 ile 17.3 arasındaki değişikliklere, ardından 17.3 ile 18.0 arasındaki değişikliklere vb. yönelmeniz gerekir.
1. Add CSS styles to your template:
.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;
}2. It is necessary to adapt the pm.tpl template to the new personal messaging system:
The key change is that now the message output block in the correspondence is located inside the [messages] ... [/messages] tag block, which in turn are located inside the [readpm] .... [/readpm] tag block as well as the rewrite reading block and the editor output tags. Example of the block structure:
[readpm]
Message subject: {subj}
[messages]
The code for displaying messages
[/messages]
Reply to the message
{editor}
<button type="submit">Answer</button>
[/readpm]As an example of building a template, you can use the code from a standard template:
<article class="box story">
<div class="box_in">
<h1 class="title h1">Personal messages</h1>
<div class="pm-box">
<nav id="pm-menu">
[inbox]<span>Messages list</span>[/inbox]
[new_pm]<span>New message</span>[/new_pm]
</nav>
<div class="pm_status">
{pm-progress-bar}
{proc-pm-limit} % / ({pm-limit} messages)
</div>
</div>
[pmlist]
<div class="pmlist">
{pmlist}
</div>
[/pmlist]
[newpm]
<h4 class="heading">New message</h4>
<div class="addform addpm">
<ul class="ui-form">
<li class="form-group combo">
<div class="combo_field">
<input placeholder="Recipient name" type="text" name="name" value="{author}" class="wide" required>
</div>
<div class="combo_field">
<input placeholder="Subject" 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: {question}</label>
<input placeholder="Answer" 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="Enter the code" title="Enter the code" type="text" name="sec_code" id="sec_code" required>
</div>
[/sec_code]
<button class="btn btn-big" type="submit" name="add"><b>Send</b></button>
<button class="btn-border btn-big" type="button" onclick="dlePMPreview()">Preview</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} - online">Online</span>[/online]
</div>
<div class="com_user">
<b class="name">{author}</b>
<span class="grey">
from: {date}
</span>
</div>
<div class="meta">
<ul class="left">
<li class="edit_btn" title="Edit">
[pm-edit]<i title="Edit">Edit</i>[/pm-edit]
</li>
<li class="reply grey" title="Quote">
[reply]<svg class="icon icon-reply"><use xlink:href="#icon-coms"></use></svg><span>Quote</span>[/reply]
</li>
<li class="reply grey" title="Ignore">
[ignore]<svg class="icon icon-reply"><use xlink:href="#icon-dislike"></use></svg><span>Ignore</span>[/ignore]
</li>
<li class="complaint" title="Complain">
[complaint]<svg class="icon icon-bad"><use xlink:href="#icon-bad"></use></svg><span class="title_hide">Complain</span>[/complaint]
</li>
<li class="del" title="Delete">
[del]<svg class="icon icon-cross"><use xlink:href="#icon-cross"></use></svg><span class="title_hide">Delete</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>Reply to a message</h3>
{editor}
<br><button class="btn btn-big" type="submit" name="submit" title="Reply"><b>Reply</b></button>
</div>
</div>
</div>
[/readpm]3. Remove the tags responsible for the BBCODES editor output from the addnews.tpl news template and replace them with the visual editor output tags
1. Add CSS styles to your template:
.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%;
}Changes in templates between this versions is not required.
1. Add CSS styles to your template:
.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;
}1. Add CSS styles to your template:
.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;
}2. Open the userinfo.tpl file and add the tag in the desired place in the profile editing section:
[delete]Delete Account[/delete]1. Add CSS styles to your template:
.title_spoiler svg{
vertical-align: middle;
margin-top: -4px;
margin-right: 7px;
height: 16px;
width: 16px;
}2. In the template folder, create a fast searchresult.tpl file with the contents:
<a href="{full-link}"><span class="searchheading">{title}</span><span>{short-story limit="150"}</span></a>3. In the template file userinfo.tpl check the correctness of the tag design {twofactor-auth} and if necessary, change its design. Due to the fact that the type of field that outputs this tag has been changed.
1. Add CSS styles to your template:
.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;
}2. Open the addnews.tpl file and find:
Add Newsreplace with:
{header-title}3. Open the templates/rss.tpl file and replace all with:
[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]1. Add CSS styles to your template:
.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;
}2. Open the addcomments.tpl file and find:
<li id="comment-editor">{editor}</li>add below:
[image-upload]{image-upload}[/image-upload]
[allow-comments-subscribe]
<li>{comments-subscribe}</li>
[/allow-comments-subscribe]3. Open the comments.tpl file and find:
<div class="text share-content">{comment}</div>add below:
[images]<div class="signature">--------------------</div><div class="clrfix">{images}</div>[/images]Changes in templates between this versions is not required.
1. Add CSS styles to your template:
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;}Changes in templates between this versions is not required.
1. Add CSS styles to your template:
/*--- Highlighting the source code ---*/.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;}Changes in templates between this versions is not required.
Changes in templates between this versions is not required.
1. Open the file css/engine.css and add:
.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';}1. Open the file css/engine.css and add:
.ui-front { z-index: 1000; }.ui-button-icon-only { overflow: hidden; text-indent: -9999px; }Changes in templates between this versions is not required.
1. Open the file css/engine.css and find:
.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;}Replace with:
.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;}2. In files shortstory.tpl, fullstory.tpl, comments.tpl if necessary add support for a new rating type:
[rating-type-4] <div class="rate_like-dislike"> <span class="ratingtypeplusminus ignore-select ratingplus">{likes}</span> [rating-plus]<span title="Like"><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="Dislike"><svg class="icon icon-dislike"><use xlink:href="#icon-dislike"></use></svg></span>[/rating-minus] </div>[/rating-type-4]