Layout columns stacks vertically when signed out, looks fine while signed in.

Permalink 1 user found helpful
Hello, I'm currently having an issue with my website.

I've used layouts to assign space for certain blocks and it all looked like I wanted it while I was signed in and in edit mode. But when I went and checked how it would look while being signed out I noticed that the layouts I've made were no longer horizontally next to each other but vertically under each other (My attachment should hopefully provide a clearer explanation).

I've tried to cross-examine the code in 2 different browsers (chrome [signed in] & firefox [signed out]) using their inspect element and inspect with firebug respectively, and found that the only piece of css code that went missing (did not show up when inspecting) were the following lines from .ccm-layout-table .ccm-layout-col & .ccm-layout .ccm-layout-cell;

".ccm-layout-table .ccm-layout-col { float: left; }
.ccm-layout .ccm-layout-cell; { }"

I've uninstalled all of the addons I was using. (2)

I've also went searching on the forums and through google trying to find a problem similar to this but was unsuccessful in finding a solution.

This is the first concrete5 website I'm building and I'm trying to build my own theme with this website. I have little experience with html + css and no experience with other coding languages.


Any ideas?

Thanks in advanced,

Michael.

1 Attachment

Michaeldegreef
View Replies: View Best Answer
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
Bump
mhawke replied on at Permalink Reply
mhawke
Welcome!

First off I'm going to let you know that layouts are troublesome sometimes and the core team have often mentioned that they should only be used in an emergency and should not be used as a way to build out a theme. I know they are tempting if you are not experienced with the nuances of css but they cause conflicts sometimes.

Is there a live site we could view? These things are difficult to fix blind. Perhaps we could help you build the areas out of DIVs without the need for layouts.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
Thank you for your response,

I understand now that layouts are to be avoided if at all possible, and will try to pursue different paths throughout my future decisions in concrete 5 building.

