Forums

Different DIVs for layout container

Permalink
Hello.

I am still fighting with all the new possibilities of the new 5.7.

I am looking for a way to give different layout containers different DIV names.
When I start with a new container, I have only the oppotunity to choose 'twitter bootstrap'. But I want also 'twitter bootstrap red' and 'twitter bootstrap blue'. Then in the code should appear a class red or blue.

The page_theme file is probably the right way ... but I don`t know how to do.
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi GrafFoto,

You have a couple options for doing this.

1. Add a class to the layout container.
- create a layout
- click on one of the layout columns
- click Edit Layout Design from the popup menu
- from the mini-toolbar menu, click on the gear icon
- in the Custom Class text area, type in a class name (without the period) and press enter
- save
Example:
<div class="ccm-custom-style-container ccm-custom-style-pagefooter-2547 blue">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-4">
                        <!-- content -->
                    </div>
                    <div class="col-sm-4">
                        <!-- content -->
                    </div>
                    <div class="col-sm-4">
                        <!-- content -->
                    </div>
                </div>
Viewing 15 lines of 19 lines. View entire code block.

- the layout container now has a class of .blue that can be used to target elements

2. Use a layout preset.
http://www.concrete5.org/documentation/developers/5.7/designing-for...
Example:
public function getThemeAreaLayoutPresets()
{
    $presets = array(
        array(
            'handle' => 'red',
            'name' => 'Red',
            'container' => '<div class="row red"></div>',
            'columns' => array(
                '<div class="col-sm-8"></div>',
                '<div class="col-sm-4"></div>'
            ),
        ),
        array(
            'handle' => 'blue',
            'name' => 'Blue',
Viewing 15 lines of 24 lines. View entire code block.
GrafFoto replied on at Permalink Reply
Hello MrK,

thanks for your fast answer...
nr. 1 is not working - I get the following code:
<div class="container"><div class="row"><div class="col-sm-12">    
<div class="row">
      <div class="col-sm-4"><div class="ccm-custom-style-main42 red">


but I need this:
<div class="container red"><div class="row"><div class="col-sm-12">    
<div class="row">
      <div class="col-sm-4"><div class="ccm-custom-style-main42">


But there is no possibility to set classes at the containerlayout - or maybe I do not find them ;-)

But I will try version 2 ...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@GrafFoto

It is not working because you are clicking "Edit Area Design". You want to click on "Edit Layout Design".

It will not add a class to <div class="container">, instead it will create a div wrapper with the class. You can use the class to target .container.

Example:
.red .container {
    /*...*/
}

- this will target descendants of .red with the class of .container
GrafFoto replied on at Permalink Reply 2 Attachments
Mmmmmh ... in the german version we have other names. But there are only 2 options, and I`ve tried both ... I`ve made two screenshots, so that you can see my problem.

Screenshot cont01 produces the code from my last post.

At screenshot cont02 you see, that there is possibility to write class names???

I really don`t know how you did it????
MrKDilkington replied on at Permalink Reply
MrKDilkington
@GrafFoto

You will want to use "Layoutdesign bearbeiten".

If a column area has blocks in it, then you will need to click on the column area name tab to access the menu.
GrafFoto replied on at Permalink Reply
Hi MrK.

Thanks for your patience. But have you looked at my second screenshot? That is exactly what I`ve done. I`ve clicked on the name of the column ... ????
MrKDilkington replied on at Permalink Reply 3 Attachments
MrKDilkington
@GrafFoto

I switched my interface language to German and took screenshots of the required steps.
GrafFoto replied on at Permalink Reply
You can do in english! I can switch my language!

But you will make me really happy with some screenshots. I am not a C5-Newbie, but this one really drives me crazy.

Until now the container layout is not really my friend ... I also had a lot of problems to move these containers ... but for this I found a strange solution (I`ve posted it today in another discussion where you also posted).
MrKDilkington replied on at Permalink Reply
MrKDilkington
@GrafFoto

Were you able to follow the steps in the screenshots I attached?
GrafFoto replied on at Permalink Reply
Hello MrK.

Thank you for all the work ... I tried again with an empty container ... same problem ...

Then I made an update to the actual c5 (I tried with 2 homepages with 5.7.3 and 5.7.4). Now it works! You need 5.7.5 to get the 'Layoutdesign bearbeiten' possibility!
Responsive replied on at Permalink Reply
Responsive
Hi
when not using a gridframework the option 2 using layout preset allows only a default for the container and columns, is there any way to set a default for the Div with ccm-custom-style-container. 

<div class="ccm-custom-style-container ccm-custom-style-pagefooter-2547 ">
                <div class="container class ">
                    <div class="column class">
                        <!-- content -->
                    </div>
                    <div class="column class">
                        <!-- content -->
                    </div>
                   <div class="column class">
                        <!-- content -->
                    </div>
                </div>
            </div>
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Responsive

I don't believe so.