[Solved] ... how to install my old layout into phpwcms

mullerrwd · Post by **mullerrwd** » Fri 13. Jul 2007, 22:07

Dear members,

I came across phpwcms a week ago. found it very good.
Install went perfect, configuration went perfect. And then the big big question came with the layout. How do I get my old layout into phpwmcs.
I took a look at a very understanding small doc about custom templates:
these are the results:
http://www.rwdweb.nl
I have put the {} ere i would like them.
this is what the code should look like:
Index.html

Code: Select all

<!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">
<head>
<title>rwdweb3blank</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div class="margin" id="top"><div id="topmenu">
 <ul>
			<li><a href="#" id="topmenu3" accesskey="3" title=""></a></li>
			<li><a href="#" id="topmenu2" accesskey="2" title=""></a></li>
			<li><a href="#" id="topmenu1" accesskey="1" title=""></a></li>

	</ul>
</div></div>
<div class="margin" id="middle"><div id="content">Content for  id "content" Goes Here</div></div>
<div class="margin" id="bottom">
  <ul id="navigation">
    <li id="home">
      <a href="#" class="style4"><strong>Rwd</strong>web<br /><span class="style6">Goals & Objectives</span></a>

    </li>
    <li id="portfolio"><a href="#" class="style4" ><strong>Port</strong>folio<br />
        <span class="style6">Creations & Clients</span><br />
    </a></li>
    <li id="solutions"><a href="#" class="style4"><strong>Solu</strong>tions<br />

    <span class="style6">Services & Solutions</span></a></li>
    <li id="work"><a href="#" class="style4"><strong>Wo</strong>rk<br />
    <span class="style6">Jobs & Partners</span></a></li>
    <li id="about"><a href="#" class="style4"><strong>Ab</strong>out<br />

    <span class="style6">You & Me</span></a></li>
    
  </ul>
</div>
<div class="margin" id="footer">
  <div>
    <div id="footer"><span class="margin style1"><a href="Http://www.rwdweb.nl"><span class="style2">Rwdweb</span></a><a href="Http://rwdweb.nl"></a></span><a href="Http://rwdweb.nl"><span class="style6">.nl</span></a> <span class="style2">&copy;</span> 20</span><span class="style2">07</span><span class="margin style1"> |Design & Coding By <a href="Http://www.rwdweb.nl"><span class="style2">Rwdweb</span></a><a href="Http://rwdweb.nl"></a></span><a href="Http://rwdweb.nl"><span class="style6">.nl</span></a><span class="margin style1"> | Info@<span class="style2">rwdweb</span></span>.nl | Disclaimer</div>

  </div>
</div>
</body>
</html>

css

Code: Select all

@charset "utf-8";
/* css for Rwdweb template */
/* For Phpwcms
/* Robert Muller
/* info@rwdweb.nl
/* Rwdweb.nl
/* July 2007

/* Layout Control START*/

html, body {
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
  background-color: #FFFFFF;
	font-size: 12px;
font-family:Myriad Pro;
  height: 100%;
}

td, tr, p, div {
font-family      : Myriad Pro;
font-size        : 12px;
color            : #000000;
}
body {
font-family      : Myriad Pro;
font-size        : 12px;
color            : #000000;
}
.margin {
	margin-left: auto;
	margin-right: auto;
}
#top {
	height: 49px;
	width: 853px;
	background: url(images/top.gif);
}
#middle {
	height: 396px;
	width: 853px;
	background: url(images/middle.gif);
}
#content {
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	color: #FFF;
}
#bottom {
	height: 120px;
	width: 853px;
	overflow: hidden;
	background: url(images/bottom.gif);
}
#navigation {
	float: left;
	margin-left: 60px;
	display: inline;
	padding: 0;
}
ul#navigation {
	margin-top: 0;
	color: #000;
	float: left;
	width: 100%;
	display: inline;
}
ul#navigation li {
	color: #000;
	display: inline;
}
ul#navigation li a {
	color: #000;
	text-decoration: none;
	float: left;
	display: inline;
}
#bottom #navigation #home a {
	width: 118px;
}
#home a:hover {
	text-decoration: none;
	color: #690;
}
#bottom #navigation #portfolio a {
	width: 125px;
}
#portfolio a:hover {
	text-decoration: none;
	color: #06f;
}
#bottom #navigation #solutions a {
	width: 131px;
}
#solutions a:hover {
	text-decoration: none;
	color: red;
}
#bottom #navigation #work a {
	width: 130px;
}
#work a:hover {
	text-decoration: none;
	color: #c00;
}
#bottom #navigation #about a {
	width: 110px;
}
#about a:hover {
	text-decoration: none;
	color: #f90;
}
#footer {
	width: 800px;
	text-align: center;
}
.style1 {
	color: #000;
	text-align: center;
}
.style2 {
	color: #F9587E;
	font-weight: 700;
}
#apDiv1 {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	margin-left: 377px;
	top: 177px;
	left: -47px;
}
#topmenu ul {
	margin-right: 40px;
	padding-top: 10px;
}
#topmenu li {
	display: inline;
}
#topmenu a {
	display: block;
	float: right;
	width: 20px;
	height: 20px;
}
#topmenu1 {
	background: url(images/home.gif) no-repeat;
}
#topmenu2 {
	background: url(images/contact.gif) no-repeat;
}
#topmenu3 {
	background: url(images/sitemap.gif) no-repeat;
}
.style4 {
	font-size: 27px;
}
.style6 {
	color: #000;
	font-size: 12px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #CCCCCC;
}
a:active {
	color: #000000;
}
#footer {
	text-align: center;
}
.pathway {
font-size        : 10px;
color            : #FFFFFF;
padding-left     : 8px;
}
a.pathway:link, a.pathway:visited {
font-size        : 10px;
color            : #FFFFFF;
padding-left     : 0px;
}
a.pathway:hover {
font-size        : 10px;
padding-left     : 0px;
color            : #FF9000;
}

