(the theme designs are vary, if you place the engine.css in different folder name or include engine.css in different file name of different css file, please open that file for modification)
Add this code in the the file
/* ==================== Style for AJAX loading layer */
#loading-layer {
display:none;
font-family: Verdana;font-size: 11px;
background:# 000;padding:10px;
text-align:center;
border:1px solid #000;
color: #FFF;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Find:
#dropmenudiv {
Remove style from that section
opacity: 0.95;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=95) progid:DXImageTransform.Microsoft.Shadow(color= #cacaca, direction=135, strength=3)";
filter: alpha(opacity=95, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
Find and remove style for PM popup windows
/* ==================== Popup notification windows for PM */
#newpm {
position: absolute;
width: 400px;
padding: 4px;
background-color: #fdfdfd;
border: 1px solid #bbbbbb;
font-family: verdana;
color: #757575;
line-height: 135%;
}
#newpmhead er {
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
height: 20px;
color: #ffffff;
font-weight: bold;
background-color: #4972D3;
font-family: verdana;
cursor: move;
}
#newpm a {
background: transparent;
color: #4d6a8a;
text-decoration: none;
}
#newpm a:hover {
background: transparent;
color: #4d6a8a;
text-decoration: underline;
Find and remove
.highslide-footer {
height:11px;
}
.highslide-footer .highslide-resize {
float: right;
height: 12px;
width: 11px;
background: url(../dleimages/resize.gif);
}
.highslide-resize {
cursor: nw-resize;
}
At the end of the file, add the code
/* ==================== AutoComplete tag clouds */
.autocomplete-w1 {position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /*IE6 fix:*/ _background:none; _margin:0;}
.autocomplete {border:1px solid #999; background: #FFF; cursor:default; text-align:left; max-height: 350px; overflow:auto; margin:-6px 6px 6px -6px; /*IE6 specific:*/ _height:350px; _margin:0;_overflow-x:hidden;}
.autocomplete .selected {background:#F0F0F0;}
.autocomplete div {font-size:11px;font-family: verdana;padding:2px 5px; white-space:nowrap;}
.autocomplete strong {font-weight:normal; color:#3399FF;}
/* ==================== Quick search on the site */
#searchsuggestions {border-width:1px; border-color:#919191; border-style:solid; width:300px; background-color:#5c9ccc; font-size:10px; line-height:14px;}
#searchsuggestions a {padding:5px;display:block; background-color:#ffffff; clear:left; height:70px; text-decoration:none;}
#searchsuggestions a:hover {background-color:#fdd08b; color:#ffffff;}
#searchsuggestions a span.searchheading {background:#5c9ccc; display:block; font-weight: bold; padding:5px; color:#ffffff;}
#searchsuggestions a:hover span.searchheading {color:#ffffff;}
#searchsuggestions a span {color:#555555;}
#searchsuggestions a:hover span {color: #000000;}
#searchsuggestions s pan.seperator {float:right; padding-right:15px; margin-right:5px;}
#searchsuggestions s pan.seperator a {background-color:transparent; display:block; height: auto; color:#ffffff;}
#searchsuggestions s pan.notfound {padding:5px;background-color:#ffffff; display:block; height:auto; color:#000000;}
/* ==================== Dialog and pop-up using jQuery UI */
.ui-helper-clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.ui-helper-clearfix {
display: inline-block;
}
* html .ui-helper-clearfix {
height: 1%;
}
.ui-helper-clearfix {
display: block;
}
.ui-icon {
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: -99999px;
}
.ui-widget {
font-family: Tahoma, Lucida Sans , Arial, sans-serif;
font-size: 11px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: tahoma, Arial, sans-serif;
font-size: 11px;
}
.ui-widget-content {
background: #fcfdfd 50% bottom repeat-x;
border: 1px solid #a6c9e2;
color: #222222;
}
.ui-widget-content a {
color: #222222;
}
.ui-widget-header {
background: #5c9ccc url(../images/ui-bg_gloss-wave.png) 50% 50% repeat-x;
border: 1px solid #4297d7;
color: #ffffff;
font-weight: bold;
}
.ui-widget-header a {
color: #ffffff;
}
.ui-state-default, .ui-widget-content .ui-state-default {
background: #dfeffc url(../images/ui-bg_glass_85.png) 50% 50% repeat-x;
border: 1px solid #c5dbec;
color: #2e6e9e;
font-weight: bold;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #2e6e9e;
text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
background: #d0e5f5 url(../images/ui-bg_glass_75.png) 50% 50% repeat-x;
border: 1px solid #79b7e7;
color: #1d5987;
font-weight: bold;
}
.ui-state-hover a, .ui-state-hover a:hover {
color: #1d5987;
text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active {
background: #f5f8f9 50% 50% repeat-x;
border: 1px solid #79b7e7;
color: #e17009;
font-weight: bold;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #e17009;
text-decoration: none;
}
.ui-widget:active {
outline: none;
}
.ui-state-error {
background: #fef1ec 50% 50% repeat-x;
border: 1px solid #cd0a0a;
color: #cd0a0a;
}
.ui-widget-header .ui-icon {
background-image: url(../images/ui-icons.png);
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(../images/ui-icons_h.png);
}
.ui-icon-close {
background-position:-80px -128px;
}
.ui-icon-closethick {
background-position: -96px -128px;
}
.ui-button .ui-button-text {
display: block;
line-height: 1.4px;
}
.ui-button-text-only .ui-button-text {
padding: .4em .8em;
}
input.ui-button {
padding: .4em 1em;
}
.ui-button-set {
margin-right: 7px;
}
.ui-button-set .ui-button {
margin-left: 0;
margin-right: -.3em;
}
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-dialog {
overflow: hidden;
padding: .2em;
position: absolute;
width: 300px;
}
.ui-dialog .ui-dialog-titlebar {
padding: .5em 1em .3em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 16px .2em 0;
}
.ui-dialog .ui-dialog-titlebar-close {
height: 18px;
margin: -10px 0 0 0;
padding: 1px;
position: absolute;
right: .3em;
top: 50%;
width: 19px;
}
.ui-dialog .ui-dialog-titlebar-close span {
display: block;
margin: 1px;
}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
padding: 0;
}
.ui-dialog .ui-dialog-content {
background: none;
border: 0;
overflow: hidden;
padding: .5em 1em;
position: relative;
zoom: 1;
}
.ui-dialog .ui-dialog-buttonpane {
background-image: none;
border-width: 1px 0 0 0;
margin: .5em 0 0 0;
padding: .3em 1em .5em .4em;
text-align: left;
}
.ui-dialog .ui-dialog-buttonpane button {
cursor: pointer;
float: right;
line-height: 1.4em;
margin: .5em .4em .5em 0;
overflow: visible;
padding: .2em .6em .3em .6em;
width: auto;
}
.ui-dialog .ui-resizable-se {
bottom: 3px;
height: 14px;
right: 3px;
width: 14px;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
Find
<input onclick="doAddComments();return false;" name="submit" type="image" style="width:80px; height:20px" src="{THEME}/images/dlet_bttn_ submit.gif" alt="Add Comment" />
Remove
onclick="doAddComments();return false;"
Please note: the design maybe different to find exact code but this tutorial is intended to remove "onclick" option when add comments
Find
<input type="text" name="tags" value="{tags}" maxlength="150" class="f_input" />
Replace with
<input type="text" id="tags" name="tags" value="{tags}" maxlength="150" class="f_input" autocomplete="off" />
Please note: the design maybe different to find exact code but this tutorial is intended to add id="tags" and autocomplete="off" in input
Find
<a onclick="javascript:showBusyLayer()" href="{$link_logout}">Login</a>
Remove
onclick="javascript:showBusyLayer()"
Please note: the design maybe different to find exact code but this tutorial is intended to remove onclick="javascript:showBusyLayer()" from the link to login
Find
<form method="post" onsubmit="javascript:showBusyLayer()" action=''>
Remove
onsubmit="javascript:showBusyLayer()"
Find
<form onsubmit="javascript:showBusyLayer()" method="post" action=''>
Remove
onsubmit="javascript:showBusyLayer()"
Find
<input name="story" type="text" class="s_field" style="width:184px" value="Search..." onfocus="this.value='';" />
Add id="story" in the field so it will look like this
<input id="story" name="story" type="text" class="s_field" style="width:184px" value="Search..." onfocus="this.value='';" />
Please note: the design maybe different to find exact code but this tutorial is intended to add id="story" for quick search drop down menu
Add the following information to section [readpm]...[/readpm]
- Date: {date}
- Register: {registration}
- <img src="{foto}" border="0" alt="" / >
- {group-icon}
- User group: {group-name}
- Posts: {news-num}
- Comments: {comm-num}
- [signature]
--------------------
{signature}
[/signature]
The template designs are different, but the information above are for the Read Message section, the information is for display the PM sender information including date of message sent, the sender registration date, sender avatar, sender user group icon, user group name, sender statistic for news posts and comments, and sender signature if available...
So you can add those details if you like and think it's needed for your template
Find
.text_spoiler {
Add before
.title_spoiler img {
margin: 0; padding: 0;
}
Download the attached example files to add within the templates/your-theme/ folder.