"Custom" template for MODx | MODX Community Forums

84 Posts

kOLDSQ Reply #31, 16 years, 8 months ago

Ahh, sorry laugh

Didnt know that was possibel.

312 Posts

allanb Reply #32, 16 years, 8 months ago

I am not sure what you mean by not using CMS system for sidepanels.

Sidepanels or left & right columns can be static content in template or in Chunks called by template.

I think to control their content outside of MODx would be an even greater task than creating a template.

Maybe I haven understood you properly.

If you could post your Template code in Code Tags like so:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<title>[(site_name)] - [*#pagetitle*] </title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments" />
	<meta name="keywords" content="Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments" />
	<meta name="robots" content="index, follow" />
        <link href="assets/templates/threecolumn_px/css/style_f.css" rel="stylesheet" type="text/css" />
        <base href="[(site_url)]" />
</head>
<body>
<div id="fixed">
<div id="header">

{{3col_header_px}}

</div>


<div id="metaltop-gold">
[!Wayfinder? &startId=`0` &firstClass=`first`!]
</div>

<div id="colmask">
	<div id="colmid">
		<div id="colright">
			<div id="col1wrap">
				<div id="col1pad">
					<div id="col1">
						<!-- Column 1 start -->

                                                 {{3col_column1_px}}

						<!-- Column 1 end -->
					</div>
				</div>

			</div>
			<div id="col2">
				<!-- Column 2 start -->

                                {{3col_column2_px}}

				<!-- Column 2 end -->
			</div>
			<div id="col3">
				<!-- Column 3 start -->

                                {{3col_column3_px}}

				<!-- Column 3 end -->

			</div>
		</div>
	</div>
</div>
<div id="footer">

{{3col_footer_px}}

</div>
</div>

</body>
</html>

DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31

84 Posts

kOLDSQ Reply #33, 16 years, 8 months ago

I thought about something, must the stylesheet named style.css?

607 Posts

einsteinsboi Reply #34, 16 years, 8 months ago

Quote from: kOLDSQ at Jan 29, 2010, 04:11 PM

I thought about something, must the stylesheet named style.css?

It can be named whatever you want, as long as you reference it by its correct name in the <head> section of your document.

The Coding Pad - MODx MODx Beginner Tutorials
MODx Video Tutorials
MODx Development

84 Posts

kOLDSQ Reply #35, 16 years, 8 months ago

Can u tell me why won’t work, i have done as u said, i have linked to my stylesheet, it have worked before.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[(site_name)] » [*pagetitle*]</title>
<base href="[(tops)]" />
<link href="assets/templates/tops/stylesheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<style type="text/css">
.style1 {
	font-family: "Tahoma";
}
.style2 {
	text-align: center;
}
.style3 {
	color: #FFFFFF;
}
.style4 {
	font-family: "Times New Roman";
	color: #000000;
}
.style5 {
	font-family: Verdana;
}
.style7 {
	font-size: small;
}
.style8 {
	text-decoration: none;
}
.style10 {
	font-size: x-large;
}
.style11 {
	font-family: Verdana;
	font-size: large;
}
.style12 {
	font-family: Verdana;
	font-size: small;
}
.style13 {
	color: #000000;
	font-size: small;
}
.style14 {
	font-family: Verdana;
	font-size: small;
	color: #FFFFFF;
}
.style15 {
	color: #CCFFCC;
}
.style17 {
	font-size: x-small;
}
.style18 {
	font-family: Verdana;
	font-size: x-small;
}
.style19 {
	color: #000000;
}
.style20 {
	color: #333333;
}
</style>
</head>

☆ A M B ☆
24,524 Posts

sottwell Reply #36, 16 years, 8 months ago

As long as you have the stylesheet.css file in the assets/templates/tops folder of your MODx installation it will work.

What is this?

<base href="[(tops)]" />

There is no such system variable; do you mean

<base href="[(site_url)]" />

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

84 Posts

kOLDSQ Reply #37, 16 years, 8 months ago

Then i dont now why it isn’t working:
My stylesheet code:

}
body
.newStyle1 {
	background-image: url('assets/templates/tops/bg.gif');
}
#style1 { 
text-align: center; 
}
#style2 {
font-family: Tahoma;
}
#style3 {
font-size: small;
}
#style4 {
font-size: small; color: #000000;
} 
#style5 { 
color: #000000; 
}
#style6 {
border-width: 0px; 
}

312 Posts

allanb Reply #38, 16 years, 8 months ago

Hi again kOLDSQ

I looked at your posted code in your two posts above.

I do not understand you first ref your style sheet then use embedded style.

I think embeded overides linked style sheet.

Your stylesheet starts with }

Could you also post the rest of your template code.

DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31

84 Posts

kOLDSQ Reply #39, 16 years, 8 months ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[(site_name)] » [*pagetitle*]</title>
<base href="[(site_url)]" />
<link href="assets/templates/tops/stylesheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<style type="text/css">
.style1 {
	font-family: "Tahoma";
}
.style2 {
	text-align: center;
}
.style3 {
	color: #FFFFFF;
}
.style4 {
	font-family: "Times New Roman";
	color: #000000;
}
.style5 {
	font-family: Verdana;
}
.style7 {
	font-size: small;
}
.style8 {
	text-decoration: none;
}
.style10 {
	font-size: x-large;
}
.style11 {
	font-family: Verdana;
	font-size: large;
}
.style12 {
	font-family: Verdana;
	font-size: small;
}
.style13 {
	color: #000000;
	font-size: small;
}
.style14 {
	font-family: Verdana;
	font-size: small;
	color: #FFFFFF;
}
.style15 {
	color: #CCFFCC;
}
.style17 {
	font-size: x-small;
}
.style18 {
	font-family: Verdana;
	font-size: x-small;
}
.style19 {
	color: #000000;
}
.style20 {
	color: #333333;
}
</style>
</head>
<body>

