Forums

Adding Custom CSS Classes to Blocks, Areas and the Editor

Permalink
I'm trying to add " img-circle" to an image following the tutorial noted above. I followed the instructions but can only class the block and not the image.. as seen below ..
( inspect element )
[ <div class="ccm-custom-style-container ccm-custom-style-imageblock1-27 img-circle">
<img src="/site11/application/files/3114/5409/7518/logo.png" alt="logo.png" width="440" height="220" class="ccm-image-block img-responsive bID-27"> </div> ]
page_theme.php
[ public function getThemeBlockClasses()
{
return array(
'image' => array(
'img-circle'
)
);
} ]
I'm learning so any help would be greatly appreciated..

Bob
rdealmeida
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi rdealmeida,

Custom CSS classes are applied to blocks using a div container. A block may be made up of many different elements, because of this they are not directly applied to the elements inside them.

Example: Image block without a custom class
HTML
<picture>
    <!--[if IE 9]><video style='display: none;'><![endif]-->
    <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" media="(min-width: 900px)" class="ccm-image-block img-responsive bID-12960">
    <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" media="(min-width: 768px)" class="ccm-image-block img-responsive bID-12960">
    <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" class="ccm-image-block img-responsive bID-12960">
    <!--[if IE 9]></video><![endif]-->
    <img src="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" alt="#" class="ccm-image-block img-responsive bID-12960" width="280">
</picture>

Example: Image block with a custom class of "image-circle"
HTML
<div class="ccm-custom-style-container ccm-custom-style-main-12959 image-circle">
    <picture>
        <!--[if IE 9]><video style='display: none;'><![endif]-->
        <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" media="(min-width: 900px)" class="ccm-image-block img-responsive bID-12959">
        <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" media="(min-width: 768px)" class="ccm-image-block img-responsive bID-12959">
        <source srcset="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" class="ccm-image-block img-responsive bID-12959">
        <!--[if IE 9]></video><![endif]-->
        <img src="http://localhost/concrete5/application/files/4414/5101/5992/PBC_280X280.jpg" alt="#" class="ccm-image-block img-responsive bID-12959" width="280">
    </picture>
</div>

CSS
.image-circle .ccm-image-block {
    border-radius: 50%;
}

- the container div has a class of "image-circle"
- the img element created by the Image block will always have the class "ccm-image-block"
rdealmeida replied on at Permalink Reply
rdealmeida
Hi MrKDilkington,
Thanks for the quick reply.. I tried again to add the " img-circle" to the advanced custom class
area.. but no luck.. Seems like the theme is not seeing the page_theme file.. I've tried the print 'test'; in the third line of the page_theme file with no luck.. but yet .. if I try to break the page_theme file..ie: remove a semi-colon or leave off a curly bracket, C5 complains.. any ideas ??

Thanks
Bob
MrKDilkington replied on at Permalink Reply
MrKDilkington
@rdealmeida

What is the full path to your page_theme.php?
rdealmeida replied on at Permalink Reply
rdealmeida
Hi MrKDilkington

D:\xampp\htdocs\site11\application\themes\IntBrewClub\page_theme.php

and the opening line in the php file is

[<?php
namespace Application\Theme\IntBrewClub;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{ ]

Bob
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
@rdealmeida

I believe the theme folder name should be lowercase and underscores for separate words.
- current "IntBrewClub"
application\themes\IntBrewClub\page_theme.php
- change to "int_brew_club"
application\themes\int_brew_club\page_theme.php

page_theme.php
- ThemeProviderInterface will allow you to use custom layout presets
<?php
namespace Application\Theme\IntBrewClub;
use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;
class PageTheme extends \Concrete\Core\Page\Theme\Theme implements ThemeProviderInterface
{
}
rdealmeida replied on at Permalink Reply
rdealmeida
Thank you..it's showing up in the custom class just like I want..
now getting it to work..I've put the image.css in the default directory but no luck..
and ideas ??

Thanks Again

Bob
MrKDilkington replied on at Permalink Reply
MrKDilkington
@rdealmeida

"now getting it to work..I've put the image.css in the default directory but no luck..
and ideas ??"

Are you trying to add a CSS file to your theme?
rdealmeida replied on at Permalink Reply
rdealmeida
I thought that the custom class css was in a different folder as in elemental.. css\build\blocks\image.less.. but I added it to my main.css and everything works as needed..
This is my first shot at building with 5.7..
Again thanks for the help

Bob