Editing PHP Template with KompoZer

Familiar with web-design ? Trouble with images, tables ? Any other queries ?

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Editing PHP Template with KompoZer

Postby missivy on Sat Aug 22, 2009 3:25 am

Hey, Thanks for reading

I have downloaded the hardcoder extension and I start all my code with php. I was simply imputing all my information with Smart Editor Professional. Until I fell into a problem with the CSS script. I don't know how to adjust things to get it how I want it. So I thought I could edit this with a WYSIWYG editor but PHP is tricky.
Firstly here is the (snippet) code from my style.css file:
Code: Select all
#header {

width: 930px;

float: left;

margin: 0px;
padding-top: 0px;

height: 140px;

text-align: center;

font-size: 20px;

text-transform: none;
background: #ffffff url("/header.png"); (The header.png image is the slender colorful bar you see going across the page.)
}

#title {

background : transparent;
margin-left: 5px;
margin-top: 5px;
padding: 0px;

float : left;

width : 300px;

font-size: 24px;
font-weight: bold;
letter-spacing: -2px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: #757575;
font-family: arial rounded mt bold;
}

#tagline {

background : transparent;
margin-left: 620px;
margin-top: 11px;
padding: 0px;

float : left;

width : 300px;

font-size: 13px;
line-height: 13px;
letter-spacing: 1px;
text-align: left;
color: #757575;
font-family: trebuchet ms;

}

#menuacross {

background : transparent;
margin-left: 0px;
margin-top: 7px;
padding: 0px;

float : right;

width : 655px;

text-align : left;

}


Secondly here is the (snippet) code from my header.php file :
Code: Select all
<body>

<div id="container">
<a id="topofpage"> </a>
<div id="header">

<div id="tagline">
"LIVE PLAY LEARN"
<div style="clear: left;">&nbsp;</div>
</div>

<div id="title">
Creative Pre-School (This is really where I want the logo to go)
<div style="clear: left;">&nbsp;</div>
</div>

<div id="menuacross">
<ul id="navigation">
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
<li><a href="#" title="Return to main page">Link<span><br/>text here</span></a></li>
</ul>
<div style="clear: left;">&nbsp;</div>
</div>
</div>


Everything working fine
Image


I insert even a small image and notice how the link tabs all move down and out of line
Image


Image


I made this in Paints and its exactly how I want things to look
I'd also like to be able to insert an image in the tagline area too (havent created one yet).
Image


I tried to adjust things in KomoZer but it only messed things up worse =[. Here is how things are shown to me in KomoZer:
Image


Just to be clear this is the header of my site, the verrry top of the page. I hope Ive been clear and detailed.
Thanks in advance. =D
missivy
 
Posts: 3
Joined: Fri Aug 21, 2009 1:14 am
Country: United States (us)

Re: Editing PHP Template with KompoZer

Postby agsone on Sat Aug 22, 2009 9:08 pm

Thanks for all the efforts to include code and screen shots but really need to see an active page (or pages) to diagnose properly.

That said my gut feeling is that you are running out of width - it already looks like the menuacross and title are too big for the header and that isn't accounting for the size of the image you are putting in and assumes that the contents of the menu across fit the assigned width.

Have you coupled a text editor up to KompoZer via the handcoder extension (see my "software" page in the site in my sig). The lack of that may be contributing to the odd behaviour but I suspect there is an issue there with the path to the CSS file (which we can't see from the code you have given us).
agsone
Moderator
 
Posts: 1361
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Editing PHP Template with KompoZer

Postby missivy on Sat Aug 22, 2009 9:56 pm

Thank you agsone for the reply. I did figure it out finally. It was just a matter of adjusting the px in the css and I made all the images apart of the css, as before I was inputing the images in the php code because the css was set up to put text in that area not an image. So what I did was made my images, figured out the their sizes and then made boxes in css big enough to house the tagline picture and the title logo picture. "What?" I know -- Im terrible at explaining.
Last edited by missivy on Tue Aug 25, 2009 3:09 pm, edited 1 time in total.
missivy
 
Posts: 3
Joined: Fri Aug 21, 2009 1:14 am
Country: United States (us)

Re: Editing PHP Template with KompoZer

Postby agsone on Sun Aug 23, 2009 6:06 pm

I get what you mean, believe it or not! It's easy to squeeze something out of line when you are getting set up, especially if you are using some includes.

I like the way the site is coming together, an appropriate look for the intended market. Good luck finding the "happy morning" people!
agsone
Moderator
 
Posts: 1361
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Editing PHP Template with KompoZer

Postby missivy on Tue Aug 25, 2009 3:26 pm

Thank you agsone. It took me a while to understand the includes. But Ive been creating all my new pages with it since I figured it out. Before -- with the employment and uploader page I was redoing CSS .. images .. and so on.

I haven't coupled with a text editor. I will. As my page did show up in KompoZer is that how it should show? I tried to read up on this before I posted at all, but Im still not clear. My home page simply is not going to show up in the WYSIWYG form because its php, right?
missivy
 
Posts: 3
Joined: Fri Aug 21, 2009 1:14 am
Country: United States (us)

Re: Editing PHP Template with KompoZer

Postby agsone on Tue Aug 25, 2009 5:49 pm

You can set up a local server on your computer using WAMP (or the equivalent for other operating systems) which runs php and assembles the includes for browsers. My understanding is that this isn't particularly challenging, just a case of running an installer and moving your files to the correct folder, but confess to not yet having hit the activation energy to try it out myself. (I believe wink0r and dr-john do this, probably lem3 too).

I'm not sure how KompoZer would perform editing files within the server but you could certainly preview the assembled page locally in a browser before sending it to the outside server.
agsone
Moderator
 
Posts: 1361
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Editing PHP Template with KompoZer

Postby wink0r on Tue Aug 25, 2009 6:40 pm

On Windows I use xampp for the local server installation to check pages and develop sites occasionally. I used it more at first but now that I am more familiar with php I don't always check locally (sometimes I should). I have not used includes for header images. These could be done in the css and would be just as easily changed site wide and display in KompoZer. I do use a lot of includes on most pages for repetitive material and they work great.

When I looked up the site I saw xampp for mac in the search suggestions, though I did not do the search.
wink0r
 
Posts: 2507
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)


Return to General Q & A


Who is online

Users browsing this forum: No registered users and 2 guests