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...
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
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
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
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;
}
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>
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!...