can this be converted to a modx template

20 Posts

rockstar Reply #1, 18 years, 7 months ago

I wonder if some one could look at this and see if it can be made into a modx template.

http://www.hexagora.com/download/dhe/templates/vista1/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Home - Vista Inspirat</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="Dynamic HTML Editor v.4.0 - http://www.hexagora.com">
<meta name="AUTHOR" content="Callehost Callehost.com">
<script language="javascript" type="text/javascript">
<!--
var isNS=document.layers?true:false;
var isIE=(document.all!=null)||(navigator.userAgent.indexOf('MSIE')!=-1);
var isDom2=document.getElementById;
var fVers=parseFloat(navigator.appVersion);
if (!isDom2 && ((isNS && fVers<4)||(isIE && fVers<4)))
    alert("Your browser is very old. Please upgrade it if you want to see this page correctly.");

//-->
</script>
<script language="javascript" type="text/javascript" src="files/dhwe4x.js"></script>

<script language="javascript" type="text/javascript">
<!--
var dheroll_this = jsGetArray ("files/shared_master_mastergfxmenu1_0o.png;files/shared_master_mastergfxmenu1_0.png;files/shared_master_mastergfxmenu1_0c.png;files/shared_master_mastergfxmenu1_1o.png;files/shared_master_mastergfxmenu1_1.png;files/shared_master_mastergfxmenu1_1c.png;files/shared_master_mastergfxmenu1_2o.png;files/shared_master_mastergfxmenu1_2.png;files/shared_master_mastergfxmenu1_2c.png;files/shared_master_mastergfxmenu1_3o.png;files/shared_master_mastergfxmenu1_3.png;files/shared_master_mastergfxmenu1_3c.png;files/shared_master_mastergfxmenu1_4o.png;files/shared_master_mastergfxmenu1_4.png;files/shared_master_mastergfxmenu1_4c.png;");
//-->
</script>

<link rel="stylesheet" type="text/css" href="files/index.css">
<link rel="stylesheet" type="text/css" href="files/master.css">


