Better template styling

305 Posts

Dayton Web Design Reply #1, 14 years ago

I have been pondering a better way to insert a few head tags into one page of a template, without creating a duplicate template just for these head tags of this one page. And without these head tags showing on every page of the site (where they are not needed).

I have been reading about CSS and adding a ID tag to the body for improved styling. This is great because it would allow for one template to be created, but the ID tag on this one page would serve up the proper code. I am looking for a similar type solution for MODx.

My template looks like this:

<!DOCTYPE GOES HERE">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Some Keywords in Here" />
<meta name="description" content="Description Goes Here" />
<title>MY WEBSITE - [[*pagetitle]]</title>
<link href="css/pstyle.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<![endif]-->
</head>

<body>

<div id="main">
	<!-- HEADER & NAV -->
    	[[$Nav]]
	<!-- END HEADER & NAV -->
	<!-- BODY -->
	<div id="body">
		<div id="body_content">[[*content]] </div>
	</div>
	<div id="footer">
		<div class="floatleft">[[$footer]] </div>
	</div>
</div>

</body>

</html>

As you can see in my template has several includes. I have a Nav and Footer chunk which serves up HTML for my site. The problem is on a few websites I have an image gallery. In the header of this one template page I have to have 3 lines of javascript code to server this gallery. The way I currently solve this i;s I have a duplicate template with these 3 lines of code added, and I only apply this template to this one page. While this works well it is not ideal as far changing template in the future. This is the type of reason CSS was created for in the first place.

I am sure this is a simpler way of including this code into the header of just one page, without having to have a duplicate template. Anyone have any solutions?
[ed. note: wbbuilder last edited this post 14 years ago.]

Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years ago

I use snippets with the regClientScript() and regClientCSS() and regClienStartupScript(). There is also a regClientHTMLBlock() for inserting blocks of HTML code. For example, on a page with a form where I want a Javascript datepicker, I'll just put the snippet in the content. Or, you could have a checkbox TV with all of your "loader" snippets available to select from. The TV tags would go in your template, and only load the items you select for a resource.

<?php
$modx->regClientCSS('assets/js/css/smoothness/jquery-ui-1.8.23.custom.css');
$modx->regClientScript('assets/js/jquery-ui-1.8.16.custom.min.js');
$js = '<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>';
$modx->regClientScript($js);
return;

http://rtfm.modx.com/display/revolution20/modX.regClientCSS
http://rtfm.modx.com/display/revolution20/modX.regClientHTMLBlock
http://rtfm.modx.com/display/revolution20/modX.regClientScript
http://rtfm.modx.com/display/revolution20/modX.regClientStartupHTMLBlock
http://rtfm.modx.com/display/revolution20/modX.regClientStartupScript

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

151 Posts

Eric SWD Reply #3, 14 years ago

One thing I have been using lately, much less advanced than Susans solution, is creating TVs that only I see for use on all templates. That way if I want to add something to the page in code the end users don't see it and I don't have to create a new template for only a slight modification.

You could just as easily create a TV for the head area that is only available to your superadmin user and insert it into the templates you want to modify slightly. You can drop HTML, Chunks or TVs right into it for the selected Resource.

So in your template example I would just add a TV like

[[*headAlt]]

or whatever you want to name it, right before the closing tag. Any CSS you apply will over write the same named CSS elements or you can add additional javascript, CSS file links, etc to it. [ed. note: eric.swd last edited this post 14 years ago.]

MODX...the Zen of CMS
"Bight off more than you can chew and keep right on chewing."