Guide Category

134

Upgrade theme 9.4 to 9.5

Since Datalife Engine 9.5 was released, there are some tags and styles are changed and we see many websites have posted the tutorials how to upgrade theme from 9.4 to 9.5 but we don't see any of them explain what exactly those tags are and what for, in this tutorial we will show you the tags you need to know and tell you what they are so that if you are not using Default theme you can modify and upgrade your theme easily...
dlestarter
Upgrade theme 9.4 to 9.5
Upgrade Theme
9.4 to 9.5
Last Updated: November 20, 2013
Since Datalife Engine 9.5 was released, there are some tags and styles are changed and we see many websites have posted the tutorials how to upgrade theme from 9.4 to 9.5 but we don't see any of them explain what exactly those tags are and what for, in this tutorial we will show you the tags you need to know and tell you what they are so that if you are not using Default theme you can modify and upgrade your theme easily...
Add files
Add image file "no_image.jpg" in {THEME}/dleimages/ folder (This image is using for the tag {image-x} in case of you use tag in top news and related news in your website, if the articles don't have image uploaded then it will automatically grab this image, so we recommend that you use your own image for your website, the image must be in .jpg format and it should not be bigger than 250x250 px so it will help load faster.
Copy Files
Copy files print.tpl and static_print.tpl from folder /templates/ folder of your actual template folder ("templates/your_theme"), for example /templates/Default/, /templates/WStarter/, in the older version the print page use share theme files

Files:

/templates/print.tpl  ==> For article print page
/templates/static_print.tpl  ==> For static print page
Now in 9.5, the print page will use individual theme print style, for example if you are using theme "WStarter", your print page will use the files

Files:

/templates/WStarter/print.tpl  ==> For article print page
/templates/WStarter/static_print.tpl  ==> For static print page
Open the file /style/engine.css and preview.css

Add the following code at the end:

/*--- Code tag highlight [ code ]---*/
pre code {
  display: block; padding: 0.5em;
  background: #f9fafa; 
  border: 1px solid #dce7e7;
  overflow:auto;
  white-space: pre;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #93a1a1;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .lisp .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .builtin,
pre .built_in,
pre .lisp .title,
pre .identifier,
pre .title .keymethods,
pre .id {
  color: #268bd2;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  font-weight: bold;
}
pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label {
  color: #b58900;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .diff .change,
pre .special,
pre .keymethods,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #eee8d5;
}
Different theme designs are different, some of theme use /style/engine.css, some use /styles/engine.css, some use /css/engine.css, some don't use engine.css file but use different name or file, but the point is to add this tag within the theme anywhere in css file
Open the {THEME}/.htaccess
The .htaccess file in your "templates/your_theme" folder and replace all the code inside the file with the following contents:

htaccess

Order allow,deny
Deny from all
<FilesMatch ".(css)$|^$">
   Order deny,allow
   Allow from all
</FilesMatch>
For example if you are using theme "WStarter" then the file /templates/WStarter/.htaccess must contain the code above
Create a file frame.css
Place it in "templates/your_theme/" folder with the following contents:

CSS Style Code

html,body{
    height:100%;
    margin:0px;
    padding: 0px;
    background: none;
}
hr {
    color: #999;
    border: 0px none;
    border-top: dashed 1px #999;
    height: 1px;
}
input,
select,
textarea {
    outline:none;
}
form {
    margin:0px;
    padding: 0px;
}
table{
    border:0px;
}
table td{
    padding:0px;
    font-size: 11px;
    font-family: verdana;
}
a:active,
a:visited,
a:link {
    color: #4b719e;
    text-decoration:none;
    }
a:hover {
    color: #4b719e;
    text-decoration: underline;
    }
.navigation {
    color: #999898;
    font-size: 11px;
    font-family: tahoma;
}
.edit {
    border:1px solid #9E9E9E;
    color: #000000;
    font-size: 11px;
    font-family: Verdana; BACKGROUND-COLOR: #ffffff 
}
select {
    color: #000000;
    font-size: 11px;
    font-family: Verdana; 
    border:1px solid #9E9E9E;
}
textarea {
    border: #9E9E9E 1px solid;
    color: #000000;
    font-size: 11px;
    font-family: Verdana; 
    background-color: #ffffff 
}
#hintbox{ /*CSS for pop up hint box */
    position:absolute;
    top: 0;
    background-color: lightyellow;
    width: 150px; /*Default width of hint.*/ 
    padding: 3px;
    border:1px solid #787878;
    font:normal 11px Verdana;
    line-height:18px;
    z-index:100;
    border-right: 2px solid #787878;
    border-bottom: 2px solid #787878;
    visibility: hidden;
}
.hintanchor{ 
    padding-left: 8px;
}
.xprofile textarea {
    width: 100%; height:90px; font-family:verdana; font-size:11px; border:1px solid #9E9E9E;
}
.xprofile input {
    width:250px; height:18px; font-family:verdana; font-size:11px; border:1px solid #9E9E9E;
}
.bk {
    background:#fff url(images/fields.png) repeat-x;
}
Open profile_popup.tpl

Find

{news_num}

Replace with

{news_num}

Find

{comm-num}

Replace with

{comm-num}
Open addnews.tpl

Add the following code on the beginning of the file:

<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>
<script type="text/javascript" src="engine/skins/chosen/chosen.js"></script>
<script type="text/javascript">
$(function(){
	$('#category').chosen({allow_single_deselect:true, no_results_text: 'No category found or not selected'});
});
</script>
Open userinfo.tpl

Find:

{news_num}

Replace with:

{news-num}

Find:

{comm_num}

Replace with:

{comm-num}

Additional Tags for DLE 9.5 in user profile:

There are a few tags added in 9.5 but we don't seem to find the information anywhere, even the themes come with the DLE 9.5 package don't even add these tags in the themes so this information you can only find in DLEStarter.com!...
The following tags are applied to template files userinfo.tpl and comments.tpl
  1. [fullname]xxx[/fullname] is used for open and close tag if full name field {fullname} was input, for example, in templates/Default/userinfo.tpl, find:

    Find:

    <li><span class="grey">Full name:</span> <b>{fullname}</b></li>
    

    Replace with:

    [fullname]<li><span class="grey">Full name:</span> <b>{fullname}</b></li>[/fullname]
    
    If the user input the information in Full name filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  2. [icq]xxx[/icq] is used for open and close tag if icq field {icq} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">ICQ:</span> <b>{icq}</b></li>
    

    Replace with:

    [icq]<li><span class="grey">ICQ:</span> <b>{icq}</b></li>[/icq]
    
    If the user input the information in icq filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  3. [land]xxx[/land] is used for open and close tag if location field {land} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">Location:</span> {land}</li>
    

    Replace with:

    [land]<li><span class="grey">Location:</span> {land}</li>[/land]
    
    If the user input the information in location filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  4. [info]xxx[/info] is used for open and close tag if short information field {info} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">Information:</span> {info}</li>
    

    Replace with:

    [info]<li><span class="grey">Information:</span> {info}</li>[/info]
    
    If the user input the information in short information filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  5. [signature]xxx[/signature] is used for open and close tag if signature field {signature} was filled,

    For example:

    [signature]<hr /> <b>{signature}</b>[/signature]
    
    If the user filled the information in signature filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  6. [news-num]xxx[/news-num] is used for open and close tag if the user have posted article in your website,

    For example:

    [news-num]<li style="margin-top:10px;">Posts: <b>{news-num}</b>  <span class="button">{news}</span> 
    [rss]<img alt="" src="{THEME}/images/ico/ico_rss.png" border="0" style="vertical-align:middle; margin-bottom: 3px;" title="Feed - Bookmark Posts" />[/rss]</li>[/news-num]
    
    If the user had posted at least 1 article in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  7. [comm-num]xxx[/comm-num] is used for open and close tag if the user have posted comment in your website,

    For example:

    [comm-num]<li style="margin-top:10px;">Comments: <b>{comm-num}</b> <span class="button">{comments}</span></li>[/comm-num]
    
    If the user had posted at least 1 comment in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments

Related Tutorials

Review/Leave Comment

comments powered by Disqus