The reason for my decision to use layouts was because I figured it would be easy for editing to be able to change blocks such as images and text fields in edit mode rather than editing a field of html (I'm building this site for my father, who has no knowledge of html and css).

I think I'll be able to work out building the areas and content out of divs... I wonder, however, would it be possible to create a block of html containing the divs to build the areas which in turn contain a piece of code making me able to add blocks to those areas? Because that would be the perfect solution I think.

I don't mind showing you the live site, I understand it's a bit difficult blind but I'm a bit apprehensive on making the site available for public in its current condition. Is there a way I could keep it from the general public and just show it to you guys?

Thanks again for your reply, and my apologies for any possible vagueness or unclarity in my explanations.

Michael.
SuperNova replied on at Permalink Reply
SuperNova
one possibility with less coding:

- use layout and split just once.
- add image-block, go to design/css for that block and put 'float:left' in the field for additional styles
- add one content-block, write a title and text, go to design/css and put 'margin-left:*px' as additional styles.

* = width of image plus space between image and text.
mhawke replied on at Permalink Reply
mhawke
I have attached a simple 2-column layout using divs and editing areas within those divs. I'm not sure if this is what you were aiming for.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
@Supernova

I'm afraid the first step is what already causes problems, when I split a layout into more than 1 column the columns appear stacked beneath eachother. The other two steps sound like they would help into making the image and text appear horizontally next to eachother, but I'll need the first layout to also display the elements next to eachother horizontally.

@mhawke

Your attachment sounds like what I need, but I can't find it. Could you repost it with your attachment?

Thanks again,

Michael.
mhawke replied on at Permalink Reply 1 Attachment
mhawke
Sorry 'bout that. Here's the file. It contains a div layout for 2 columns and the corresponding styles. If you need some help incorporating this into your theme, just holler.

UPDATE: attached file has been corrected to eliminate 'short open tags' issue.
Michaeldegreef replied on at Permalink Reply 1 Attachment
Michaeldegreef
Thanks for the sample, I've been successful in applying the div columns. I'm having a slight problem with the editing areas though.

The code I use is:
"
<?
$a = new Area('Mainleftcol_2col_Left');
$a->display($c);
?>
"

Instead of making a new area it shows the "$a->display($c);" as text.

I've attached an image showing what I mean.

Thanks for your help so far by the way,

Michael.
SuperNova replied on at Permalink Reply
SuperNova
'php' in the first line is needed.
<?php 
a = new Area('Mainleftcol_2col_Left');
$a->display($c); 
?>
mhawke replied on at Permalink Reply
mhawke
Damn I'm an idiot!

The php on your server is configured to NOT allow 'short open tags' so your areas need to start with "<?php" instead of just "<?" like this:

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


Sorry about that but this might be another problem. Some blocks might be using the abbreviated php tags and causing problems. If you have access to your php.ini, you might want to add "short_open_tag = on" to it to avoid any problems.

@SuperNova... you snuck in while I was crafting my response! Thanks for helping out. I have replaced the attachment above so it has the full tags. Damn you cut'n paste!
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
I've updated the code to include 'php'. But I'm still getting the same results.


PS: Here's what I've done in steps:

- I've removed all layouts

- I've added a HTML block to 'main' with the following code:
<div class="mainleftcol_2col_left">
   <?php
      $a = new Area('Mainleftcol_2col_Left');
      $a->display($c);
   ?>
</div>
<div class="mainleftcol_2col_right">
   <?php 
      $a = new Area('Mainleftcol_2col_Right');
      $a->display($c);
   ?>
</div>
<br style="clear: left;" />


- I've edited my theme's "main.css" to include this:
.mainleftcol_2col_left {
   float: left;
   width: 45%;
   background-color:#CCC;
   padding:5px;
   margin:3px;
}
.mainleftcol_2col_right {
   float: left;
   width: 45%;
   background-color:#DDD;
   padding:5px;
   margin:3px;
}
SuperNova replied on at Permalink Reply
SuperNova
When you are using HTML-Blocks for that, you won't get any success because there is no PHP code allowed/not working. It must be hardcoded in the template.

have a look at http://www.concrete5.org/marketplace/addons/designer-content/...
mhawke replied on at Permalink Reply
mhawke
Good catch SuperNova. @Michaeldegreef... Ignore my recommendation on changing your php.ini. It's likely fine the way it is.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
@SuperNova, Hmm that's too bad.. I wanted to create a 2 column list on the home page only where images and texts would be easy to edit.

I don't think hard coding it into the template will be the best course of action, since I planned on using the 2 column list only on the home page (rather than default on every page).
I could see how creating a field, then a 2 column field and then another field could work (keeping them blank on pages that don't need them)... but that might be a bit too goofy...

Perhaps the best course of action would be to just insert the content manually through the HTML blocks (a bit harder to edit, and will have to put the images somewhere).

What do you guys think?

Thank you both for your help and replies by the way, I truly appreciate it.

Michael

edit:

I've looked at "designer-content" before, but I got confused along the way of installing it. I'll need to have another look at it. (edit: reading the description again it sounds like it's exactly what I need :). Thanks again)

Thanks for your suggestion
mhawke replied on at Permalink Reply
mhawke
OK, back to some basics.

You hard-code it into one specific 'page type' file or add a new page type file to your theme just for this purpose and assign your home page to use the new page type file.

Where are your theme files? Are you using one of the themes from the basic install or did you create your own in '[root]/themes?

Either way, have a look in your theme directory for files such as 'left_colum.php' of 'full_page.php'. These are the basic page 'templates' (or 'designs' or 'page layouts') you can use to build your site. They show up when you put a page in 'Edit' mode and go to 'Design'. You can assign any page on your site to use any of these installed 'page types' files.

If you attach one of these files here (rename the extension to .txt) and I'll see if I can put the divs and areas in it for you so you'll see how it's done.
Michaeldegreef replied on at Permalink Reply 2 Attachments
Michaeldegreef
I've tried making a theme myself so I bet I have done a lot of things poorly, I'll attach the default.php and main.css in a text file (There's also typography.css but I presume that's not too important).

This is what I have in my theme folder by the way:

[css]
-main.css
-typography.css

[img]
-containerbg.png
-footerbg4.png
-mainbg.png
-graphicspritesheet.png
-bannerwrapbg.png
-main_leftcolumn.png

default.php
typography.css (a copy; meant to fix wysiwyg editor.. bit wonky)
apple-touch-icon-precomposed.png
description.txt
apple-touch-icon.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
favicon.ico
thumbnail.png
mhawke replied on at Permalink Reply
mhawke
I don't think you've messed anything up. You just need to add more 'page type' files than just 'default.php'. I will have a look at your stuff and see if I can make some recommendations. Go get a bite to eat and relax for a bit.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
Thank you so much :).
SuperNova replied on at Permalink Reply
SuperNova
thanks to mhawke, always nice when people helping each other

so enjoy concrete5
Chris
mhawke replied on at Permalink Best Answer Reply 3 Attachments
mhawke
When you posted your original question, I'm sure you wanted an answer like 'just tweat this div' but instead you have a crazy man re-writing your work!

Ok, after some contemplation, here's what I came up with. I am under no illusion that this will all just work 'out of the box'. I had to make plenty of assumptions and I probably screwed up some stuff.

1) You should add this line at the top of every C5 page that stops people from just landing directly on your page:

<?defined('C5_EXECUTE') or die(_("Access Denied."));?>


2) I have attached a 'view.txt' file. Rename it to 'view.php' and upload it to your themes folder. It is used for all 'single pages' that you might get to later.

