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
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
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
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
@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.
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.
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
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
@lowtech
Each area will need a unique name and you will need $c. The $c variable is the current page object.
$a->display($c);
Each area will need a unique name and you will need $c. The $c variable is the current page object.
$a->display($c);
MrKD
Wow, how did I miss that!!
well done, appreciated
ok I can move on now
Thanks
Wow, how did I miss that!!
well done, appreciated
ok I can move on now
Thanks
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 ]**
I've been locked out of my account.
Sign In Error.
This user is inactive. Please contact us regarding this account.
**[ SOLVED BY ADMIN ]**
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...