</head>
<body text="#000000" bgcolor="#808080" link="#0000FF" alink="#FF0000" vlink="#800080">
<div id="dhecenterdiv1" align="left">
<div id="ldhemasterFilledRRect1" style="position: absolute; left: 1px; top: 27px;" align="left">
<img id="masterFilledRRect1" name="masterFilledRRect1" src="files/shared_master_masterfilledrrect1.png" width="796" height="766" border="0" alt=""></div>
<div id="ldhemasterFilledRRect2" style="position: absolute; left: 7px; top: 35px;" align="left">
<img id="masterFilledRRect2" name="masterFilledRRect2" src="files/shared_master_masterfilledrrect2.png" width="777" height="136" border="0" alt=""></div>
<div id="ldhemasterFilledBezier1" style="position: absolute; left: 1px; top: 27px;" align="left">
<img id="masterFilledBezier1" name="masterFilledBezier1" src="files/shared_master_masterfilledbezier1.png" width="270" height="766" border="0" alt=""></div>
<div id="ldhemasterGrLabel1" style="position: absolute; left: 316px; top: 69px;" align="left">
<img id="masterGrLabel1" name="masterGrLabel1" src="files/shared_master_mastergrlabel1.png" width="459" height="64" border="0" alt=""></div>
<div id="ldhemasterFilledBezier2" style="position: absolute; left: 1px; top: 35px;" align="left">
<img id="masterFilledBezier2" name="masterFilledBezier2" src="files/shared_master_masterfilledbezier2.png" width="231" height="758" border="0" alt=""></div>
<div id="ldhemasterGfxMenu1" style="position: absolute; left: 5px; top: 175px;" align="left">
<table width="779" border="0" cellspacing="0" cellpadding="0"><tr><td width="156" align="left"><a href="index.htm" onmouseover="jsRoll('masterGfxMenu1_0',0,dheroll_this);" onmouseout="jsRoll('masterGfxMenu1_0',1,dheroll_this);" onmousedown="jsRoll('masterGfxMenu1_0',2,dheroll_this);" onmouseup="jsRoll('masterGfxMenu1_0',1,dheroll_this);"><img id="masterGfxMenu1_0" name="masterGfxMenu1_0" src="files/shared_master_mastergfxmenu1_0.png" width="155" height="26" border="0" alt=""></a></td><td width="156" align="left"><a href="about.htm" onmouseover="jsRoll('masterGfxMenu1_1',3,dheroll_this);" onmouseout="jsRoll('masterGfxMenu1_1',4,dheroll_this);" onmousedown="jsRoll('masterGfxMenu1_1',5,dheroll_this);" onmouseup="jsRoll('masterGfxMenu1_1',4,dheroll_this);"><img id="masterGfxMenu1_1" name="masterGfxMenu1_1" src="files/shared_master_mastergfxmenu1_1.png" width="155" height="26" border="0" alt=""></a></td><td width="156" align="left"><a href="services.htm" onmouseover="jsRoll('masterGfxMenu1_2',6,dheroll_this);" onmouseout="jsRoll('masterGfxMenu1_2',7,dheroll_this);" onmousedown="jsRoll('masterGfxMenu1_2',8,dheroll_this);" onmouseup="jsRoll('masterGfxMenu1_2',7,dheroll_this);"><img id="masterGfxMenu1_2" name="masterGfxMenu1_2" src="files/shared_master_mastergfxmenu1_2.png" width="155" height="26" border="0" alt=""></a></td><td width="156" align="left"><a href="products.htm" onmouseover="jsRoll('masterGfxMenu1_3',9,dheroll_this);" onmouseout="jsRoll('masterGfxMenu1_3',10,dheroll_this);" onmousedown="jsRoll('masterGfxMenu1_3',11,dheroll_this);" onmouseup="jsRoll('masterGfxMenu1_3',10,dheroll_this);"><img id="masterGfxMenu1_3" name="masterGfxMenu1_3" src="files/shared_master_mastergfxmenu1_3.png" width="155" height="26" border="0" alt=""></a></td><td width="155" align="left"><a href="contact.htm" onmouseover="jsRoll('masterGfxMenu1_4',12,dheroll_this);" onmouseout="jsRoll('masterGfxMenu1_4',13,dheroll_this);" onmousedown="jsRoll('masterGfxMenu1_4',14,dheroll_this);" onmouseup="jsRoll('masterGfxMenu1_4',13,dheroll_this);"><img id="masterGfxMenu1_4" name="masterGfxMenu1_4" src="files/shared_master_mastergfxmenu1_4.png" width="155" height="26" border="0" alt=""></a></td></tr></table></div>
<div id="ldhemasterLabel1" style="position: absolute; left: 155px; top: 802px; width: 529px; height: 18px; text-align: justify;" align="left">
<span class="trebuchetms10FFFFFFFFFFFFt">Copyrigth ® 2008 Your Company . Design by Callehost.com. Use as you want (free) .</span></div>
<div id="ldhemasterStdLine1" style="position: absolute; left: 204px; top: 693px;" align="left">
<table width="568" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000"><tr><td width="568" height="1" bgcolor="#808080"><img src="files/blank.gif" border="0" alt=""></td></tr></table></div>
<div id="ldhemasterGrLabel2" style="position: absolute; left: 26px; top: 116px;" align="left">
<img id="masterGrLabel2" name="masterGrLabel2" src="files/shared_master_mastergrlabel2.png" width="286" height="22" border="0" alt=""></div>
<div id="ldhemasterLabel2" style="position: absolute; left: 19px; top: 44px; width: 280px; height: 16px; text-align: justify;" align="left">
<span class="verdana100FFFFFFt">CALL US 800 555 123</span></div>
<div id="ldhemasterRSS1" style="position: absolute; left: 751px; top: 151px;" align="left">
<a href="RSS1.xml">
<img id="masterRSS1" name="masterRSS1" src="files/shared_master_masterrss1.png" border="0" alt="Your RSS"></a></div>
<div id="ldhemasterLabel3" style="position: absolute; left: 603px; top: 151px; width: 139px; height: 16px; text-align: justify;" align="left">
<span class="verdana10C0C0C0FFFFFFt">your RSS channel:</span></div>
<div id="ldheGrLabel4" style="position: absolute; left: 216px; top: 212px; width: 551px; height: 339px; text-align: left;" align="left">
<table border="0" cellspacing="0" cellpadding="0"><tr><td width="551" height="339" align="left" valign="middle"><span class="tahoma14FF0000FFFFFFtb"><br>:: WELCOME!</span><span class="tahoma140FFFFFFtb"><br><br><br></span><span class="verdana80FFFFFFtb">Lorem ipsum dolor sit amet,</span><span class="verdana80FFFFFFt"><br><br>consectetuer adipiscing elit. Etiam vehicula tincidunt tortor. Nunc felis purus, rhoncus et, tempus eu, cursus vel, felis. Cras id odio. Nam eleifend vehicula nibh. Nam fringilla. Morbi lobortis, augue sed gravida fermentum, tortor lectus iaculis neque, ut faucibus risus nunc sed est. Proin pretium magna quis ante. Proin laoreet. Aenean scelerisque bibendum nisi. In porttitor nulla. Aliquam laoreet dictum nulla. Nullam cursus eleifend nulla. <br><br>Suspendisse potenti. Suspendisse potenti. Vivamus id orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tristique. Donec elementum. Sed semper lorem vel urna. Integer sit amet metus in ipsum ultricies consequat. Phasellus id est nec dolor suscipit dignissim. Quisque nulla orci, pharetra nec, pellentesque eu, tristique dignissim, sapien. Fusce luctus gravida nulla. <br><br>Etiam semper sem vitae tellus. Aliquam aliquet iaculis risus. Donec turpis. Nulla facilisi. Quisque quis risus. Sed nunc tellus, elementum posuere, tincidunt ac, consequat dignissim, odio. Curabitur condimentum feugiat urna. Integer condimentum tincidunt ligula. Cras sed enim quis quam venenatis interdum. Vivamus nisi eros, viverra sed, elementum in, luctus consectetuer, nisi.</span></td></tr></table></div>
<div id="ldhePicture1" style="position: absolute; left: 22px; top: 364px;" align="left">
<img id="Picture1" name="Picture1" src="files/index_picture1.png" width="171" height="124" border="0" alt=""></div>
<div id="ldhemasterLabel4" style="position: absolute; left: 188px; top: 820px; width: 476px; height: 14px; text-align: justify;" align="left">
<span class="tahoma9FFFFFFFFFFFFt">ICONS by</span><span class="tahoma9FFFFFFFFFFFFtu"><a href="http://www.visualpharm.com" class="tahoma9FFFFFFFFFFFFtu"> http://www.visualpharm.com</a></span><span class="tahoma9FFFFFFFFFFFFt"> [keep this link if you will use those icons]</span></div>
<div id="ldhemasterGrLabel3" style="position: absolute; left: 66px; top: 701px;" align="left">
<img id="masterGrLabel3" name="masterGrLabel3" src="files/shared_master_mastergrlabel3.png" width="112" height="23" border="0" alt=""></div>
<marquee id="ldhemasterGrLabel4" style="position: absolute; left: 211px; top: 707px; width: 551px; height: 57px; text-align: left;" scrollamount="1" scrolldelay="90" behavior="scroll" loop="-1" direction="Up" width="551" height="57">
<span class="verdana8FF0000FFFFFFtb">Latest upgrades!!</span><span class="verdana80FFFFFFt"><br><br></span><span class="verdana8808000FFFFFFt">consectetuer adipiscing elit. Etiam vehicula tincidunt tortor. Nunc felis purus, rhoncus et, tempus eu, cursus vel, felis. Cras id odio. Nam eleifend vehicula nibh. Nam fringilla. Morbi lobortis, augue sed gravida fermentum, tortor lectus iaculis neque, ut faucibus risus nunc sed est. Proin pretium magna quis ante. Proin laoreet. Aenean scelerisque bibendum nisi. In porttitor nulla. Aliquam laoreet dictum nulla. Nullam cursus eleifend nulla. <br></span><span class="verdana8FF0000FFFFFFtb">Another release!!</span><span class="verdana8808000FFFFFFt"> <br><br>Suspendisse potenti. Suspendisse potenti. Vivamus id orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tristique. Donec elementum. Sed semper lorem vel urna. Integer sit amet metus in ipsum ultricies consequat. Phasellus id est nec dolor suscipit dignissim. Quisque nulla orci, pharetra nec, pellentesque eu, tristique dignissim, sapien. Fusce luctus gravida nulla. <br><br></span><span class="verdana8FF0000FFFFFFtb">Easy shopping!!</span><span class="verdana8808000FFFFFFt"><br><br>Etiam semper sem vitae tellus. Aliquam aliquet iaculis risus. Donec turpis. Nulla facilisi. Quisque quis risus. Sed nunc tellus, elementum posuere, tincidunt ac, consequat dignissim, odio. Curabitur condimentum feugiat urna. Integer condimentum tincidunt ligula. Cras sed enim quis quam venenatis interdum. Vivamus nisi eros, viverra sed, elementum in, luctus consectetuer, nisi.</span></marquee></div>
</body>
</html>