3) I have attached a 'main.txt' file. Rename it to 'main.css' and upload it to your themes folder. I have made some slight mods to this file explained below. Hopefully I didn't touch important things but you never know.

4) I have attached a 'two_equal_columns.txt' file. Rename it to 'two_equal_columns.php' and upload it to your themes folder. This will become your new 'page type' file in the next step.

5) Visit "Dashboard->Themes" and "Inspect" your theme. This new page type should show up in the list so click "Ok" to add it to your theme.

6) Visit the page you want this new page type to apply to and choose 'Edit->Design' and pick 'Two Equal Columns' from the available page types.

7) Sit back and bask in the glory of a perfect layout... not likely.

Concerns...

Without seeing your site, the empty divs called 'hbar1' and 'hbar' might cause trouble because they are defined as having a fixed width so I commented them out. If they are just being used for spacing, try removing them and using padding or margins on the divs instead.

css changes...

In main.css, #mainleftcol width is set to 686px so this needs to stay because changing it will mess up all your other pages that continue to use default.php as their page type. That means I needed new column id's on this page type. The new columns on this new page type need to be equal widths (correct?) so I renamed the divs that wrap the new areas to 'main-left-equal-col' and 'main-right-equal-col' and added the styles to main.css as well.

I removed the 'float:left and width:45%' from the divs that contain the new areas and transferred these style rules to the actual divs that need to be floated. I'm not sure if you need all these nested divs but without seeing the site, I can't say for sure.


Not sure what the '.editmode' css rules are trying to solve/accomplish so I didn't touch them but might be causing issues.

Toss this around for a while and post any questions. I'm sure there will be plenty.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
First of all thank you immensely for the time and dedication you've put into this. I'm very grateful for it all. I hoped for 'just tweat this div' but instead I got something much much better :).

I'll try and go through your instructions step by step and document as I go.

- I've went and downloaded your attached files

- I made a new directory for my theme with v4 (it was v3) and copied all files from v3 in there.

- I've copied your attached files into this directory and renamed them to 'view.php', 'main.css' & 'two_equal_columns.php'

- I've uploaded this directory as a new directory to my concrete 5 host's "themes" folder. and installed it.

- I came on the Inspect Theme page afterwards, where I found the following files in theme:
" -- two_equal_columns.php - New template. - [v] Create page type. --
-- view.php - Wrapper for static pages - None. This file will automatically be used. --
-- default.php - Default template. - None. This file will automatically be used. --"
I then proceeded by clicking the [ok] button

- I returned to website to check if anything was amiss but everything looked the same

- I proceeded on to step 6 and changed the page type to "Two Equal Columns".

- I sat back and basked in... no change :p

----------

regarding the concerns,

