Managing CSS files, modifying add-ons
Permalink
Hello all,
I'm just starting to wrap my head around css, and working with an existing theme as a base (Green Salad) that has well-commented css is really helpful.
One of the real basics I'm having a hard time figuring out are "best practices", specifically in the context of C5. For example, I found that having a main stylesheet and a typography stylesheet makes lots of my development much easier. Do most here agree with that?
Now the C5-specific stuff... When I'm dealing with add-ons (in my case superfish and tony's image gallery) or even some of the included blocks that have their own css, what is the preferred way to alter the css? Should I just try to override what I want changed in my main css file or should I edit the included css, or should I be making my own template for the block and editing that css?
And lastly... If I want to create for example my own superfish template, should I drop the files in packages/superfish/blocks/superfish/templates or does that go elsewhere like blocks/superfish/templates in the root of the C5 install???
Thanks!
C
I'm just starting to wrap my head around css, and working with an existing theme as a base (Green Salad) that has well-commented css is really helpful.
One of the real basics I'm having a hard time figuring out are "best practices", specifically in the context of C5. For example, I found that having a main stylesheet and a typography stylesheet makes lots of my development much easier. Do most here agree with that?
Now the C5-specific stuff... When I'm dealing with add-ons (in my case superfish and tony's image gallery) or even some of the included blocks that have their own css, what is the preferred way to alter the css? Should I just try to override what I want changed in my main css file or should I edit the included css, or should I be making my own template for the block and editing that css?
And lastly... If I want to create for example my own superfish template, should I drop the files in packages/superfish/blocks/superfish/templates or does that go elsewhere like blocks/superfish/templates in the root of the C5 install???
Thanks!
C
Am I missing a guide somewhere that explains some of the basics?
If I follow correctly, in the root I should put any block modifications under blocks, with a subdir that has the same name as the subdir of the add-on I wish to modify, correct? And this applies regardless of whether the initial add-on is part of the base (under concrete/blocks) or if it's from a package (under packages/pkgname/blocks)?
What about simple css overrides where I want to replace the entire css? Do I still create a subdir for the block under the root "blocks" directory, but only add in files I wish to replace (such as css or images)?
If I follow correctly, in the root I should put any block modifications under blocks, with a subdir that has the same name as the subdir of the add-on I wish to modify, correct? And this applies regardless of whether the initial add-on is part of the base (under concrete/blocks) or if it's from a package (under packages/pkgname/blocks)?
What about simple css overrides where I want to replace the entire css? Do I still create a subdir for the block under the root "blocks" directory, but only add in files I wish to replace (such as css or images)?
yes, if you're overriding a blocks view.php, or if you're creating custom templates, then they should go in /blocks/my_block_handle/view.php and /blocks/my_block_handle/templates/my_template_name.php
For simple CSS overrides, you can just add css snippets to your themes css file. The tricky part is making sure that the override the block's styles. occasionally it helps to use the !important signifier:
.myClass { border:1px solid red !important }
for more extensive css changes you can also override your blocks css file altogether by copying it to the overrided blocks directory.
For simple CSS overrides, you can just add css snippets to your themes css file. The tricky part is making sure that the override the block's styles. occasionally it helps to use the !important signifier:
.myClass { border:1px solid red !important }
for more extensive css changes you can also override your blocks css file altogether by copying it to the overrided blocks directory.
"for more extensive css changes you can also override your blocks css file altogether by copying it to the overrided blocks directory."
Meaning make a skeleton directory in /blocks and only drop the css in there?
For example, if I have /packages/tony_pro_photo/blocks/tony_pro_photo/css/pro_photo.css and I only want to override the css, would this work?
/blocks/tony_pro_photo/css/pro_photo.css
That would be ideal as as far as upgrades and such are concerned - no worries about things getting overwritten during an upgrade and if it's a massive css rework, no need to put a huge chunk of overrides in my main theme css file.
Meaning make a skeleton directory in /blocks and only drop the css in there?
For example, if I have /packages/tony_pro_photo/blocks/tony_pro_photo/css/pro_photo.css and I only want to override the css, would this work?
/blocks/tony_pro_photo/css/pro_photo.css
That would be ideal as as far as upgrades and such are concerned - no worries about things getting overwritten during an upgrade and if it's a massive css rework, no need to put a huge chunk of overrides in my main theme css file.
I'm still confused on this one. I tried this with simplenews and my override did not take. I had to edit the package's files directly.
My paths...
And a heads-up - C5 will delete any of your changes in the packages directory when upgrading. There is no warning of this, so be careful with your overrides..
My paths...
simplenews package: /packages/simplenews/blocks/news_list/templates/mytemplate my attempted override: /blocks/simplenews/blocks/news_list/templates/mytemplate
And a heads-up - C5 will delete any of your changes in the packages directory when upgrading. There is no warning of this, so be careful with your overrides..
I'm having the same problem with my Nivo Slider template while trying to get it to overwrite the package styles - this should be ridiculously straight forward yet it's proving to be very difficult and frustrating. Even putting the same named css file in my themes css directory will not work.
I'm not familiar with how the Nivo Slider package is structured, but you should be able to override the styles by either 1) putting the CSS file in the theme root, or 2) putting a view.css file in the block's root.
-Steve
-Steve
Perhaps overriding an add on's files (note: something in [root]/packages) is related to this bug:
http://www.concrete5.org/developers/bugs/5-4-1-1/overriding-package...
Been having this issue myself. I just worked around it by overriding any styles I wanted to change via my own stylesheet (sometimes that't not the cleanest method, but it'll get by).
Any other thoughts on this topic?
http://www.concrete5.org/developers/bugs/5-4-1-1/overriding-package...
Been having this issue myself. I just worked around it by overriding any styles I wanted to change via my own stylesheet (sometimes that't not the cleanest method, but it'll get by).
Any other thoughts on this topic?
Like calendar.css in the Calendar add-on? How would one override that?
-Steve
-Steve
Has anyone reported this as a bug? I'm having the same issue, I want to change the view.php for a block content_slider. The block sits in packages/content_slider/blocks , I would have thought to over ride it I just need to add /blocks/content_slider/themes/my_theme_style_name/view.php and perhaps a css in the css folder. Doesn't work, very frustrating. Has anyone found a solution? The only solution I can think of is copying the block to the core concrete directory where all the core blocks are, this will still cause upgrade issues though (if it works, haven't tried it yet)
Not sure this helps much but it has been reported, check outhttp://www.concrete5.org/developers/bugs/5-6-0/overriding-package-b...
If you need to override some of the templates in a theme or block, you normally only need to copy the specific files you need to override.
Hope that helps!