Incontext Editing
Permalink
I designed my site in PS and then used it as a background in DW within a Div. I then add Divs to selected areas where I need my content/text to go. I then save it as a php and go through it making it C5 friendly. I get the header tab for editing and all that but I can't edit the Div even when I put in the PHP code to get it to work. Sometimes C5 lets me edit the background image by putting text over it.
How do I fix this? Also, can I just make a Div editable in C5 by selecting it in DW and making it an 'editable region?' This feature works in Business Catalyst, can I do the same here?
Kind Regards.
How do I fix this? Also, can I just make a Div editable in C5 by selecting it in DW and making it an 'editable region?' This feature works in Business Catalyst, can I do the same here?
Kind Regards.
Can you show the php code that you are using to create editable regions ?
Hello, I don't think you can tell dreamweaver to make an area editable. You need to go into the code itself and add
into each div that you want to make editable. Use a unique name for each editable area.
That's pretty much it. I would read up in the docs for best practices and all that, but if you have
in your header, and
for each div you need to make editable, and
in your footer, you should be good to go. Also make sure to create a description.txt with two lines in it in the root of your theme folder, and make sure to name your index.php default.php (there is no index in a theme).
I have attached a zip file that will give you an idea of where to put what, and what constitutes a complete set of files for a theme.
<?php $a = new Area('your area name'); $a->display($c); ?>
into each div that you want to make editable. Use a unique name for each editable area.
That's pretty much it. I would read up in the docs for best practices and all that, but if you have
<?php Loader::element('header_required'); ?>
in your header, and
<?php $a = new Area('your area name'); $a->display($c); ?>
for each div you need to make editable, and
<?php Loader::element('footer_required'); ?>
in your footer, you should be good to go. Also make sure to create a description.txt with two lines in it in the root of your theme folder, and make sure to name your index.php default.php (there is no index in a theme).
I have attached a zip file that will give you an idea of where to put what, and what constitutes a complete set of files for a theme.
Thanks for the help so far.
Theirs not much code because I only want to make one editable area as a test, learning experience.
I do add the code in to make an editable area between the Div's.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
Loader::element('header_required');
?>
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="syle" id="background">
<div class="syle" id="text">
<?php
$a = new Area('content');
$a->display($c);
?>
</div>
</body>
</html>
Dont worry about the style.css, I've added the correct code for the background image.
Thank again.
Theirs not much code because I only want to make one editable area as a test, learning experience.
I do add the code in to make an editable area between the Div's.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
Loader::element('header_required');
?>
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="syle" id="background">
<div class="syle" id="text">
<?php
$a = new Area('content');
$a->display($c);
?>
</div>
</body>
</html>
Dont worry about the style.css, I've added the correct code for the background image.
Thank again.
OOPS,
'syle' is just a typo for style for style.css
'syle' is just a typo for style for style.css
Hiya, You were missing a closing div around your editable area code. I also added a media type to your css link because some browsers wonk out without it, and I deleted the meta tag, because all meta tags are generated by c5. In your $this->getThemePath() you were using a opening short tag (<?=) so I changed that as well to a regular <?php tag (recommended). I also added the <?php defined('C5_EXECUTE') or die("Access Denied."); ?> to the top of the file, because it will be more secure that way (also recommended).
Hope it helps. :-)
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <!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> <link href="<?php $this->getThemePath() ?>/style.css" rel="stylesheet" type="text/css" media="screen" /> <?php Loader::element('header_required'); ?> </head> <body> <div class="syle" id="background"> <div class="syle" id="text"> <?php $a = new Area('content'); $a->display($c);
Viewing 15 lines of 20 lines. View entire code block.
Hope it helps. :-)
Cool that did it, thanks.
I have the editable area but when I add text through C5, all of it just goes down in a column all over my page.
I don't seem to be able to have it within the sizing of my Div that I created in DW. The placing is excellent, its all there. How do I fix this problem. I just have text going down in a column. Its not within my Div.
Here is the code.
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
Loader::element('header_required');
?>
<style type="text/css">
#background {
background-image: url(themes/Yourname/KDS_template.png);
height: 1134px;
width: 1134px;
margin-right: auto;
margin-left: auto;
}
#style {
float: left;
height: 100px;
width: 300px;
margin-top: 200px;
margin-left: 300px;
}
</style>
<link href="<?php $this->getThemePath() ?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="background" id="background">
<div class="content" id="style">
<?php
$a = new Area('content');
$a->display($c);
?>
</div>
</div>
</body>
Thanks again for the help. Once I get this done I'll be very happy working with C5. I'm glad I'm not restricted by bullshit coding and design restrictions.
I have the editable area but when I add text through C5, all of it just goes down in a column all over my page.
I don't seem to be able to have it within the sizing of my Div that I created in DW. The placing is excellent, its all there. How do I fix this problem. I just have text going down in a column. Its not within my Div.
Here is the code.
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
Loader::element('header_required');
?>
<style type="text/css">
#background {
background-image: url(themes/Yourname/KDS_template.png);
height: 1134px;
width: 1134px;
margin-right: auto;
margin-left: auto;
}
#style {
float: left;
height: 100px;
width: 300px;
margin-top: 200px;
margin-left: 300px;
}
</style>
<link href="<?php $this->getThemePath() ?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="background" id="background">
<div class="content" id="style">
<?php
$a = new Area('content');
$a->display($c);
?>
</div>
</div>
</body>
Thanks again for the help. Once I get this done I'll be very happy working with C5. I'm glad I'm not restricted by bullshit coding and design restrictions.
I would also like to point out that when in Edit mode in C5, the content area that I created editable is only a single line. It dosent run across the entire page through, it seems to have the correct width of the div tag that I created in DW but I don't have the height.
The height issue is related to the float: left; you have in there. I would put another div inside div#style that has the style clear:both;. That way, when you add stuff into div#style, it will expand downward to fit. Otherwise just take the float part off, and it should have the correct height.
This CSS stuff gets very complicated. I would recommend buying a book on CSS so you understand all the myriad different things about CSS you need to know to build a proper website that works on more than just your monitor. :-)
This CSS stuff gets very complicated. I would recommend buying a book on CSS so you understand all the myriad different things about CSS you need to know to build a proper website that works on more than just your monitor. :-)
What do you mean about building a proper website that works on more then just my monitor?
Oh, that was mostly because I saw you had a large height and width on your background div, which won't look good on smaller screens, but also because not too long ago I wasn't so great at CSS until I got a really in-depth book on it (I was using tables, lol), and I'm still a bit squeamish at the thought of making a website work on most screens and browsers. :-)
Sorry if it came off as elitist or whatever, I didn't think before I posted (and it's almost 4 in the morning here). :-/
Sorry if it came off as elitist or whatever, I didn't think before I posted (and it's almost 4 in the morning here). :-/
Fixed! Actually it was right the entire time. It only went down because I typed to much within a small space. So I just have to make the Div bigger or whatever.
Thanks again.
PS. Yeah I'm going to start watching a course on CSS from Lynda.com
What is the typography.css for C5?
Thanks again.
PS. Yeah I'm going to start watching a course on CSS from Lynda.com
What is the typography.css for C5?
Typography.css is for the type styles of your website. It could be placed in with your main styles, but tinyMCE takes typography.css and grabs the classes from it to add to the tinymce styles dropdown.
Cool, Ill try it out.
