We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 21172
    • 1 Posts
    Hello this is my first post here at these forums. I am setting up a website for myself because I like to make graphics for people. After using all of the content management systems out there I decided to settle with MODx. I am currently running wordpress and would like a clean simple non graphics heavy theme. I really like the theme called Gemstone that can be found here http://www.openwebdesign.org/viewdesign.phtml?id=2902&referer=%2F. I would love it if someone would either make or help me turn this into a theme. Anyone who would like to help out on converting this to MODx with me I will be sure to credit on my website. I find this theme very appealing and easy to navigate. Thanks.
      • 26799
      • 177 Posts
      I wish I could offer more help but I’ve not got a box at home right now, which unfortunately limits me to what I can persue.


      however this should get you started...

      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
      <meta name="description" content="description"/>
      <meta name="keywords" content="keywords"/> 
      <meta name="author" content="author"/> 
      <link rel="stylesheet" type="text/css" href="default.css"/>
      <title>[*sitetitle*]</title>
      
      <style>
      /*#############################################################
      Name: Gemstone
      Date: 2006-05-30
      Author: Viktor Persson
      URL: http://arcsin.se
      
      Feel free to use and modify but please provide credits.
      #############################################################*/
      
      /* Standard element */
      * {
      	margin: 0;
      	padding: 0;
      }
      body {
      	background: #999 url(img/bg.gif) repeat-y;
      	font-family: Tahoma,sans-serif;
      	font-size: 0.8em;
      	padding-left: 25px;
      }
      p {
      	margin-bottom: 1.2em;
      }
      ul {
      	margin: 0 0 10px 22px;
      }
      li {
      	list-style-image: url(img/li.gif);
      }
      
      /* Misc */
      .clearer {
      	clear: both;
      }
      div.quote {
      	border-left: 4px solid #36C;
      	clear: both;
      	color: #555;
      	display: block;
      	font: italic 1.1em Verdana,serif;
      	margin: 12px 0 12px 16px;
      	padding-left: 12px;
      }
      
      
      /* Top & Header */
      .top {
      	background: url(img/top.gif);
      	color: #FFF;
      	height: 45px;
      	width: 939px;
      }
      .top h1 {
      	font: bold 2em sans-serif;
      	padding: 8px 16px 0;
      }
      .top h1 span {
      	font: normal 60% Verdana,sans-serif;
      }
      .header {
      	background: url(img/header.gif); 
      	height: 101px;
      	width: 939px; 
      }
      
      
      /* Menu */
      div.menu ul {
      	float: left;
      	margin: 0 1px 0 0;
      }
      div.menu li {
      	list-style-image: none;
      }
      div.menu a {
      	background: #4B4B4B;
      	color: #DDD;
      	display: block;
      	font-family: sans-serif;
      	font-size: 85%;
      	padding: 5px 0 5px 8px;
      	text-decoration: none;
      	width: 180px;
      }
      div.menu a#current {
      	background: #666; color: #FFF;
      }
      div.menu a:hover {
      	background: #555; color: #FFF;
      }
      div.menu li {
      	list-style-type: none;
      	margin: 0 0 1px 0;
      	padding: 0;
      }
      
      
      /* Left side */
      div.content_left {
      	margin: 1px;
      	width: 593px;
      }
      div.date {
      	background: #0070CD url(img/bgdate.gif) repeat-x;
      	color: #FFF;
      	font-weight: bold;
      	padding: 10px;
      }
      div.newsitem {
      	background: #F0F0F0 url(img/bg_newsitem.png) repeat-x;
      	border: 1px solid #EEE;
      	border-color: #EEE #EEE #DDD #EEE;
      	clear: both;
      	color: #333;
      	line-height: 1.5;
      	margin: 6px;
      	padding: 10px;
      }
      div.newsitem img {
      	border: 3px double #CCC;
      	height: 120px;
      	margin: 6px 10px 10px 10px;
      	width: 120px;
      }
      div.newsitem img.left {
      	float: left;
      }
      div.newsitem img.right {
      	float: right;
      }
      div.newsitem .title {
      	color: #0066CC;
      	font: bold 1.2em Tahoma,sans-serif;
      	padding: 3px 4px;
      }
      div.newsitem .body {
      	font-family: "Trebuchet MS",Tahoma,sans-serif;
      	font-size: 0.9em;
      	text-align: justify;
      }
      
      
      /* Right side */
      div.content_right {
      	width: 331px;
      	position: absolute;
      	top: 116px;
      	left: 620px;
      }
      
      div.links a {
      	background: url(img/bg_navitem.gif) repeat-x #FFF;
      	display: block;
      	font: bold 0.8em Verdana,Tahoma,sans-serif;
      	padding: 6px 0 8px 8px;
      	text-decoration: none; color: #333;
      }
      div.links a:hover {
      	color: #0080DD; background-position: left bottom;
      }
      div.links div.line {
      	height: 1px; background-color: #EEEEF5;
      }
      div.links .title {
      	background: #333 url(img/bgsubtitle.gif) repeat-x;
      	color: #FFF;
      	font: normal 85% Tahoma,sans-serif;
      	padding: 5px 8px;
      }
      
      /* Footer */
      div.footer {
      	background: #F0F0F0 url(img/bgdate.gif) repeat-x;
      	border: 1px solid #EEE;
      	color: #FFF;
      	margin-left: 6px;
      	width: 581px;
      }
      div.footer .copyright {
      	padding: 6px 12px;
      }
      div.footer a {
      	color: #FFF;
      	font: bold 1em "Trebuchet MS",sans-serif;
      	text-decoration: none;
      }
      </style>
      
      </head>
      <body>
      <div class="top"><h1>[*sitetitle*] <span>your slogan goes here</span></h1></div>
      <div class="header">
      	<div class="menu">
      
      		<ul>
      			<li><div><a href="index.html" id="current">News</a></div></li>
      			<li><div><a href="index.html">News Archive</a></div></li>
      			<li><div><a href="index.html">Editorials</a></div></li>
      			<li><div><a href="index.html">Links</a></div></li>
      		</ul>
      		<ul>
      
      			<li><div><a href="index.html">Profiles</a></div></li>
      			<li><div><a href="index.html">Columns</a></div></li>
      			<li><div><a href="index.html">Hosted Sites</a></div></li>
      			<li><div><a href="index.html">Forum</a></div></li>
      		</ul>
      		<ul>
      			<li><div><a href="index.html">About</a></div></li>
      
      			<li><div><a href="index.html">Guidelines</a></div></li>
      			<li><div><a href="index.html">RSS Feeds</a></div></li>
      			<li><div><a href="index.html">Buttons</a></div></li>
      		</ul>
      	</div>
      </div>
      <div class="content_left">
      	[*content*]
      </div>
      <div class="content_right">
      	[[dropMenu]]
      </div>
      <div class="footer">
      	<div class="copyright">© 2006 <a href="index.html">Website</a>. Design by <a href="http://arcsin.se">Arcsin</a>.</div>
      
      </div>
      </body>
      </html>
      
      

      create a new template and past this into it, then create a new page from the template

      you may want to set up your style in an external stylesheet but to each his/her own...

      also, this template if it resembles your content will need multiple dropMenu instances through out, I suggest subfolders and setting up each instance of dropMenu to start in it’s designated folder. you can find more information on dropmenu by parusing the forum...

      hope this works out for you