where to place css?

Permalink
Hi there

Where should I place the css?

I'm still learning c5 so forgive a little

started creating my homepage using the elemental theme 5.7

In main: I need 4 images across top of page so I have this

<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 border">
<div class="thumbnail_container">
<div class="thumb">
img:this area will be made editable
</div>
</div>
<div>text:this area will be made editable</div>
</div>
etc

I have css for the thumbnail_container and thumbs but where do I place it?

example css
.thumbnail_container {
position: relative;
width: 100%;
padding-bottom: 33.333%; /* aspect ratio */
float:left;
}


Does it go in main.less or miscellaneous.less or elsewhere?


low tech

lowtech
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi lowtech,

You can add it to the bottom of main.less (CSS can be used in .less files).

Changes made to the default Elemental theme will be overridden/overwritten when you update concrete5.

You can avoid this by using Custom CSS or using Cloneamental.
- Custom CSS
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button
- Cloneamental
https://www.concrete5.org/marketplace/themes/cloneamental...
lowtech replied on at Permalink Reply
lowtech
Hello MrKDilkington

Yes I have cloneameantal installed already. Advised in a previous thread. Thanks for mentioning though.


Ok I will drop the css in main.less

Do I need to prefix the css div.ccm-page or do smthg like this

div.ccm-page {
main {
my.css


or just add straight css?

LT
MrKDilkington replied on at Permalink Reply
MrKDilkington
@lowtech

It is a good idea to scope/namespace your theme CSS with .ccm-page.

This helps prevent the theme CSS from bleeding over into the concrete5 interface.
lowtech replied on at Permalink Reply
lowtech
Hi MrKD

Ok I'll do that

It's all experimental for me at the moment

I've just added this in my template 4 times (only one row)

<div class="row">


<div class="col-xs-6 col-sm-6 col-md-3 border">
<div class="thumbnail_container">
<div class="thumb">
<?php
$a = new Area('Image small');
$a->display();
?>
</div>
</div>
<div>
<?php
$a = new Area('Content');
$a->display();
?>
</div>
</div>


and it shows up ok when I create new page but when I hover over the areas ALL areas highlight their border inn that row (I only have one row atm)

Can you tell me if that behavior is correct? --- just seems odd

sorry for the extra question

Do I need the $c in display?

Thanks
MrKDilkington replied on at Permalink Reply
MrKDilkington
@lowtech

Each area will need a unique name and you will need $c. The $c variable is the current page object.
$a->display($c);
lowtech replied on at Permalink Reply
lowtech
MrKD

Wow, how did I miss that!!

well done, appreciated

ok I can move on now

Thanks
lowtech replied on at Permalink Reply
lowtech
Hello

I've been locked out of my account.

Sign In Error.
This user is inactive. Please contact us regarding this account.

**[ SOLVED BY ADMIN ]**