So overall this is how the blocks should be installed:

Code: Select all

<div class="margin" id="top"><div id="topmenu">
 <ul>
			<li><a href="#" id="topmenu3" accesskey="3" title=""></a></li>
			<li><a href="#" id="topmenu2" accesskey="2" title=""></a></li>
			<li><a href="#" id="topmenu1" accesskey="1" title=""></a></li>

	</ul>
</div></div>
<div class="margin" id="middle">
  <div id="content">{Content}</div>
</div>
<div class="margin" id="bottom">
    {NAV_LIST_UL:F,O}
</div>


    <div id="footer">{FOOTER}
  </div>

This is what I configured following the small doc procedures:

So could someone tell me what i did wrong or what I should do.
And where should I put my images?
And so, what must the url be in the css?
I hope someone could really help me out here and also tell me when that wiki phpwcms is finished.
And how do i fix it with my menu wich is really complicated??
Thanks in advance
robert muller

Jensensen · Post by **Jensensen** » Fri 13. Jul 2007, 22:36

hi,

try this:

http://www.phpwcms.de/forum/viewtopic.php?t=15201

http://www.phpwcms.de/forum/viewtopic.php?p=86905

greetz

Post by **update** » Fri 13. Jul 2007, 22:43

... and change

Code: Select all

#content {
   width: 720px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 10px;
   color: #FFF;
}

into

Code: Select all

#content {
   width: 720px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 10px;
   color: #222;
}

to get a clue what's going on

claus

mullerrwd · Post by **mullerrwd** » Fri 13. Jul 2007, 22:45

hi , i have allready have had a look at both before, didn't bring me far.
But what I am curious about is that why my tags arent replaced???
Such as {footer}
If you look in the image of my first post, you see that I have put {FOOTER} in my footer div.
and below that (admin page) I put the code what I had in my first website in the footer box. And how about the images?
thanks

Post by **update** » Fri 13. Jul 2007, 22:50

what about {CONTENT} instead of {Content}
and
{FOOTER}
{LEFT}
{RIGHT}
seems to work better then..
and while defining everything within mainblock it should go there also... (take a look at your second pic again

mullerrwd · Post by **mullerrwd** » Fri 13. Jul 2007, 23:14

Ok thats seems to work. And how do I add content?
Must i add a template for each content

Post by **update** » Fri 13. Jul 2007, 23:20

No,
just go ahead and create some subsections below home/root (in admin section of backend)
these are reflected then within articles in backend - go there and create some articles ( move your mouse over the tiny icons - there are some help texts underneath.
It's easy, even I am able to do such thing

claus

mullerrwd · Post by **mullerrwd** » Sat 14. Jul 2007, 15:06

Ok thanks I am on my way now

.
Got images to be shown too.
But why does my template not align in center like I put in css???

Code: Select all

@charset "utf-8";
/* css for Rwdweb template */
/* For Phpwcms
/* Robert Muller
/* info@rwdweb.nl
/* Rwdweb.nl
/* July 2007

/* Layout Control START*/

html, body {
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
  background-color: #FFFFFF;
	font-size: 12px;
font-family:Myriad Pro;
  height: 100%;
}

td, tr, p, div {
font-family      : Myriad Pro;
font-size        : 12px;
color            : #000000;
}
body {
font-family      : Myriad Pro;
font-size        : 12px;
color            : #000000;
}
.margin {
	margin-left: auto;
	margin-right: auto;
}
#top {
	height: 49px;
	width: 853px;
	background: url(/img/rwdweb/top.gif);
}
#middle {
	height: 396px;
	width: 853px;
	background: url(/img/rwdweb/middle.gif);
}
#content {
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	color: #FFF;
}
#bottom {
	height: 120px;
	width: 853px;
	overflow: hidden;
	background: url(/img/rwdweb/bottom.gif);
}
#navigation {
	float: left;
	margin-left: 60px;
	display: inline;
	padding: 0;
}
ul#navigation {
	margin-top: 0;
	color: #000;
	float: left;
	width: 100%;
	display: inline;
}
ul#navigation li {
	color: #000;
	display: inline;
}
ul#navigation li a {
	color: #000;
	text-decoration: none;
	float: left;
	display: inline;
}
#bottom #navigation #home a {
	width: 118px;
}
#home a:hover {
	text-decoration: none;
	color: #690;
}
#bottom #navigation #portfolio a {
	width: 125px;
}
#portfolio a:hover {
	text-decoration: none;
	color: #06f;
}
#bottom #navigation #solutions a {
	width: 131px;
}
#solutions a:hover {
	text-decoration: none;
	color: red;
}
#bottom #navigation #work a {
	width: 130px;
}
#work a:hover {
	text-decoration: none;
	color: #c00;
}
#bottom #navigation #about a {
	width: 110px;
}
#about a:hover {
	text-decoration: none;
	color: #f90;
}
#footer {
	width: 800px;
	text-align: center;
}
.style1 {
	color: #000;
	text-align: center;
}
.style2 {
	color: #F9587E;
	font-weight: 700;
}
#apDiv1 {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	margin-left: 377px;
	top: 177px;
	left: -47px;
}
#topmenu ul {
	margin-right: 40px;
	padding-top: 10px;
}
#topmenu li {
	display: inline;
}
#topmenu a {
	display: block;
	float: right;
	width: 20px;
	height: 20px;
}
#topmenu1 {
	background: url(/img/rwdweb/home.gif) no-repeat;
}
#topmenu2 {
	background: url(/img/rwdweb/contact.gif) no-repeat;
}
#topmenu3 {
	background: url(/img/rwdweb/sitemap.gif) no-repeat;
}
.style4 {
	font-size: 27px;
}
.style6 {
	color: #000;
	font-size: 12px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #CCCCCC;
}
a:active {
	color: #000000;
}
#footer {
	text-align: center;
}
.pathway {
font-size        : 10px;
color            : #FFFFFF;
padding-left     : 8px;
}
a.pathway:link, a.pathway:visited {
font-size        : 10px;
color            : #FFFFFF;
padding-left     : 0px;
}
a.pathway:hover {
font-size        : 10px;
padding-left     : 0px;
color            : #FF9000;
}

