-
☆ A M B ☆
- 24,524 Posts
Most, if not all, of the templates come with an install.txt (or similar) file with installation instructions. For more detail on how templates work in MODx:
http://sottwell.com/how-templates-work.html
Modules in Joomla are different from modules in MODx.
What you mean by Modules in Joomla for MODx is usually extra chunks of HTML outputs. For example, I have one client who has two different quotes that change on each page as well as weather. Sometimes it’s just a matter of adding a chunk to the template to hold that HTML. Other times it requires adding a container and various docs within that and use a snippet to display it within the template (and usually deselecting the Show in Menu checkbox).
Joomla is off the shelf CMS. In MODx you determine how the site will look and feel. It’s flexible, extremely so.
MySQL: 5.0.45
PHP: 5.2.6
Linux 2.6.9-023stab048.6-enterprise #1
cURL enabled
PDO enabled
FFox Apple 3.6.8
Firebug DIS-abled
Seriously. I have the exact same problem. I can not figure out for the of me how to install a template. I can’t seem to find a clear cut explanation or set of instructions anywhere! If someone know where such can be found, please by all means share. Where for example do you upload the images to, flash files? Fonts? PSD files? I have this template from template monster and it has the following folders, flash, fonts, psd, and html. I have no clue where to begin on installing them to make them actually work.
I tried opening up the index.html and copy pasting into a new template, but then everything was just all screwy. I also have a style.css that comes along with it. I’m so lost and just want to get my site up. Can anyone help at all? Thanks.
Can you copy and paste the index.html here and let me have a look at it? That will tell me what files go where. I can tell you better how to install the template.
MySQL: 5.0.45
PHP: 5.2.6
Linux 2.6.9-023stab048.6-enterprise #1
cURL enabled
PDO enabled
FFox Apple 3.6.8
Firebug DIS-abled
I made a several comments in this template. I can’t see where you need to put your main header and content MODx TVs. Without fail I use:
<h1>[*longtitle*]</h1>
[*#content*]
Typical template monster template: tables. Tables are soooo not SEF. If you have CSS Layout skills then it’s worth the time it takes to convert the tables and their inline styles to a CSS layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[(site_name)] | [*pagetitle*]</title>
<!--get rid of this hatchet javascript menu from Fireworks. Replace it with all CSS styling-->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!--replace the code above with nothing. Just delete it.-->
<!--I usually put my template files in the root-->
<link href="templateFolderNameHere/style.css" rel="stylesheet" type="text/css">
</head>
<!--<body onLoad="MM_preloadImages('images/l1-1.gif')"> // this is related to those crap above-->
<body>
<table width="768" style="height:100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="768" style="height:740px" valign="middle">
<table width="768" style="height:740px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="13" style="height:740px" valign="top"></td>
<td width="740" style="height:740px" valign="top">
<table width="740" style="height:740px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="740" style="background-image: url(images/fl.jpg); background-repeat: no-repeat; height:278px" valign="top">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="740" height="278">
<param name="movie" value="flash\header.swf?button=0">
<param name="quality" value="high">
<param name="menu" value="false">
<!--[if !IE]> <-->
<object data="flash\header.swf?button=0"
width="740" height="278" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
</td>
</tr>
<!--tables! Good luck with that. I don't do tables for layouts. Ever.-->
<tr>
<td width="740" style="background-image: url(images/t-dr.gif); background-repeat: repeat-x; height:7px" valign="top"></td>
</tr>
<tr>
<td width="740" style="height:352px" valign="top">
<table width="740" style="height:352px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="181" style="height:100%" valign="top">
<table width="181" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="181" style="height:100%" valign="top">
<table width="100%" style="background-image: url(images/m-t-dr.gif); background-repeat: repeat-x; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/p.gif); background-repeat: repeat-y; background-position: left;height:100%" valign="top">
<table width="3" style="background-image: url(images/m-l-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m-l-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
<td width="100%" style="background-image: url(images/m-b-dr.gif); background-repeat: repeat-x; background-position: bottom;height:100%" valign="top">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="height:100%" valign="top">
<img alt="" border="0" src="images/t1.gif" style="margin-left:15px; margin-top:16px"><br>
#####
Replace the following UL with:
[!Wayfinder?startId=`0` &level=`4` &outerTPL=`outerUL`!]
outerUL chunk contains this:
<ul class="lt_text"[+wf.classes+]>
[+wf.wrapper+]
</ul>
#####
<ul class="lt_text" style="margin-left:15px; margin-top:28px; margin-bottom:10px">
<li class="li1" style="margin-top:0px"><a href="#" class="lt_text">Multiple Domain Hosting</a></li>
<li class="li1"><a href="#" class="lt_text">Secure Socket Layers</a></li>
<li class="li1"><a href="#" class="lt_text">POP Email Accounts</a></li>
<li class="li1"><a href="#" class="lt_text">GB’s of Transfer</a></li>
<li class="li1"><a href="#" class="lt_text">24/7 FTP Access</a></li>
<li class="li1"><a href="#" class="lt_text">Real Time Stats</a></li>
<li class="li1"><a href="#" class="lt_text">Control Panel</a></li>
</ul>
</td>
</tr>
<tr>
<td width="100%" style="height:38px" valign="top"><div align="left" style="margin-left:19px; margin-top:11px; margin-bottom:10px"><img alt="" src="images/a1.gif" hspace="0" vspace="0" border="0" align="left" style="margin-right:6px; margin-top:5px"><a href="#" class="l1_text"><strong>all services</strong></a></div></td>
</tr>
</table>
</td>
<!-- be sure to replace all "url(images/" ... with "url(templateFolderName/images" and make sure that images folder is indeed located inside the teampletName Folder!!-->
<td width="3" style="background-image: url(images/p.gif); background-repeat: repeat-y; background-position: right;height:100%" valign="top">
<table width="3" style="background-image: url(images/m-r-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m-r-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="181" style="height:118px" valign="top">
<a href="#"><img alt="" border="0" src="images/b1.jpg" style=" margin-top:2px"></a><br>
</td>
</tr>
</table>
</td>
<td width="2" style="height:352px" valign="top"></td>
<td width="306" style="height:100%" valign="top">
<table width="306" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="306" style="background-image: url(images/f1.gif); background-repeat: no-repeat; height:42px" valign="top">
<form id="form1" action="" enctype="multipart/form-data" name="form1" style="margin:0px; padding:0px">
<table width="306" style="height:42px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="77" style="height:42px" valign="top">
<img alt="" border="0" src="images/domain.gif" style="margin-left:14px; margin-top:10px"><br>
</td>
<td width="128" style="height:42px" valign="top"><input type="text" class="form1 f_text" style="margin-top:9px"></td>
<td width="57" style="height:42px" valign="top"><select class="f_text form1" style="margin-top:9px; width:49px; height:19px"><option>com</option></select></td>
<td width="44" style="height:42px" valign="top"><input type="image" src="images/ok.gif" style="margin-top:8px"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td width="306" style="height:2px" valign="top"></td>
</tr>
<tr>
<td width="306" style="height:100%" valign="top">
<table width="100%" style="background-image: url(images/m1-t-dr.gif); background-repeat: repeat-x; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/p.gif); background-repeat: repeat-y; background-position: left;height:100%" valign="top">
<table width="3" style="background-image: url(images/m-l-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m-l-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
<td width="100%" style="background-image: url(images/m1-b-dr.gif); background-repeat: repeat-x; background-position: bottom;height:100%" valign="top">
<img alt="" border="0" src="images/t2.gif" style="margin-left:13px; margin-top:21px"><br>
<div class="m_text" style="margin-left:15px; margin-top:6px; margin-right:20px; margin-bottom:10px"><strong>Lorem ipsum dolor</strong> sit amet, consectetuer adipiscing elit. Nullam consequat commodo arcu. Donec sit amet orci sit amet <a href="#" class="l_text">lorem nonummy</a> congue. In hac habitasse platea dictumst. Proin hendrerit pharetra nisl... <a href="#" class="l1_text"><strong>more</strong></a></div>
#####
Replace the following UL with:
[!Wayfinder?startId=`0` &level=`4` &outerTPL=`outerUL1`!]
outerUL1 chunk contains this:
<ul class="lt1_text"[+wf.classes+]>
[+wf.wrapper+]
</ul>
#####
<ul class="lt1_text" style="margin-left:15px; margin-top:16px; margin-bottom:15px">
<li class="li2" style="margin-top:0px"><a href="#" class="lt1_text">Proin hendrerit pharetra nisl sed vestibulum.</a></li>
<li class="li2"><a href="#" class="lt1_text">Proin hendrerit pharetra nisl sed vestibulum.</a></li>
</ul>
</td>
<td width="3" style="background-image: url(images/p.gif); background-repeat: repeat-y; background-position: right;height:100%" valign="top">
<table width="3" style="background-image: url(images/m-r-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m-r-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="306" style="height:2px" valign="top"></td>
</tr>
<tr>
<td width="306" style="height:116px" valign="top">
<table bgcolor="#FAFAF8" width="100%" style="background-image: url(images/m2-t-dr.gif); background-repeat: repeat-x; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m2-l-dr.gif); background-repeat: repeat-y; background-position: left;height:100%" valign="top">
<table width="3" style="background-image: url(images/m2-l-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m2-l-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
<td width="100%" style="background-image: url(images/m2-b-dr.gif); background-repeat: repeat-x; background-position: bottom;height:100%" valign="top">
<table width="100%" style="background-image: url(images/f2.jpg); background-repeat: no-repeat; background-position: 1px bottom;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="height:100%" valign="top">
<img alt="" border="0" src="images/t3.gif" style="margin-left:119px; margin-top:24px"><br>
<div class="m_text" style="margin-left:120px; ">Nullam consequat commodo arcu. Donec sit amet orci sit...</div>
<div align="left" style="margin-left:120px; margin-top:11px; margin-bottom:10px"><img alt="" src="images/a1.gif" hspace="0" vspace="0" border="0" align="left" style="margin-right:6px; margin-top:5px"><a href="#" class="l1_text"><strong>try online demo</strong></a></div>
</td>
</tr>
</table>
</td>
<td width="3" style="background-image: url(images/m2-r-dr.gif); background-repeat: repeat-y; background-position: right;height:100%" valign="top">
<table width="3" style="background-image: url(images/m2-r-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3" style="background-image: url(images/m2-r-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="2" style="height:352px" valign="top"></td>
<td width="249" style="height:100%" valign="top">
<table width="249" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="249" style="background-image: url(images/m-dr.gif); background-repeat: repeat-y; height:116px" valign="top">
<table width="100%" style="background-image: url(images/m-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="background-image: url(images/m-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="169" style="height:100%" valign="top">
<img alt="" border="0" src="images/t4.gif" style="margin-left:3px; margin-top:4px"><br>
<ul class="h_text" style="margin-left:14px; margin-top:15px; margin-bottom:10px">
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >20 gb</span> transfer</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >500 mb</span> storage</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >free</span> domains</a></strong></li>
</ul>
</td>
<td width="80" style="height:100%" valign="top">
<img alt="" border="0" src="images/pr1.gif" style=" margin-top:13px"><br>
<a href="#" ><img alt="" border="0" src="images/more.gif" style=" margin-top:8px"></a><br>
<a href="#" ><img alt="" border="0" src="images/ord.gif" style=" margin-top:4px"></a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="249" style="height:2px" valign="top"></td>
</tr>
<tr>
<td width="249" style="background-image: url(images/m-dr.gif); background-repeat: repeat-y; height:119px" valign="top">
<table width="100%" style="background-image: url(images/m-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="background-image: url(images/m-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="169" style="height:100%" valign="top">
<img alt="" border="0" src="images/t5.gif" style="margin-left:3px; margin-top:4px"><br>
#####
Replace the following UL with:
[!Wayfinder?startId=`0` &level=`4` &outerTPL=`outerUL` &rowTpl= `htext`!]
outerUL chunk contains this:
<ul class="lt_text"[+wf.classes+]>
[+wf.wrapper+]
</ul>
You can dupe absolutely any UL you'll ever see using Wayfinder TPL. In this one you need to specify the rowTpl. It's the one that has the <li> tags. See more here:
http://www.muddydogpaws.com/development/wayfinder/parameters.html
Use this rowTpl:
<li class="li3"><strong><a href="[+wf.link+]" class="h_text" title="[+wf.title+]" style="text-transform:uppercase"><span class="h1_text" >[+wf.linktext+]</span></a></strong>
[+wf.wrapper+]
</li>
I have containers all over that I use for lists like these; list that see a lot of repeated use can be "embedded" into the template.
#####
<ul class="h_text" style="margin-left:14px; margin-top:15px; margin-bottom:10px">
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >50 gb</span> transfer</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >1000 mb</span> storage</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >free</span> domains</a></strong></li>
</ul>
</td>
<td width="80" style="height:100%" valign="top">
<img alt="" border="0" src="images/pr2.gif" style=" margin-top:13px"><br>
<a href="#" ><img alt="" border="0" src="images/more.gif" style=" margin-top:8px"></a><br>
<a href="#" ><img alt="" border="0" src="images/ord.gif" style=" margin-top:4px"></a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="249" style="height:3px" valign="top"></td>
</tr>
<tr>
<td width="249" style="background-image: url(images/m-dr.gif); background-repeat: repeat-y; height:100%" valign="top">
<table width="100%" style="background-image: url(images/m-t.gif); background-repeat: no-repeat; background-position: top;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="background-image: url(images/m-b.gif); background-repeat: no-repeat; background-position: bottom;height:100%" valign="top">
<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="169" style="height:100%" valign="top">
<img alt="" border="0" src="images/t6.gif" style="margin-left:3px; margin-top:4px"><br>
<ul class="h_text" style="margin-left:14px; margin-top:15px; margin-bottom:10px">
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >100 gb</span> transfer</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >2000 mb</span> storage</a></strong></li>
<li class="li3"><strong><a href="#" class="h_text" style="text-transform:uppercase"><span class="h1_text" >free</span> domains</a></strong></li>
</ul>
</td>
<td width="80" style="height:100%" valign="top">
<img alt="" border="0" src="images/pr3.gif" style=" margin-top:13px"><br>
<a href="#" ><img alt="" border="0" src="images/more.gif" style=" margin-top:8px"></a><br>
<a href="#" ><img alt="" border="0" src="images/ord.gif" style=" margin-top:4px"></a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="740" style="background-image: url(images/b-b1.gif); background-repeat: repeat-x; height:9px" valign="top"></td>
</tr>
<tr>
<td width="740" style="background-image: url(images/b-dr.gif); background-repeat: repeat-y; height:43px" valign="top">
<table width="740" style="background-image: url(images/b-t.gif); background-repeat: no-repeat; background-position: top;height:43px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="740" style="background-image: url(images/b-b.gif); background-repeat: no-repeat; background-position: bottom;height:43px" valign="top">
<table width="740" style="height:43px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="453" style="height:43px" valign="top"><div class="c_text" style="margin-left:34px; margin-top:16px; margin-bottom:10px"><a href="index-1.html" class="text"><strong>hosting</strong></a> | <a href="index-2.html" class="text"><strong>domains</strong></a> | <a href="index-3.html" class="text"><strong>resellers</strong></a> | <a href="index-4.html" class="text"><strong>support</strong></a> | <a href="index-5.html" class="text"><strong>contacts</strong></a></div></td>
<td width="287" style="height:43px" valign="top">
<div class="c_text" style=" margin-top:16px; margin-bottom:10px">Hosting Company © 2006 | <a href="index-6.html" class="c_text">Privacy Policy</a> | <a href="#" class="c_text">Terms of Use</a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="740" style="height:51px" valign="top"></td>
</tr>
</table>
</td>
<td width="15" style="height:740px" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
MySQL: 5.0.45
PHP: 5.2.6
Linux 2.6.9-023stab048.6-enterprise #1
cURL enabled
PDO enabled
FFox Apple 3.6.8
Firebug DIS-abled
I have no skills whatsoever. I’m ready to start studying CSS though and was wondering what book or website was a good place to start. So in your opinion even though you haven’t seen the rest of the files, should I even bother with trying to convert everything? If not, can anyone recommend a template to get me started for a web hosting business? Or perhaps to a designer who has decent prices for modx work? Thanks
I can empathize with not having skills in this area. I’ve taught myself but since you’re starting a business you will probably want to focus on the business end of things.
I’ve used a template monster template once before. I converted it from tables to CSS layout and no inline styles. I’m going to send you a PM.
MySQL: 5.0.45
PHP: 5.2.6
Linux 2.6.9-023stab048.6-enterprise #1
cURL enabled
PDO enabled
FFox Apple 3.6.8
Firebug DIS-abled
-
☆ A M B ☆
- 24,524 Posts