Developing (v7+)

change page type layout

Permalink 1 user found helpful September 27, 2011 at 9:10 AM

As a newbie to C5 and building website in general I am struggling to understand how to change the page type layout - if anyone could point me in the right direction I would really appreciate it.

Is there an easy way to add a new page type with different size sidebars ?

The actual issue I have is that I have an image that looks too small in the block (page type right side bar) so I want to make the block/sidebar bigger
thanks

codingpenguins replied on Sep 27, 2011 at 10:34 am Permalink Reply

All you have to do is go to /concrete5/themes/(the theme you are using) and copy left_sidebar.php or right_sidebar.php. Maybe rename it to stretched_left_sidebar.php or stretched_right_sidebar.php

Then go to the menu section of the file, and change the name of the class. This is an example of what I did for 3 columns (just example) - I called my class - split2

<!-- end #menu -->
<div id="page" class="split2">
   <div id="content">
      <?php $content = new Area("First Pane"); $content->display($c); ?>
        </div>
   <!-- end #content -->
   <div id="content2">
      <?php $content = new Area("Second Pane"); $content->display($c); ?>
   </div>
   <!-- end #content2 -->
   <div id="sidebar">
      <?php $sidebar = new Area("Sidebar"); $sidebar->display($c); ?>
   </div>
   <div style="clear: both;">&nbsp;</div>
   <!-- end #content2 -->

Viewing 15 lines of 17 lines. View entire code block.

 
<!-- end #menu -->
<div id="page" class="split2">
   <div id="content">
      <?php $content = new Area("First Pane"); $content->display($c); ?>
        </div>
   <!-- end #content -->
   <div id="content2">
      <?php $content = new Area("Second Pane"); $content->display($c); ?>
   </div>
   <!-- end #content2 -->
   <div id="sidebar">
      <?php $sidebar = new Area("Sidebar"); $sidebar->display($c); ?>
   </div>
   <div style="clear: both;">&nbsp;</div>
   <!-- end #content2 -->
</div>
<!-- end #page -->

Add this file to the folder.

Then in the /concrete5/themes/(the theme you are using)/style.css I
add

.split2 #content{
   float: left;
   padding: 0px 10px 0px 0px;
   width: 285px;
}
.split2 #content2{
   float: left;
   padding: 0px 0px 0px 10px;
   width: 285px;
}
.split2 #sidebar{
   float:right;
}

You should only have to worry about making a new content and sidebar. You should just change the width to whatever you want for the sidebar. Currently at 273 (for my theme) - so just add "width: 300px" under your ".newClass" #sidebar. Remember that float:right or left depends on if you want the sidebar on the left or right side. Also removed the added pixels from the .newClass #content to have it not be longer then it was so it should be around 570- 27(300-273) = 543.

Upload to server. To add a new image to match this page type upload to concrete/images/icons/page_types and they will be shown in the dashboard.Please note that you must upload them to the concrete folder (someting you should never do) - Which a forum discuss athttp://www.concrete5.org/community/forums/customizing_c5/page_type_... - You do not have to do this but just for readability. Then go to the Dashboard- Pages and Themes - Page Types. Then click "Add a page type" - Then under name if you used stretched_left_sidebar.php as the name put - "Stretched Left Sidebar" and under the handle must match the file name exactly "stretched_left_sidebar" - then select the icon for the page type. and Click Add, and your Done! Hopefully this helps

sharonholliday replied on Sep 28, 2011 at 4:55 am Permalink Reply

Thanks for prompt reply I need to sit down spend some time looking at it, but I'm not sure I am confident changing code and don't know how to get to it. I have a gap in my understanding of how it all comes together - I know photoshop, indesign, illustrator & flash and have created a (bad!) flash website and have a rough idea of what html/css/php is but it scares me!!

I'm guessing that I could create themes with photoshop, indesign or such but I don't understand how these link in with page layouts.

Can anyone recommend video/book/website that gives an high level / idiot guide to how it all comes together and explains the terminology themes, page layouts, icons (concrete5 or in general)

I appreciate any help/advice ....Thank you for your patience!

codingpenguins replied on Sep 28, 2011 at 11:30 am Permalink Reply

I pretty much laid out exactly what you needed to do. Not sure how much easier it can get. I googled "concrete5 create theme" and the first four links from concrete5 are good. There is a video to make a HTML theme to a concrete5 theme, only 8 minutes too! The way you get to files on websites is through ftp. All the things you mention beside flash (no little about) has html and css involved. Let google be your friend and you should be fine.

jordanlev replied on Sep 28, 2011 at 2:25 pm Permalink Reply

It sounds like you aren't very familiar with HTML and CSS in general -- which you will need to know in order to be able to customize themes for any CMS (not just C5). I suggest googling around for tutorials and books about how to learn HTML/CSS. Then when you have a better understanding of that, come back to the C5 theme.

sharonholliday replied on Sep 28, 2011 at 2:33 pm Permalink Reply

Thank you I appreciate your help - soon as I get a chance I will start googleing & be sure to look at html/css.

sharonholliday replied on Sep 30, 2011 at 2:53 am Permalink Reply

Just found a tutorial that gives me exactly what I need I think

Use Layouts to Position and Align Content
http://www.youtube.com/watch?v=Ymu7c35CD3g&feature=related...

Forums

Developing (v7+)

change page type layout

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?