Hi all,
Firstly, thanks to the Dublin crew for divulging loads of their theming secrets, and putting me on the right track after last week's meet up. It's nice to have a clear path to forge on ahead. And so I have :)
I've started with Zen, and Sass, and Compass (and Ruby Gems on Windows argh!!!) and it's coming along nicely.
So, to start with a simple question about Zen sub-themes - If I want change the layout.scc/css, do I edit directly or is this something I should be overriding in a custom stylesheet? I'm not sure what the repercussions might be when it comes to updating, or on a more micro-level with potential conflicts. Responsive isn't a requirement in this case.
I'm looking for general approach to styling once I've got my sub-theme as a base. Do you add your own stylesheets or edit the existing ones?
Thanks :)
Lisa
Comments
Create sub theme - edit files directly
Hi Lisa,
Once you create a sub-theme, you are then free to edit the files from that sub-theme directly.
When Zen is updated, it will overwrite the core zen files and the sub-theme in the zen folder, but not your sub-theme, which will (should be) outside of the zen folder in your sites/all/themes folder.
There is quite detailed info here to get you started:
http://drupal.org/node/1549668
Mark Conroy,
Lead Frontend Developer,
Annertech - Web Agency of the Year 2016.
Create sub theme - edit files directly
Hi Lisa,
Once you create a sub-theme, you are then free to edit the files from that sub-theme directly.
When Zen is updated, it will overwrite the core zen files and the sub-theme in the zen folder, but not your sub-theme, which will (should be) outside of the zen folder in your sites/all/themes folder.
There is quite detailed info here to get you started:
http://drupal.org/node/1549668
Mark Conroy,
Lead Frontend Developer,
Annertech - Web Agency of the Year 2016.
zen fixed width
Hi Lisa,
once you've compass working, it's fine to edit the included .scss files once you've a sub-theme set up like Mark outlined. In your case you'll probably want to edit the .info file to point to the file for fixed-width layouts.
Or you can create your own and point the .info file to that either.
I've found the meet ups useful and helpful too, posted links to some of what was discussed at the last one
DrupalCon Dublin 2016
http://dublin2016.drupal.org
http://www.drupal.ie/map
FireSass
Hi guys,
Thanks for the responses. This is fun :) And nice post Conor, I'll add some more links from last week's meet up too. I've got Nice Menu doing what I want it to do, so I'm delighted with myself today.
I'm trying to get FireSass working with Firebug. Does anyone use it?
I'm stuck at this step:
enable Sass's :debug_info option
here:
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
The only file I can find is
C:/Ruby200/lib/ruby/gems/2.0.0/gems/sass-3.2.7/lib/sass/environment.rb
And when I add variations of Sass::Plugin.options[:debug_info] = true it just breaks. Not sure if I've the wrong file, or syntax or just what...
Thanks!
For FireSass add sass_options
For FireSass add
sass_options = {:debug_info => true}
to your config.rb file.
Hopefully in the future you won't need something like FireSass as it will be built into the browser with source maps. Not sure what the status is in Firefox but Chrome has support for source maps. You can enable sass support here https://plus.google.com/+AddyOsmani/posts/Q3myXcQsKCr
Sass 3.3 will support the official source map spec so it will be even better then!
Context Layouts vs Panels - best for Zen?
Hi again,
Thanks edward, I'll try that now. And experiment with Chrome.
Do you deploy just the css files to the live environment, once you've compiled the scss?
I'm just now getting to grips with exactly what sass does, and its advantages etc. But even without knowing, it 's like a new toy :)
Another front-end question
I've been looking into layouts. I need to have a sidebar on inner pages, and a single, full-width column for the front page and landing pages.
I'm using Context Layouts to add a class to the body tag based on the Path, so I've been able to create a full-width front page layout by disabling the blocks in sidebar on front page only, and adding rules for specificed CSS.
That's all good, but I'm not sure it's the way to approach the rest of the layouts.
While going through Zen files (and you're right Stella, great documentation) the .info says:
; To add a Panels layout (which can also be used by Display Suite), uncomment
; the line below and see the documentation at: http://drupal.org/node/495654
; plugins[panels][layouts] = layouts
So is Panels a better way to manage layouts for Zen, compared to Context Layouts? Does it matter which I use? Any recommendations?
Lisa
yes
the generated css is what's needed on the server, remember to clear the cache.
You might just be able to get by using context to place blocks within the Zen themes' regions. Maybe play around with path or node based conditions.
Some swear by panels, I used to use them, but less and less now.
DrupalCon Dublin 2016
http://dublin2016.drupal.org
http://www.drupal.ie/map
Mmmm. Yes. Also, no.
So basically, Context is cool for when you're:
Panels is for when you want a handy way to create a different layout for a given page.
Panels creates a load of extra markup, so I'm not sure I'd want to be using it for every page, but when you're doing something different, it's really handy. For your usecase, I'd suggest using Context and Zen's regions first and see how far you get. As Conor intimated, I'd reckon you can do an awful lot with Context. I've done 2 jobs recently with just Context and Zen - no extra regions and little enough messing.
My rule of thumb is that if you need to create 2 panels that are basically the same, e.g. 2 separate panel pages at different urls, then Panels is not for you. Panels are for those pages that are different.
p.s. thank the Lord for preview - heavens above, the typos!
Context and Panels with Zen
This is a good point,
I would probably see how far I can get with using just Zen and Context in order to get my basic layouts sorted. If you come across a page that needs a distinctly different layout then you could always override that page with Panels and create a new layout just for that case.
Also note that you can create your own Panels layouts that allows you to control the markup and not have the messy code that layout builder provides.
So many choices! just find what works for you.
Ditched Panels, for now
Hi guys,
Thanks for the detailed responses. I decided to remove panels. I did feel the extra markup was excessive and I didn't like the way they seemed to force me to create menus. Having said that, I don't think I was using them for the right reasons.
I watched a few tutorials about Panels, and understand their use better now, so I look forward to trying them on a non-critical site. The In-place editor option is a nice feature, although I wonder if I'll ever get the demand for such a thing.
So I'm using context (the path + theme html combo) and it does the job. I also have my_new_page.tpl for any landing page-type layouts, and a few layout specific regions, which works, but I'm still not 100% it's the most correct way. I could bend someone's ear on the subject further I'm sure.
I think I could use Context Layouts to achieve the same thing, or even just designate which blocks to show on what pages, but I'm too fresh at this to know yet :)
Anyway, I keep plugging away, and learning more each day. Been using Views a lot and totally impressed.