- the empty divs hbar1 and hbar are simply divs with a solid background colour meant for design/aesthetic purposes (a small bar at the top and bottom of the mainleftcol of the page). I gave them a fixed width because I wanted them to be a certain width compared to their parent, but I forgot that I could just pull it off by not giving a width and just adding margin-left\right to define the width.

- the columns for the page type were indeed meant to be equal widths.

- I'm slightly unsure if all of my nested divs are needed aswell haha.. It was a rough time trying to set up my design and I eventually decided to just go with what seemed to work (atleast for now).

- the .editmode css rules were placed because I noticed that blocks looked different and were in very noticable different positions than when outside of editmode. I placed these css rules so they'd be close to wysiwyg rather than totally different.

----------

I think I'm beginning to understand the structure of what needs to be done a bit more now. using a view.php as your "this will never change on any page" setup, using default.php as "the most commonly used setup of columns and block locations" and using pages such as two_equal_columns.php to define variations such as two columns or other deviations.
Am I correct?

----------

Thanks again for your wonderful help and assistance,

Michael.



PS: If you are willing to take a look at the site I think I've found a way... I've noticed at "Site Access" I could set it to "members". If I were to make a temporary guest account and pm you the login details you could take a look.
Please let me know if you think this is a good idea.
mhawke replied on at Permalink Reply
mhawke
Well, I'm encouraged that it all installed so that's step 1.

Yes, I'd be able to have a look at it if you pm me some credentials.

When you say 'no change' do you mean absolutely nothing changed in that it looks and behaves absolutely identical to how it did before? If that's true we need to make sure the system is actually using the two_equal_columns.php file and not still using default.php.

One issue can be your cache. When developing a site, make sure all your caching is turned off in both the C5 environment and your browser(s). Concrete5's cache is at "Dashboard->System and Settings->Cache and Speed Settings". Clear the cache and turn all the caches off until you're done developing your site (maybe leave them off permanently but that's a different discussion).

To make sure the system is picking up the new page, you can add something to the two_equal_columns.php file such as an <h2> somewhere in the html and see if your page displays your changes.
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
As far as I can see there is no change, I also inspected the code and saw no divs as mentioned for the two_equal_columns.php file (not seeing divs such as "main-left-equal-col" or "main-right-equal-col"). I presume it's somehow still using default.php then.

I've already set my cache to be turned off for development. I've also cleared my cache but there was no difference.

I've tried applying the page design again (it registered as being set to two_equal_columns.php) but after trying again it still did not show differently.

I've added a small bit of text at the headerdescription at the two_equal_columns.php file but it didn't seem to load either.
mhawke replied on at Permalink Reply
mhawke
So if you make a change to default.php such as adding an <h2>, does it show up?

Silly question but after you copied all your files to v3 and inspected it to add the new page types, you activated v3 as your theme correct?
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
It also doesn't update! ... I wonder what went wrong.

edit: I checked the themes.

Since I made a new directory (with v4 instead of v3) - but didn't change the description.txt I got them mixed up, and installed, but not activated the later version.

I've now activated the correct version and it's showing different than the original

---

"Silly question but after you copied all your files to v3 and inspected it to add the new page types, you activated v3 as your theme correct?"

Not so silly after all :p.

My bad!
mhawke replied on at Permalink Reply
mhawke
So are you now basking in the glory?
Michaeldegreef replied on at Permalink Reply
Michaeldegreef
I've now activated the LATEST version with all the changed we've made (V4). It's now loaded correctly.

It's still a bit of work on getting everything to appear as I want it to, but I think I have enough now to get on my way, I believe I understand how it works (I'll have to fix some things and copy over some of the blocks lost from the previous version but I get the main idea of what I'll need to edit and do to make these pages work).

Yes, I think I'll be able to get cracking with this now :).

Thank you so much for all your help.

Is there anything I could do to thank you further? I've seen the "Mark as Best Awnser" option but it only applies to 1 post.

Michael.
mhawke replied on at Permalink Reply
mhawke
You could buy my wife a Mercedes SLK for Christmas. Red please.

No really, I'm serious.

I'm glad to be of assistance. You've done all you need to do to thank me. I'm just paying the community back for all the good help I received here when I started on this crazy journey.