Forums

Can't add Style or Custom Template to Composer Control in Page Type

Permalink
Hey All,

I've got a blog page setup with 5.7 - works fine, decided to add an image block, and then wanted to style it, so I tried adding a class, and I tried adding a custom template.

Neither of which are applied when I add a new blog page.

Does anyone know if a composer control block in a page type can't be styled with either of the two methods listed above?
juddc
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi juddc,

Using 5.7.5.6, custom templates applied to Composer Control blocks work correctly. Applying classes or other design changes do not apply correctly.

When applying classes and design styles, the container div displayed in Edit Defaults is not displayed when creating a page of that page type.

Example: Edit Defaults of page type
The Composer Control block has two custom classes, "applesauce" and "shoelace". A custom template called "Red". And two Design custom CSS styles, "margin-left: 116px;" and "padding-top: 131px;". These are applied using a div container that wraps the Composer Control block.
<div class="ccm-custom-style-container ccm-custom-style-main-13421 ccm-block-custom-template-red applesauce shoelace">
    <div class="ccm-ui">
        <div class="alert alert-info">The Image page type composer form element will output its contents here (Block ID 13421)</div>
    </div>
</div>

The custom CSS styles are injected into the page head inside a style tag.
<style type="text/css" data-area-style-area-handle="Main" data-block-style-block-id="13421" data-style-set="80">
.ccm-custom-style-container.ccm-custom-style-main-13421 {
    margin-left: 116px;
    padding-top: 131px
}
</style>

Example: page created from page type
The custom template is applied (it adds a div around the image with the class of "red"), but the container div for the custom style class and custom classes is not applied. The custom styles CSS style tag is not added to the page head.
<div class="red">
    <picture>
        <!--[if IE 9]><video style='display: none;'><![endif]-->
        <source srcset="http://localhost/concrete5/application/files/3914/5101/5992/Mail-Attachment-copy-31.jpeg" media="(min-width: 900px)">
        <source srcset="http://localhost/concrete5/application/files/3914/5101/5992/Mail-Attachment-copy-31.jpeg" media="(min-width: 768px)">
        <source srcset="http://localhost/concrete5/application/files/3914/5101/5992/Mail-Attachment-copy-31.jpeg">
        <!--[if IE 9]></video><![endif]-->
        <img alt="#" srcset="http://localhost/concrete5/application/files/3914/5101/5992/Mail-Attachment-copy-31.jpeg" class="ccm-image-block img-responsive bID-13439">
    </picture>
</div>
juddc replied on at Permalink Reply
juddc
@MrKDilkington

Wouldn't work for me - the Custom Template, so I removed the Composer
Control from the Page Type and then removed the control from the
Composer form.

I re-added everything - Composer Form first, then the Composer Control
to the Page Type and it worked. Looks like it's something that has a
particular order that things need to happen before it will work.

Thanks for he heads up re: classes. Kind of odd that a custom template
would work, but not a class.

On 2016-03-25 4:00 PM, concrete5 Community wrote:
MrKDilkington replied on at Permalink Reply
MrKDilkington
@juddc

I will make a bug report for this.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@juddc

I have created a bug report for you to confirm.
https://www.concrete5.org/developers/bugs/5-7-5-6/custom-classes-and...