Thanks in advance.

Post by **flip-flop** » Sat 14. Jul 2007, 15:19

Hi,

center:

Code: Select all

margin: 0 auto;

Knut

mullerrwd · Post by **mullerrwd** » Sat 14. Jul 2007, 18:03

Thnx but that already defined in my css.

mullerrwd · Post by **mullerrwd** » Sat 14. Jul 2007, 20:12

I dont get it. I already defined things but i cannot see if there is an extra css imported except for mine?
So why won't everything go to the middle like i defined in .margin wich is given to every div "holder"

Jensensen · Post by **Jensensen** » Sat 14. Jul 2007, 20:31

don't know why you are using tables???

seems to be fckn' wysiwyg-editor output.

okay, then try:

[works fine -->]
<table cellspacing="0" cellpadding="0" border="0" summary="" align="center">

or try to put div wrapper around your table

#wrapper { margin: 0 auto;}

i'd try a workaround of the layout to get rid off the table and i'd no longer use wysiwyg {sickness}

greetz

Post by **update** » Sat 14. Jul 2007, 20:38

you want all your content be placed centered on the screen? then try
either centering your table
or try to get rid of your wrapping table and wrap everything with an extra div id ... and define it't position like flip-flop wrote:
div id="wrapper-of my-stuff">
your stuff..
..
</div>

css:
#wrapper-of-my-stuff {
margin: 0 auto;
}

or something like that

Some interesting website for centering:
http://www.thestyleworks.de/tut-art/centerblock.shtml
german - but you will get the codeing examples ...

Jensensen · Post by **Jensensen** » Sat 14. Jul 2007, 20:38

mullerrwd wrote:...So why won't everything go to the middle like i defined in .margin wich is given to every div "holder"

there is NO #holder in your CSS!
even no DIV around your table!!

there is only one table placed in your HTML code. This table has no CLASS applied or something like that (no: align="center") see above.

so --> default --> the table starts on the left side of the page...

greetz

PS: check code and USE proper css

mullerrwd · Post by **mullerrwd** » Sat 14. Jul 2007, 20:41

wow. noho, don't think so.

I am new generation too:P No and I really mean no tables. I only use div +css.

Code: Select all

<div class="margin" id="top"><div id="topmenu">
 <ul>
			<li><a href="#" id="topmenu3" accesskey="3" title=""></a></li>
			<li><a href="#" id="topmenu2" accesskey="2" title=""></a></li>
			<li><a href="#" id="topmenu1" accesskey="1" title=""></a></li>

	</ul>
</div></div>
<div class="margin" id="middle">
  <div id="content">{BREADCRUMB}<br />{CONTENT}</div>
</div>
<div class="margin" id="bottom">
    {NAV_LIST_UL:F,0,,act_path,active}
</div>



    <div id="footer" class="margin" align="center">{FOOTER}</div>

See?
You should also see that every div has class="margin". And this is what is lookes like:
.margin {
margin-left:auto;
margin-right: auto;
}
I will take a look again.