by Brianhayes

To load an existing set of files – eg: a complete website including CSS files, javascript and php functions you can proceed along the following lines. C5 calls these files a “Theme” so I will use the term

1. Download and install Concrete5 following the instructions to create the database. The instructions here are OK. If you can’t follow them I don’t think anything I say will help. I loaded my C5 files into http://www.mysite.com/dev/. This path is important.

2. Load your Theme into the folder http://www.mysite.com/dev/themes/yourname/ as the video tells you, where of course yourname is an identity you have chosen. The yourname directory will now contain, for example, css directory /files, script directory/files and image directory/files and so forth

3. Create description.txt and file it in the yourname directory – the file will contain two lines, the first being yourname and the second whatever description you give your Theme.

4. Create a .png image of 120 x 90 pixels called thumbnail.png and file it in the yourname directory.

5. Rename the index file, e.g. index.php or index.html, in the yourname directory as default.php.

The above of course repeats the video. You now need to prepare default.php using the code that in my case I had to extract from the examples.

6. In no particular order, in default.php

a. Find the meta tags, the <title></title> , <meta name="keywords" content="”> and <meta name="description" content=" "> tags.
Delete them and substitute

<? Loader::element('header_required'); ?>

This snippet of php code calls up the meta tag information that you will later insert.

b. Find the line in your header that provides the relative link to your css file. It will look something like this:

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

Then insert the code

<?=$this->getThemePath()?>

as follows:

<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/css/styles.css" />

making sure that there is a (/) after <?=$this->getThemePath()?>

c. Now do the same for all relative paths to images , script files and the like. You can probably find them all by searching “href” but in each case you need to insert the <?=$this->getThemePath()?> code to get C5 to recognise the image or script file that you want to call.

d. For background images go into your CSS files and change all the paths to the background images. For example in the unaltered file the command might look like this

background-image: url(/images/background-image.png);

this code would need to be changed to

“background-image: url(/dev/themes/images/background-image.png);”

or, if you prefer a fully qualified path, change it to

background-image: url(http://www.yoursite.com/dev/themes/images/background-image.png);

Of course you can find all the commands to change by searching on “url”

e. Now find an area you want to make editable. It is best to pick an area with an easily identifiable div. For example the div might be

<div id=”introduction” >
<h1>Introduction</h1>
<p> A certain amount of introductory text, blah blah blah </p>
</div>

Cut and save the HTML : -

<h1>Introduction</h1>
<p> A certain amount of introductory text, blah blah blah </p>

and file it in say a notepad file. Then substitute

<? $a = new Area('Introduction'); $a->display($c); ?>

Or
<? $a = new Area('someothername'); $a->display($c); ?>

where “Introduction “ or “someothername” is a unique name you are giving to this area.

You have nearly finished the preparation of the file. The last step is to insert the sign in link as unobtrusively as possible at the bottom of the page. The code is

<div id="signin">

<a href="<?=$this->url('/login')?>"><?=t('Sign In ')?></a>

</div>

7. The div “signin” of course can be any div you like

8. That’s just about it for the preparation of the files. Go into the admin panel now and follow instruction to load your theme. I found all this fairly clear. Then go to the theme itself and start editing the editable area you created. Click on Edit page, click on the area, and when you are invited to add a block add ”content”. You will find that this content block has an HTML button – go into it, load the html you saved in the notepad and follow instructions to exit and save. Hey presto the result will be exactly the same as the original.

9. To insert the meta tag information go to the dashboard, then sitemap, then properties of each file and you will find boxes to insert the title description and keywords.

10. To create new pages etc follow instructions in the dash board. They are reasonably clear and /or intuitive.

11. Last point. You cannot put any php snippets into the editable areas. Alas.
However the blocks inserting forms work rather well so it might not be necessary.

All this took me quite some time to work out but it’s basic stuff. Maybe I am stupid. Once its all mastered it’s a great programme. If I had had the above instructions I would have given a very enthusiastic endorsement. Please note there are probably errors in this but you should be able to get the idea.