Forums

Zurb Foundation 3 and C5

Permalink
A couple of questions from a complete newcomer, so please be patient!

I have built a site using the Foundation 3 but I need to convert it into a Concrete5 theme (please see my attachment).

Whilst happily creating a mock up using Foundation I thought it won't be so hard to covert it for use in Concrete5. I was soon however proved quite wrong!

Followed the all advice and tutorials I could find and no real luck. So far I have the Foundation theme installed, the edit bar is visible but despite including the correct PHP I can't get any editable areas. The orbit slider is not visible either!

Any advice here would be gratefully received.


This is my first attempt at C5 and I'm pretty new to web design in general. I am happy with HTML & CSS but not Javascript or PHP (yet).

I bought the Wanderer theme as its Foundation based but find in context editing difficult as its my first time with C5.

To get the end result as illustrated in my attachment I'd have to edit the theme in an external program rather than in context editing. I assume I can open up Coda edit it in there?

Just as I have just got used to Coda I have to learn a new system and I'm not the most patient person!

Many thanks!!

1 Attachment

designclash1
 
adajad replied on at Permalink Reply
adajad
You said you had read it all, but just to confirm, have you seen these?
http://www.concrete5.org/documentation/how-tos/developers/using-zur...
http://www.concrete5.org/documentation/how-tos/designers/making-a-t...

Some code to go with your post wouldn't hurt either, so we can see what you have done.
designclash1 replied on at Permalink Reply 1 Attachment
designclash1
....oh dear. A simple typo error. I hang my head in shame!

Well the test Foundation theme looked OK until I put it into edit mode.

The dotted editable areas are visible but when I go to add a block I get a confusing messy dashboard in the form of a list.

The following Javascripts seem to be clashing with C5:
<script src="<?php echo $this->getThemePath()?>/javascripts/foundation.min.js"></script>
<script src="<?php echo $this->getThemePath()?>/javascripts/app.js"></script>


If I cut these out then the editable areas seem to work.

The only glitch is that I have to click well below the editable area box. When I hover over the editable area the dotted lines highlight in black and I have to click my pointer on a thin rectangle (see attachment).

I this code thread and assume that I have this problem too:

http://www.concrete5.org/index.php?cID=296459&editmode=...

<?php $page = Page::getCurrentPage(); ?>
<?php if(!$page->isEditMode()): ?>
<script type="text/javascript">
$(function() {
  alert('Not Edit Mode');
});
</script>
<?php endif; ?>


The big question is how do I use that code?
I'm a complete PHP dummy so I have no idea what to do with it! Where does it go?

Any help would be greatly appreciated!
irsah replied on at Permalink Reply
irsah
Hi designclash,

You can include in your header.php file (assume the link to the js location is there) like so
<?php 
$page = Page::getCurrentPage();
if(!$page->isEditMode()): ?>
<script src="<?php echo $this->getThemePath()?>/javascripts/foundation.min.js"></script>
<script src="<?php echo $this->getThemePath()?>/javascripts/app.js"></script>
<?php endif; ?>


It's wrapping the javascripts to link or not link only when you're editing (edit mode - as what you're intantions).

Hope it helps.
designclash1 replied on at Permalink Reply
designclash1
ahhhhhh! The answer was staring me right in the face!

When the other thread mentioned "wrapping them in a php conditional..." The jargon threw me off the scent and it literally meant place the Javascript between the PHP.

... and it appears to work!

Thanks a lot!
irsah replied on at Permalink Reply
irsah
Yup.. that's when we look at too many codes and stare in front of the screen too many times.... :-) Get that all the time.
designclash1 replied on at Permalink Reply 1 Attachment
designclash1
... and this css fixes the weird offset in the edit mode. 

body {
   position:static;
}
irsah replied on at Permalink Reply
irsah
Same as above or place it together with the script line like this
<?php 
$page = Page::getCurrentPage();
if(!$page->isEditMode()): ?>
<script src="<?php echo $this->getThemePath()?>/javascripts/foundation.min.js"></script>
<script src="<?php echo $this->getThemePath()?>/javascripts/app.js"></script>
<style>
body {
   position:static;
}
</style>
<?php endif; ?>


Any codes not required whle in edit mode you pass through (inside the conditional code. If it's css use the <style>...</style> tag.. If it's additonal js add <script>... </script> tag, depending on your needs during edit mode with c5.

Or you can do it seperately just as long the file is called up on edited pages. header.php file would be the best location as it is called on all pagetypes.

Hope it helps