It was made with

http://www.dynamic-html-editor.com/en/home.asp

an exellent wysiwyg editor that I would like to use to design templates with...

Thanks for any input

edit--I am not asking anyone to do it--just --can it be done at all...

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 18 years, 7 months ago

Don’t see why not. Simply paste that into a new Template field and insert the MODx tags for content, etc. in the appropriate places. MODx doesn’t care what your HTML and javascript look like.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

20 Posts

rockstar Reply #3, 18 years, 7 months ago

Thanks very much sottwell--I was hoping you were around kiss

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 18 years, 7 months ago

I’m flattered, but I’m afraid I have to say that I’m already promised to MODx wink

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

20 Posts

rockstar Reply #5, 18 years, 7 months ago

I cannot compete :’(

4,205 Posts

dev_cw Reply #6, 18 years, 7 months ago

Don’t forget to add the <base> tag and to change the paths to work within modx: assets/.... You may also want to place all the styling into a style sheet rather than having it all inline. This will make it easier to maintain but may be a bit of work to get done.

The menu is not the standard that wayfinder is used to handle. You could simply hard code it and not deal with the wayfinder templating. It is table/javascript based with some custom settings on each menu item. You can handle this with some crativity but not standard for WF.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 18 years, 7 months ago

If the structure for the main part of the site, reflected in the main menu, isn’t going to change, then a dynamic menu isn’t really needed (unless you want to mark the "current" page so it can be styled differently). A static menu can work just fine in that case. In fact, it will improve your page’s performance slightly not to have the Wayfinder snippet being processed if it’s not really being used for any dynamic menu generation.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

20 Posts

rockstar Reply #8, 18 years, 7 months ago

Hmm I got so many emails yesterday i missed that this was getting replies--sorry.

Thanks for all the replies/help...this may not have been the best thing to try [first time to convert is what I am thinking....

I was worried a little about the inline styles...As far as the menu goes--in the new version of the editor the whole top of the page and the + the menu +backround is included in what is called the master page. On the maser page is a page placeholder where you add all the content for each page.You do not have to include the master page or even have one if yuo make hjust one page--which is all modx needs right..... .I half tried to convert it, but it did not "happen".

I don’t think I can do it, but I will continue to try as long as no one has said it can’t be done. It is not an emergency. I just was hoping the designing could be done in DHE editor and the conversion would be "not too difficult" It is a great tool tfor designing.

The editor does produce clean xhtml if you choose xhtml as doctype. I may be wrong, but it may be easier to decipher the source in xhtml with just divs. Different names would also not hurt,but I can get used to that once I do a few...

This particular page was also part of a project [the whole site--all of the pages] is a project. It makes life pretty simple when you use it,but you can just make a static page with no master page or placeholder and no project.

That may be worth a shot.Just one page I mean

There is a free fully functional 30 day trial if anyone cares to look at it. I am not plugging it [or I would have done it already]--although I do love it. It just happens to be what the page was made with...Like I said it is good/fast for designing websites--I wish I had more of an imagination so i could make better use of it...

884 Posts

sinbad Reply #9, 18 years, 7 months ago

don’t give up yet, I paid $150 for a forum member to convert my first template I bought on templatemonster into modx...
After few days, when I messed with the template he did I saw that it’s not big deal at all and since then I made 4 sites that I converted myself.
look on the general layout in your mind and split it to easy to handle sections.
for example, instead of the stuff they put inside the <head></head> section create a TV [*PageHeaders*] with the <head> content and put that TV in your template. Do the same for the side bar,login box, footer, etc. and you have a modx template.
There should be guides around how to get going with templates, maybe even in modx docs themselves.
all this blahblah is just to say that it’s not as hard as it first look, and to convert a template you need ass not creativity, that’s on the designer end

4,205 Posts

dev_cw Reply #10, 18 years, 7 months ago

for example, instead of the stuff they put inside the <head></head> section create a TV [*PageHeaders*] with the <head> content and put that TV in your template. Do the same for the side bar,login box, footer, etc. and you have a modx template.

Why use a TV, it is much simpler to use a chunk to store the site template parts. You could say that you are breaking the template into chunks rolleyes

Then if you need to you can use a TV to choose between parts to use, like if you have various headers.

Chunks are lighter on the system and ideal for static stuff like html headers and foters, etc.

I once had a template that ended up looking like this:

{{headSection}}
{{mainNav}}
{{mainBody}}
{{sideBar}}
{{footer}}

Then I could build additional templates by simply switching parts out.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]