Jump to content

How did the css was implemented in the sample site?

lord_dupalski

By lord_dupalski
in Getting Started

 Share

Recommended Posts

lord_dupalski Jr. Member

lord_dupalski

Posted
Posted

I am a complete newbie in PW with some HTML and CSS understanding and poor PHP skills.

I am currently studying PW sample site that comes along with default installation of PW.

I opened up every PHP files in there to check at the code, and I just found this to most of them..

<?php 
 
/**
 * Home template
 *
 */
 
include("./head.inc"); 
 
echo $page->body;
 
include("./foot.inc"); 
 
 
how did they apply the styles from the css files when it has only these codes?
 
 
 
Pete Hero Member

Pete

Posted
Posted

Looking at your other posts you may already understand this better now, but basically the homepage template is including a file called head.inc (you'll find that in the same folder as the home template above), echoing the contents of the "body" field for the current $page, then incluting the foot.inc file which is also in the same folder as the home template.

I know PHP can be a bit alien to begin with, but for the most part the above does exactly what is says on the tin :)

lord_dupalski Jr. Member

lord_dupalski

Posted
  • Author
Posted

but there is no link for the css files in the head.inc and foot.inc?

from what im doing in coding in html and css as per w3schools.

i link the php/html file with the css like this..

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

cstevensjr Hero Member

cstevensjr

Posted
Posted

I believe there are also _func.php, _init.php and _main.php files in the /Templates directory on this install.  If you look under /Templates/Styles you will find the main.css file.

_main.php has the reference you are looking for.

You should look at all the files in the /Templates directory and study them.

bernhard Hero Member

bernhard

Posted
Posted

_func, _init and _main.php are files from the dev branch, in 2.4 there is the older structure with head.inc and foot.inc: https://github.com/ryancramerdesign/ProcessWire/blob/master/site-default/templates/home.php

@dupalski

the css reference is on line 24: https://github.com/ryancramerdesign/ProcessWire/blob/master/site-default/templates/head.inc#L24

are you familiar with browser debugging tools? they will help you a lot inspecting your code: 

  • Like 2
diogo Hero Member

diogo

Posted
Posted

Not all sites, but it's a good way to start. I would say, you sould spend one day or two doing the tutorials before you start looking at the example sites.

Nico Knoll Hero Member

Nico Knoll

Posted
Posted

does all PW website done in this way?

code everything in header.inc and footer.inc 

and just include it on template files?

No they aren't. Ryan once mentioned that he likes using a "main.php" a lot more but is using "head.inc" and "foot.inc" because a lot of people coming from Wordpress only know this why and understand template making a lot quicker.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...