We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 25581
    • 16 Posts
    roulettered56 Reply #1, 18 years ago
    Hey all,

    someone recently said MODx can intergrate with 80% of templates.

    I use a WYSIWYG site builder and was wondering if I could use it to build the main layout for my MODx site?

    The builder I use does not use external "style sheets" but lists the styles in the code itself.

    My question is.. can I build a MODx site with this sort of template just by adding TV’s like [*content*] etc to the code below?:

    Here’s a quick example I made with the builder:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>my modx template</title>
    <style type="text/css">
    div#container
    {
       width: 800px;
       position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
    }
    body
    {
       text-align: center;
       margin: 0;
    }
    </style>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    <div id="bv_" style="position:absolute;left:100px;top:153px;width:442px;height:528px;z-index:2" align="left">
    <table width="100%" border="1" cellpadding="0" cellspacing="1" id="Table1">
    <tr>
    <td align="left" valign="top" width="438" height="524"><font style="font-size:13px" color="#000000" face="Arial">THIS IS WHERE MY MAIN CONTENT WILL GO</font></td>
    </tr>
    </table></div>
    <div id="container">
    <div id="bv_" style="position:absolute;left:549px;top:153px;width:249px;height:326px;z-index:0" align="left">
    *** RANDOM HTML CONTENT  ***</div>
    <div id="bv_" style="position:absolute;left:98px;top:0px;width:704px;height:103px;z-index:1" align="left">
    <img src="bv01366.gif" id="Shape1" align="top" alt="HEADER IMAGE" border="0" width="704" height="103"></div>
    </div>
    </body>
    </html>


    I appreciate all your help and please let me know where I’m going wrong.

    Thank you,
    Louis

    P.S. I know the code spewed out by the builder is garbage but it gets me by whilst learning clean CSS coding smiley
      • 25663 MODX Staff
      • 12,272 Posts
      I’d say modx can reproduce close to if not in fact 100% of any XHTML/CSS template, even ones with pure tables. The code you presented above is certainly no exception.
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 3749
        • 24,544 Posts
        It should work, but it will drive you completely nuts, IMO. wink

        It mixes the <style> stuff with in-tag css and it uses no class or id identifiers, so it will be nearly impossible to tell what’s going on once things get at all complicated and a complete nighmare to convert to pure CSS.

        The sooner you dump the tool and move the .CSS into a CSS file, the better off you’ll be. MODx has a WYSIWIG editor (more than one, actually) that doesn’t do any significant CSS stuff so you can still have some control without crapping things up totally. And you really don’t want to be putting your main content in a table. Any tool that does that is doing you more harm than good.

        Just my $.02.

          Did I help you? Buy me a beer
          Get my Book: MODX:The Official Guide
          MODX info for everyone: http://bobsguides.com/modx.html
          My MODX Extras
          Bob's Guides is now hosted at A2 MODX Hosting
          • 27708 MODX Staff
          • 2,502 Posts
          There is no template that you’ve built using CSS and HTML no matter how or of what quality that can’t be used in modx.

          That being said there are dozens of editors out there free and paid that can produce better HTML/CSS than that. Inline styles, Font elements, and deprecated attributes like bgcolor are very outdated. NVU editor is a free open source WYSIWYG editor that outputs far better HTML than above. There are a number of others. I’m not saying abandon WYSIWYG until you are ready to make the switch but you are actually going to make it harder by continuing to use an editor that spews out worse HTML than even TINYMCE or FCKEditor.

          I started web design using Dreamweaver in Design View and at that time its output was not great (Dreamweaver 3). I started having to spend so much time in the Code View to fix problems with the layouts that I eventually dumped Dreamweaver for HTML Kit and now Textmate.

          Unless you are designing for IE5 there is no reason you can’t just switch your single column table out with a div.

          Here’s a basic page with less markup and the CSS styles in the head can all be placed in an external file:
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">
          
          <html lang="en">
          <head>
          	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          	<title>untitled</title>
          	<style type="text/css" media="screen">
          		html{background:#aa9 url(bg_imgurl.png) 0 0;}
          		body{width:760px;margin:0px auto;}
          		#header,#content,#subcontent,#footer{margin-bottom:20px;border:2px solid #333;padding:20px;}
          		#content{float:left;margin:0 20px 20px 0;width:480px;}
          		#subcontent{float:left;margin:0;width:172px;}
          		#footer{clear:both;}
          	</style>
          	</head>
          <body>
          	<div id="header">
          	    <p>Header Image</p>
          	</div>
          	<div id="content_wrapper">
          		<div id="content">
          			<h1 id="heading">Heading</h1>
          			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          			</p>
          		</div>
          		<div id="subcontent">
          			<p>Random Content</p>
          		</div>
          	</div>
          	<div id="footer">
          		Footer content
          	</div>
          </body>
          </html>

            Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub
            • 25581
            • 16 Posts
            roulettered56 Reply #5, 18 years ago
            Thanks for all the help guys.

            Of course the code I used for an example was garbage but just to re-assure myself.. I CAN add some Variables to that (like [*content*]) and be on my way?

            Also, I’ve noticed with CSS if the images are backgrounds they load quicker. how do I add images etc without placing them in the actuall page code,.. External CSS file?

            smashingred, I’d love to use your clean template but editing to my liking is gonna be hard without using the WYSIWYG sad

            Thank you,
            Louis
              • 27708 MODX Staff
              • 2,502 Posts
              What Editor are you using? Did you look at NVU?

              Background images don’t load faster but they are nice to use. You likely won’t be able to use them in the WYSIWYG editor b/c is seems as though it is not good even for WYSIWYG editors.

              Here is my design workflow:

              Design layout in Fireworks.
              Create HTML layout for the images and styles based on layout.
              Export individual elements from Fireworks that can only be rendered by image.
              With my browser open to the template I am working on I will edit the HTML file in my text editor.
              At each major change, I refresh my browser to see changes and make adjustments.

              People who are designing websites don’t do the entire thing in the text editor without looking at the page to make adjustments we just don’t use the imprecise functions of the WYSIWYG editor to move, change adjust elements.

              The sooner you drop the use of the WYSIWYG editor the sooner you will understand how easy it is to build good html.

              Yes, I have experience but you will not learn by looking at bad code but learning to produce good, clean code.
                Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub