Having trouble customizing dark chocloate theme.
Permalink
Site can be seen at: http://www.greatpointmedia-preview.com/gifted/concrete5.6.0.2/index...
Trying to add a content block to the right side of this theme and a left sidebar that will house the verticle navigation. Already have the content img that will be placed on right side. Will need to make that editable so that text can be overlaid over the image. See attached layout which has no text or navigation.
Trying to add a content block to the right side of this theme and a left sidebar that will house the verticle navigation. Already have the content img that will be placed on right side. Will need to make that editable so that text can be overlaid over the image. See attached layout which has no text or navigation.
Inside my root folder I copied the dark_chocolate theme from the core theme folder that houses all C5 themes and copied it into the outer themes folder.
From there I went under main.css and changed the width of the theme from 800px to 960px and now I want to put a block of content on the right side and yes, use it as a background so I can make an editable text area on that side of the site.
From there I went under main.css and changed the width of the theme from 800px to 960px and now I want to put a block of content on the right side and yes, use it as a background so I can make an editable text area on that side of the site.
I would suggest making a copy of the 'left_sidebar.php' file and call it something like 'two_sidebars.php'. Then have a look at the HTML in that new file and you will see that you can just copy the <div id="body">...</div> and paste it right next door to it on the page. Rename the original "body" div to something else because you are going to have to re-define it's width only on his new page type. Change the id of your new right side div to "right" and change the new editable area inside that new div to something like "Right Sidebar". You will then have to add css rules to define the widths of these two new divs.
IMPORTANT: In order to get C5 to actually "see" your new 'two_sidebars' page type, you need to got to 'Dashboard->Themes' and 'Inspect' your theme. A page type called "Two Sidebars" should be in the list with a checkbox next to it. OK the addition of this page type to officially incorporate it into the C5 environment. You can then go to your page and hover over the 'Edit' button choose 'Properties->Design' to assign your new 'Two Sidebars' page type to that page.
IMPORTANT: In order to get C5 to actually "see" your new 'two_sidebars' page type, you need to got to 'Dashboard->Themes' and 'Inspect' your theme. A page type called "Two Sidebars" should be in the list with a checkbox next to it. OK the addition of this page type to officially incorporate it into the C5 environment. You can then go to your page and hover over the 'Edit' button choose 'Properties->Design' to assign your new 'Two Sidebars' page type to that page.
Unsure by what you mean by "copy the <div id="body"></div> and paste it right next door to it on the page"
I've copied the left sidebar file and named the new file two_sidebars.php as you mentioned. Within the new file the code I'm looking at is:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<div id="central" class="central-left">
<div id="sidebar">
<?php
$as = new Area('Sidebar');
$as->display($c);
?>
</div>
<div id="body">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
<div class="spacer"> </div>
</div>
<?php $this->inc('elements/footer.php'); ?>
I've copied the left sidebar file and named the new file two_sidebars.php as you mentioned. Within the new file the code I'm looking at is:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<div id="central" class="central-left">
<div id="sidebar">
<?php
$as = new Area('Sidebar');
$as->display($c);
?>
</div>
<div id="body">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
<div class="spacer"> </div>
</div>
<?php $this->inc('elements/footer.php'); ?>
This is the rough code for the 'two_sidebars.php' file. I added an extra div called 'right' next to the original div that had the id of "body". Apply your background image to the #right div in main.css. Also in main.css, you will have to add the widths of the #center and the #right divs to get them to fit in.
To cut 'n paste this code don't forget to click the 'View entire code block.' link to expand the code below.
To cut 'n paste this code don't forget to click the 'View entire code block.' link to expand the code below.
<?php defined('C5_EXECUTE') or die("Access Denied."); $this->inc('elements/header.php'); ?> <div id="central" class="central-left"> <div id="sidebar"> <?php $as = new Area('Sidebar'); $as->display($c); ?> </div> <div id="center"> <?php $a = new Area('Main'); $a->display($c); ?>
Viewing 15 lines of 25 lines. View entire code block.
Thank you Michael. I have to step out for a bit, but will finish this when I get back.
I do not see any right body divs in this code.
.
/* HTML Tag Redefinition */ html, body {height: 100%; } body {/* customize_background */ background-color: #000; /* customize_background */ padding: 0px; margin: 0px; } img {border: 0px} a { cursor:pointer} label { font-weight:bold;} fieldset { border:1px solid #ccc;} /* error text class optionally provided by theme */ div.ccm-error-response {color: #f00; margin-bottom: 12px} /* Page Structure / Navigation */ #page{ width:960px; margin:auto; text-align:left } #page #headerSpacer{ height:64px } #page #header{ position:relative; } #page #header #logo{ color:#999; font-size:32px; font-family:Arial, Helvetica, sans-serif;
Viewing 15 lines of 65 lines. View entire code block.
That's correct. You won't see any reference to the #right or the #center DIVs because those divs didn't exist in the original theme files. The orginal authors would have no reason to add rules to style non-existent DIVs. We just added them to the 'two_sidebars.php' file so you will have to add the css rules for the #center and #right divs. I would start by adding something like and go from there:
#page #central #center {width:450px;float:left;}
#page #central #right {width:200px;float:left;background-image: url(images/your_clock_image.jpg)}
To be honest, if you are going to try to re-configure a theme, you are going to have to have a decent grasp of CSS. These forums are not a very efficient way to learn that stuff.
#page #central #center {width:450px;float:left;}
#page #central #right {width:200px;float:left;background-image: url(images/your_clock_image.jpg)}
To be honest, if you are going to try to re-configure a theme, you are going to have to have a decent grasp of CSS. These forums are not a very efficient way to learn that stuff.
Every site I have ever built uses CSS. It was just applied differently, as I used Adobe Dreamweaver to write the CSS. Now, I must learn to hand code the rules myself.
Thank you for your help.
Thank you for your help.
My apologies Chris. I didn't mean to offend. It's tough to get a full understanding from these posts. Hand-crafting CSS rules probably consumes 80% of my project development time. It can be a royal pita.
No offense taken. I have been in search of a good CMS that I can migrate all my projects to. I am just under the gun with this particular project.
When editing the index page, I added the header_img through the file manager tab. The URL for that image is now:
http://www.greatpointmedia-preview.com/gifted/concrete5.6.0.2/files...
Is there a simpler path to images that are being used in C5? This lies 3 layers deep inside the files folder.
http://www.greatpointmedia-preview.com/gifted/concrete5.6.0.2/files...
Is there a simpler path to images that are being used in C5? This lies 3 layers deep inside the files folder.
That is correct. The File Manager saves the images in these sub-folders so that each version of your page has a different version of the image. This is normal. If you want to place an image using css then those images can be in your theme folder and then your build html (like "<img src="images/your_image.jpg" />") directly in the theme file.
I don't care which method I use. I just need to figure our how to get these images to display properly on the page. You mention using HTML coding. Here is what I used for code based on the code you posted for me.
#page #central{background:url(images/nav_sidebar_right_bg.gif) repeat-y center; clear:both; }
#page .no-sidebar { background-image: none !important}
#page #central.central-left { background:url(images/nav_sidebar_left_bg.gif) repeat-y center !important; }
#page #central.central-left div#sidebar {float: left !important; }
#page #central.central-left #body {padding-left: 68px !important; padding-right: 0px !important; float:right}
#page #central #center {width:287px;float:left;}
#page #central #right {width:671px;float:right;background-image: url(images/rt-content-600.jpg)}
still this rt content doesn't show on the page.
#page #central{background:url(images/nav_sidebar_right_bg.gif) repeat-y center; clear:both; }
#page .no-sidebar { background-image: none !important}
#page #central.central-left { background:url(images/nav_sidebar_left_bg.gif) repeat-y center !important; }
#page #central.central-left div#sidebar {float: left !important; }
#page #central.central-left #body {padding-left: 68px !important; padding-right: 0px !important; float:right}
#page #central #center {width:287px;float:left;}
#page #central #right {width:671px;float:right;background-image: url(images/rt-content-600.jpg)}
still this rt content doesn't show on the page.
following all these paths for the same inage based on how many versions of a page we have seems muddy and complicated. Am I writing for HTML with img-src or should I be using the tools within the page edit tab and let the C5 system place the image where it wants?
Just to clarify... you don't have to worry about the fact that C5 keeps a bunch of versions. Each version of the page will automatically know where to find it's images. Don't give it another thought.
I may have misled you a bit with the code I posted earlier. I was in a hurry to get to the airport to pick up my son for Christmas.
It's confusing because C5 is very flexible and yet very rigid at the same time. There are many ways to accomplish the same thing. In order for C5 to find the images you 'hard-code' into your theme, this needs to be the code for the <img> tags:
What this does is tell C5 to automatically insert the path to your theme in front of the src url for the image. If you use the code above, this means that the image called 'tr-conttent-600.jpg' must be stored in the 'images' folder off your theme folder.
I hope this makes sense. I gotta go, my son's plane just arrived.
I may have misled you a bit with the code I posted earlier. I was in a hurry to get to the airport to pick up my son for Christmas.
It's confusing because C5 is very flexible and yet very rigid at the same time. There are many ways to accomplish the same thing. In order for C5 to find the images you 'hard-code' into your theme, this needs to be the code for the <img> tags:
<img src="<?php echo $this->getThemePath();?>/images/rt-content-600.jpg" />
What this does is tell C5 to automatically insert the path to your theme in front of the src url for the image. If you use the code above, this means that the image called 'tr-conttent-600.jpg' must be stored in the 'images' folder off your theme folder.
I hope this makes sense. I gotta go, my son's plane just arrived.
Mike- can you contact me off forum please. chris@greatpointmediadesign.com
Once I put this path into the CSS, my image still didn't display and then other design elements were skewed...things like borders, etc.
What a nightmare!
What a nightmare!
I don't understand why I am seeing my header image display properly, but no mention of it appears in the main.css file?
That image is there because you put it there by putting the page in edit mode and editing the header block. Yes/No?
yes, I edited the header block.
regarding: "You can then go to your page and hover over the 'Edit' button choose 'Properties->Design' to assign your new 'Two Sidebars' page type to that page." There is no design element within the properties tab??
never mind on this post as I did find that in the design tab and did click on two sidebars.
Have you made a new folder for your theme under '[root]/themes' or are you using the core theme found in [root]/concrete/themes/dark_chocolate'?
If it were my site, first I would try to edit the 'main.css' file and assign your image to the background of the <div ID="body"> that's found in the 'left_sidebar.php' and the 'default.php' files in your theme folder. This div already has an editable area that will render text over your background image.
Clear as mud?