This, as the file description sais, is a MOBILE ADMIN TEMPLATE.
It is not connected to any database, php server, or wordpress theme. It is simply the template that you must code into PHP to be able to use it as an admin!
The description states this! So please, do not ask where the PHP files are located!
To install the template, simply copy the files inside the _main folder to your server. That's all!
iPhone 4 and iPhone 4S, have displays with double the DPI size. That means, the graphics can be doubled to make the graphics look better. More details will be found in the documentation.
Images inside HTML can be made retina with 2 very simple yet very important step. First of all, your image must have a class called "replace-2x" added to it and MANDATORY the width of the image inside the img tag.
The following syntax for example
<img src="img1.png" class="replace-2x other-classes" width="20">
In the above example, I used an image that is 20 pixels size. Now, create a image, that is at least 40 pixels wide. Once that is complete, save it in the exact same place as the previous image, but name it img1@2x.png.
JavaScript will automatically detect the image if the dpi is doubled and replace img1.png with img1@2x.png. It is important you have the width defined for it, because, if you don't, the image will be 40pixels, and it will mess up the design.
There is a css called highdpi.css. Do not add anything in here that is not HD. You will understand as we proceed.
Inside style.css, create a new list item for example.
li.whatever{background-image:url(../images/img1.png); width:20px; height:20px;}
Once you have done this, the same as for the markup, create a double sized image, call it img1@2x.png and save it in the same location.
Then, inside the highdpi.css file, inside the main css class, add the following
@media all and (-webkit-min-device-pixel-ratio:2) {
li.whatever{background-image:url(../images/img1.png); -webkit-background-size:20px 20px;}
}
Once you have done this, the element will automaticall become a retina graphic if the proper display is discovered!
Every page is structured the same. There are 3 main classes that house all elements. These are login-page / index-page / and dash-page.
Inside each of these, you can add the following classes to create elements
<div class="content-box">
<div class="content-box-title">
<p class="left-title">Left Side Title</p>
<p class="right-title">Right Side Title</p>
<div class="clear"></div>
</div>
<div class="content-box-container">
Content Goes In Here
</div>
</div>
The above structure is universal. You can add whatever you want in here and the code will create a box, a left title, and a right title. You can remove the left or right title to remove a title, but you must keep the clear class because the code still floats each title.
<div class="post-box">
<p class="post-body">
The Post Body
</p>
<p class="post-expand-body">
The Post Expanded Content
</p>
<div class="post-decoration"></div>
<ul class="post-lists">
<li class="post-approve">Publish</li>
<li class="post-expand">Expand</li>
<li class="post-edit">Edit</li>
<li class="post-trash">Reject</li>
</ul>
<div class="clear"></div>
</div>
The post box get's inserted inside the content-box, where the regular content would go. Once you've done this, editing the post-body will add text, editing the post-expand-body wil add text that apperas when you click the expand list-button .
<div class="quick-posts">
<input type="text" name="quick-title" class="field" value="Title" />
<div class="post-edit-controls">
<a href="#" class="control-but bold-control shadow">B</a>
<a href="#" class="control-but italic-control shadow">I</a>
<a href="#" class="control-but underline-control shadow">u</a>
<a href="#" class="control-but strike-control shadow">ABC</a>
<a href="#" class="control-but list-control shadow">
<img src="images/ui/list.png" alt="img">
</a>
<a href="#" class="control-but list-control shadow">
<img src="images/ui/left.png" alt="img">
</a>
<a href="#" class="control-but list-control shadow">
<img src="images/ui/center.png" alt="img">
</a>
<a href="#" class="control-but list-control shadow">
<img src="images/ui/right.png" alt="img">
</a>
</div>
<textarea type="text" name="quick-content" class="big-field" size="30"/>
Content
</textarea>
<input type="text" name="quick-tags" class="field" value="Tags"/>
<a href="#" class="quick-post-button button yellow">Submit Post For Review</a>
<div class="clear"></div>
</div>
The above code, again, goes inside the content-box container, where the regular content goes. The controls are only designed, not coded. To do so, you must add them to a admin panel via php.
<div class="visitor-stats">
<div class="stat">
<p class="stat-left">Monday</p>
<p class="stat-right">123 Visits <strong class="increase">5% Increase</strong></p>
<div class="clear"></div>
<span class="stat-background">
<span class="stat-cleaner"></span>
<span class="percent green p10"></span>
</span>
</div>
<div class="stat">
<p class="stat-left">Thursday</p>
<p class="stat-right">300 Visits <strong class="decrease">1% Decrease</strong></p>
<div class="clear"></div>
<span class="stat-background">
<span class="stat-cleaner"></span>
<span class="percent red p40"></span>
</span>
</div>
</div>
<div class="visitor-stats-vertical">
<span class="stat-vertical-background">
<span class="percent-vertical red vp30"></span>
<p class="vertical-stat-number">a</p>
</span>
<span class="stat-vertical-background">
<span class="percent-vertical yellow vp70"></span>
<p class="vertical-stat-number">b</p>
</span>
<span class="stat-vertical-background">
<span class="percent-vertical green vp80"></span>
<p class="vertical-stat-number">c</p>
</span>
<div class="clear"></div>
</div>
<ul class="lower-latin">
<li>Very bad! Very very bad! </li>
<li>Still bad! Still bad!</li>
<li>Getting better! But bad! </li>
</ul>
The above code goes where the regular content goes. Each one of the stat elements creates a vertical stat item. Replace vpXX with numbers from vp10 to vp100. These elements are absolutely positioned. So the lists bellow are necesary.
The following codes bellow, each create a setting toggle/box. These should be added inside the content-box, where the regular code goes.
<a href="#" class="setting-box checkbox">Option One</a> <a href="#" class="setting-box checkbox selected-checkbox">Option Two</a> <a href="#" class="setting-box checkbox">Option Three</a> <a href="#" class="setting-box checkbox2">Option One</a> <a href="#" class="setting-box checkbox2 selected-checkbox2">Option Two</a> <a href="#" class="setting-box checkbox2">Option Three</a> <a href="#" class="setting-box radiobox">Option One</a> <a href="#" class="setting-box radiobox selected-radiobox">Option Two</a> <a href="#" class="setting-box radiobox">Option Three</a> <a href="#" class="setting-box radiobox2">Option One</a> <a href="#" class="setting-box radiobox2 selected-radiobox2">Option Two</a> <a href="#" class="setting-box radiobox2">Option Three</a>
Each box and radio box has a number. There are 2 radiobox types, and 2 checkbox styles.
The codes go inside the content-box, where the regular content should go.
On/Off iPhone Content Toggle Style:
<div class="content-toggle">
<a href="#" class="itoggle">Find out more? Turn me on!</a>
<p class="itoggle-content">
Text To Be Shown When Clicking The On/Off Button
</p>
</div>
+ / x Content Toggle Styles:
<div class="content-toggle">
<a href="#" class="content-toggle-deploy">Content Toggle 1!</a>
<p class="toggle-content">
Text to be shown when clicking the content toggle.
</p>
</div>
<ul class="icon-list">
<li class="list-heart">Heart List</li>
<li class="list-cross">Cross List</li>
<li class="list-arrow">Arrow List</li>
<li class="list-plus">Plus List</li>
<li class="list-tick">Tick List</li>
<li class="list-attention">Attention List</li>
<li class="list-warning">Warning List</li>
<li class="list-staron">Star List</li>
<li class="list-staroff">Star List</li>
<li class="list-info">Information List</li>
</ul>
<ol class="number-list">
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ol>
<ul class="bullet-list">
<li>Bullet One</li>
<li>Bullet Two</li>
<li>Bullet Three</li>
</ul>
The above lists go inside the content-box, where the regular content goes. The list are self explicatory.
<div class="notification-box-blue">
<a href="#" class="notification-quit-blue">x</a>
<img class="replace-2x notification-icon" width="16" src="list-info.png" alt="">
<p class="notification-text">Traffic has increased by 20%</p>
</div>
Thank you for your purchase! If you require an automatical redirect script for your mobile device, please send me a message through my profile and I will gladly assist you.
If you have any trouble with the template, please feel free to contact me and again I will gladly assist you!
Don't forget to rate the template 5 stars! It helps a lot with sales and creating even better stuff for you guys!
All the best,
Enabled.