Displayed here is all information regarding optimizing the Attachmax Templates.
Attachmax comes with its own Theme Developer, which allows you to view the css and html code behind each page. Alternatively users can use Firefox's excellent firebug tool which allows you to inspect the html and css code while hovering over each element.
These guides aim to fill in the gap to modify each and every part of the Attachmax Template System.
Please provide us with as much feedback on the template system or how we can improve the documentation.
If you're interested in doing some custom work to help us to improve the templates, or writing a few template guides, please contact us via email at - jonnikola@optusnet.com.au
The background is controlled by css, and can be viewed inside
css/style.css page. (Line 119)
body {
margin: 0px;
padding: 0px;
* padding-top: 50px;
* padding-bottom: 35px;
background-image: url(../images/pageBackground.gif);
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
To change the background can be done by inserting a new image or removing this line.
background-image: url(../images/pageBackground.gif);
and replacing that line with the code below
background-color:#FFFFFF;
Below is the html & css code to change the Banners on Attachmax Homepage.
HTML Elements - File located at - templates/frontend/header.tpl
---------
<div id="branding">
<a href="<?php echo $siteUrl ?>"><img alt="<?php echo $siteName ?>" src="images/logo.png" /></a>
<a id="buy" href="http://cihilt.com"><img alt="Buy AttachMax Script" src="images/buy.png" /></a>
</div>
CSS Elements - Files located at css/style.css
---------
#branding {
float: left;
background: url(../images/banner_bg.png) repeat-x;
border-bottom: 10px solid rgb(255, 218, 103);
}
#branding img {
float: left;
}
#buy {
float: right;
}
Below is the html & css code to change the Categories.
HTML Elements - File located at - index.php
---------
$category = amCategory::getById(39);
$file_row = array(
'files' => amFile::search(array('order' => FILES_ORDER_VIEWS, 'limit' => 5,
'types' => array($type), 'category' => $category)),
'title' => 'Top 5 Sport'
);
array_push($files, $file_row);
Theres two main parts you need to change that will influence what kind of information the categories will display.
Where you have FILES_ORDER_LAST_VIEW_TIME,
Can be substituted with either:
FILES_ORDER_LAST_VIEW_TIME, - To Order via last view time
FILES_ORDER_UPLOAD_TIME, - To order via last Uploaded time
FILES_ORDER_VIEWS, - To order via Most Viewed
Where you have amCategory::getById(39);
This line points to the category id, which can be viewed from either 3 locations.
1) Hovering over homepage Categories with mouse
2)Inside admin Category section
3)Viewing the id directly from the database
So in our case 39 is the Sport category and will show all Sport Videos.
Another part that you can modify is the title
Where you have - 'title' => 'Top 5 Sport'
You can adjust the text to display the text any way you wish.
Another part that can be adjusted is:
'limit' => 5,
This tells the script how many videos to show, if you're handy with coding, you may display the Video thumbnails in vertical format and increase this limit to something like 10.
HTML Design elements that control the categories - templates/frontend/home/index.tpl
<div class="content"> <?php foreach ($file_row['files'] as $file): ?> <?php echo $file->getShortPreviewHtml() ?> <?php endforeach; ?> </div>
CSS Elements - css/style.css - line 111
============
#videos #top .content, #files #top .content, #images #top .content {style.css (line 111)
background-color:white;
float:left;
padding-bottom:5px;
width:750px;
}
The embed code is located at templates\_files\view\_video_embed_code.tpl
<div><b>Embed: </b><input type="text" class="text" onclick="am_highlight(this)" readonly="true" value="<?php echo am_h(str_replace(array("\n", "\t"), '', $playerHtml)) ?>" /></div>
This is controlled via css in the folder css/view.css (line 74)
#file_info .embed div {
padding:0pt 0pt 5px;
}
Using css, you can move or adjust the position, to completely change the look.
Location of HMTL and CSS code to change the navigation
HTML Elements - templates/frontend/header.tpl - line 40
============
<ul id="secondNav">
<li class="videos"><a>">Videos</a></li>
<li class="images"><a>">Images</a></li>
<li class="files"><a>">Files</a></li>
<li class="list"><a href="list.php">List Files</a></li>
<li class="upload"><a href="upload.php">Upload</a></li>
<li class="register"><a href="register.php">Register</a></li>
</ul>
CSS Elements - css/style.css - line 111
============
Both these Css elements control the display of the navigation,
#secondNav controls more the Navigation links, while #secondNavHolder, is the placeholder for the menyu
#secondNavHolder {style.css (line 358)
background:transparent url(../images/taskbar_top.jpg) repeat-x scroll center bottom;
float:left;
padding-bottom:27px;
}
* {style.css (line 4)
margin:0pt;
padding:0pt;
}
#secondNav {style.css (line 364)
background:#5A84BD url(../images/middle_menu/attachmax.gif) no-repeat scroll left top;
float:left;
list-style-type:none;
margin:0pt;
padding:0pt 0pt 0pt 180px;
width:775px;
}
ul, ol {style.css (line 14)
margin-left:2em;
}