<div id="masthead">
	<div style="position: absolute; width: 847px; height: 108px; z-index: 1; left: 662px; top: 291px" id="layer1">
		<div id="masthead">
			<h1>                   <span class="style5">     
			<span class="style10">[(site_name)]</span></span></h1>
			<h2>                                   
			<span class="style1">- </span>
			<span class="style11">[*longtitle*]</span></h2>
			<div class="clearing">
				<div style="position: absolute; width: 471px; height: 777px; z-index: 1; left: 185px; top: 113px" id="layer2">
					<span class="style4"><span class="style5">
					<span class="style7">[*content*]
<!-- end main --></span></span></span><span class="style5">
					<span class="style13"><br />
					</span>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					</span>
				</div>
			</div>
<!-- end masthead --></div>
		<div id="wrapper">
			<div id="main">
			</div>
			<div id="side2">
				<div style="position: absolute; width: 153px; height: 331px; z-index: 2; left: 678px; top: 76px" id="layer3" class="style1">
					<span class="style12"><span class="style12"><div id="sidebar-b">
		<h2><span class="style7">     Nyheder</span> </h2>
		<div class="scroll">
			</span>
					<span class="style5">
			<p class="style17"><span class="style17">- Den nye sæson er på vej. 
			Vi får sko/sandaler m.m fra:<br />
			Sketch, Mary B, ECCO, osv.</span><br />
			<br />
			<strong>BEMÆRK:</strong> TEST!</p>
		</div>
</div>
			</div>
				</span>
</div>
			</div>
			<div class="clearing">
			</div>
		</div>
	</div>
<!-- end wrapper -->
	<div style="position: absolute; width: 144px; height: 326px; z-index: 2; left: 680px; top: 370px" id="layer4" class="style12">
		[*leftside*]
<!-- end side1 --></div>
	<div style="position: absolute; width: 143px; height: 232px; z-index: 3; left: 678px; top: 733px" id="layer5">
		<span class="style12">[*leftside2*]
</span>
<!-- end side1 --></div>
	<div style="position: absolute; width: 150px; height: 233px; z-index: 4; left: 1341px; top: 731px" id="layer6" class="style2">
		<span class="style12"><span class="style7"><strong>Links</strong></span></span>
		<strong>
<!-- end side2 --><br />
		<br />
		</strong></span>
					<span class="style18"><span class="style19">
		<a href="http://www.tops.dk" class="style8">TOPS</a>.dk<br />
		</span><br />
		<span class="style20">
		<a href="http://www.dd-production.tk" class="style8">
		<span class="style19">DD Production</span></a></span></div>
	</span>
					<span class="style12">
	<div style="position: absolute; width: 155px; height: 237px; z-index: 5; left: 1339px; top: 1007px" id="layer7" class="style2">
		<strong>Nyeste modeller<!-- end side2 --><br />
		<br />
		</strong></span>
					<span class="style18">Her kommer der billeder af de nyeste 
		ankommende sko modeller.</div>
	</span>
					<span class="style12">
	<div style="position: absolute; width: 140px; height: 234px; z-index: 6; left: 680px; top: 1011px" id="layer8">
		<span class="style12">[*leftside3*]</span>
<!-- end side2 --></div>
	<div style="position: absolute; width: 550px; height: 25px; z-index: 7; left: 810px; top: 1307px" id="layer9" class="style2">
		<span class="style14">Copyright © 2010 - Tops</span><span class="style5"><span class="style7"><span class="style3">® Lemvig - all rights reserved.<br />
		Template by <a href="mailto:[email protected]" class="style8">
		<span class="style15">Joakim Koldsø</span></a></span></span></span></div>
</div>

</body>

</html>

84 Posts

kOLDSQ Reply #40, 16 years, 8 months ago

I do not understand you first ref your style sheet then use embedded style.

Where do u se the embedded style?

If u mean:

<style type="text/css">
.style1 {
	font-family: "Tahoma";
}
.style2 {
	text-align: center;
}
.style3 {
	color: #FFFFFF;
}
.style4 {
	font-family: "Times New Roman";
	color: #000000;
}
.style5 {
	font-family: Verdana;
}
.style7 {
	font-size: small;
}
.style8 {
	text-decoration: none;
}
.style10 {
	font-size: x-large;
}
.style11 {
	font-family: Verdana;
	font-size: large;
}
.style12 {
	font-family: Verdana;
	font-size: small;
}
.style13 {
	color: #000000;
	font-size: small;
}
.style14 {
	font-family: Verdana;
	font-size: small;
	color: #FFFFFF;
}
.style15 {
	color: #CCFFCC;
}
.style17 {
	font-size: x-small;
}
.style18 {
	font-family: Verdana;
	font-size: x-small;
}
.style19 {
	color: #000000;
}
.style20 {
	color: #333333;
}
</style>

Then its dosn’t work if i remove that.