Hi ModX,
I am creating my first site using ModX and I’m roughly halfway through where I want to be.
I have ported over my existing HTML/CSS/JQuery site and have got the functionality of the site to where it is naturally, and am now trying to implement the [*content*] fields in order to create the editable regions required by the client.
The problem I am encountering is that when I insert [*content*] into my page, it does not then display what has been written in the ’Resource Content’ section, and just displays as "[*content*]" on screen.
Here is the code I’ve got currently:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Felix The Cat</title>
<base href="[(site_url)]" /></base>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<link href="assets/templates/felix/styles/felix.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="assets/templates/felix/styles/supersized.2.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 0, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 7000
};
$('#supersize').supersized();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17031994-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!--Loading display while images load-->
<div id="loading"> </div>
<!--Slides-->
<div id="supersize">
<div><img src="/felixthecat/modx/assets/templates/felix/images/felix6.jpg" title="Felix Bar Interior" alt="Felix Bar Interior"></div>
</div>
<div id="logo">
<a href="index.php?id=1"><img src="/felixthecat/modx/assets/templates/felix/images/felixlogo.png" title="Felix Logo" alt="Felix Bar Logo"></a></div>
<!-- CONTENT -->
<div id="navigation">
<ul id="navlist">
<li class="button"><a href="javascript:void(0)" onClick="window.location.href='index.php?id=1'">HOME</a>
<li class="button"><a href="javascript:void(0)" onClick="window.location.href='index.php?id=3'">FUNCTIONS</a>
<li class="button"><a href="javascript:void(0)" onClick="window.location.href='index.php?id=4'">FOOD AND WINE</a>
<li class="button"><a href="javascript:void(0)" onClick="window.location.href='index.php?id=5'">WHAT'S ON</a>
<li class="button"><a href="javascript:void(0)" onClick="window.location.href='index.php?id=6'">CONTACT</a>
</ul>
</div>
<div id="facebookpng" style="height: 45px">
<a href="http://www.facebook.com/TheFelixBar" target="_blank"><img src="/felixthecat/modx/assets/templates/felix/images/facebookpng45.png" title="Facebook Link" alt="Felix Facebook Link"></a>
</div>
<div id="twitterpng" style="height: 45px">
<a href="http://twitter.com/FelixBarComedy" target="_blank"><img src="/felixthecat/modx/assets/templates/felix/images/twitterpng45.png" title="Twitter Link" alt="Felix Twitter Link"></a>
</div>
<!-- END NAVIGATION -->
<div id="functions">
<div class="functionsframe">
<p><h1>FUNCTIONS</h1></p>
<br>
[*content*]
</div>
</div>
<div id="upstairs">
<div class="upstairslink">
<p><a href="index.php?id=8">THE CAT</a></p>
</div>
</div>
<div id="downstairs">
<div class="downstairslink">
<p><a href="index.php?id=7">LOUNGE & COURTYARD</a></p>
</div>
</div>
</body>
</html>
I have tried using the following code with the same outcome:
<div id="functions">
[*content*]
</div> (this can be seen on the page
http://tomphilli.ps/felixthecat/modx/index.php?id=4 )
Here is a screencap of how it’s displaying in browser (Chrome):
http://min.us/mvgmaae
And here is a link to the live site:
http://tomphilli.ps/felixthecat/modx/index.php?id=3
Help!
I’m assuming this is something really basic that I’m failing to grasp.
Here’s a screencap of where I am writing the content that I assume is inserted into [*content*]. Have I got the wrong tag in the wrong place? I tried using [*longtitle*] to see if that would work but had the same issue.
http://min.us/mvglVJP
Thanks,
wassailant
☆ A M B ☆