phpwcms Support Forum

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

hi,

try this:

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

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

greetz

... 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

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

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

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

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

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.

Hi,

center:

Code: Select all

margin: 0 auto;

Knut

Thnx but that already defined in my css.

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"

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

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 ...

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

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.

phpwcms Support Forum

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

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