resizing content blocks in concrete5

Permalink
I am very new to CMS's in general and I have only been trying out Concrete5 for a couple of days now so forgive me if this is obvious.

I have managed to import an existing site into Concrete5 and I have learned how to add content areas into my html.

However I have been scratching my head over one issue all afternoon and I wanted to see if anyone else has encountered this problem (running a few searches on the forums didn't bring up anything that I could relate to this)

I have added a few images to the database and added an Image Slider block to my homepage, the issue I am having is that it's enormous! The Image Slider takes up practically the entire page and I can't figure out how to resize it.

I've been going through the C5 documentation and the tutorial videos are fantastic but I can't really get my head around this one. I have tried to create a custom class (slideshow-resize) with a width of 70% in my main css file.

I then added this to my page_theme.php file

public function getThemeBlockClasses()
{
return array(
'Welcome' => array('slideshow-resize')
);
}
but when I try to use this custom class on my image slider block, it doesn't show up as an option. So I wanted to ask you all for any suggestions.

Thanks in advance

 
Kurtopsy replied on at Permalink Best Answer Reply
Kurtopsy
There was a thread about this that started yesterday. Might find something helpful in there.
https://www.concrete5.org/community/forums/customizing_c5/set-minimu...
pragmatic84 replied on at Permalink Reply
Thanks for that, it didn't quite solve my problem but it got the gears turning in my head and I found a workable solution that was much simpler.

Thanks!
MrKDilkington replied on at Permalink Reply
MrKDilkington
@pragmatic84

The Image Slider comes with basic CSS found in the block view.css. This gives the slider its basic structure.
concrete\blocks\image_slider\view.css

Additional CSS is added to the theme to style the slider, set its size, and make it responsive.

An example of this additional CSS is found in the default Elemental theme. It is in a file called image-slider.less.
concrete\themes\elemental\css\build\blocks\image-slider.less

Here is the compiled image-slider.less code:
https://gist.github.com/anonymous/89d6fc1e84db9e3d17a5...