Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Joomla 3 templates and T3 questions

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi there

I have just downloaded ZenBase for Joomla 3, and I am playing around with the new T3 framework. Now I have not been working on Joomla 3 for very long, and I was wondering if you could point me in the right direction regarding best practice:

I am used to creating my own theme.css file located in the template>templatename>user folder, when creating a new site on a blank template. I don't see how to do that here. Which files and folders should I be editting.

Also, I tried to delete the optional folders in the zenbase>css>themes folder containing styles eg. Adrift, Goldfish etc. but they still appear under the drop-down menu under the "Theme" tab in Template Manager. I see they only disappear when I delete them from the zenbase>less>themes folder.

I guess I am just a little confused as to how to streamline my workflow, with only my own CSS files being used by the template. I scanned the Knowledge Base briefly but didn't come up with answers on the specific way of handling and differences between Templates, Layouts, and Themes...
  • designlogik's Avatar
  • designlogik
  • 6 Month Developer
  • 42 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 11 years 1 month ago by designlogik. Reason: missing text
The administrator has disabled public write access.
Okeedokee...

I think the custom.css file allows me to make my own tweaks without destroying the existing stylesheets, am I correct?

The only thing is, that now my site is no longer properly responsive due to some of the overrides.

How is the mediaqueries file handled?
  • designlogik's Avatar
  • designlogik
  • 6 Month Developer
  • 42 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi

this is difference with Joomla 3.0....it is using and supporting LESS. So when you change mentioned css files inside css/theme those changes will be overwritten everytime when you compile less inside template setting.

So you get to correct answer yourself...exactly for this reason there is prepared blank custom.css where you should place all your changes.
  • Zuzuzu's Avatar
  • Zuzuzu
  • LIfetime Developer - Big Bamboo
  • 1925 posts
  • 107 Thanks
  • Karma: 67
The administrator has disabled public write access.
Hi

Okay, I've been playing around more with the template system, and the way LESS fits into the whole thing. I understand the difference between the template and styles of that template, as well as the way themes fit into the picture now. But I have another question: I need to create a way of making changes without an update rewriting all of those changes.

Can I then use the T3 "theme" system, by creating a new folder in less > themes (where there are a set of existing themes eg. goldfish, greyred etc.) and adding my styling there? Will that entire folder be overwritten? I have read the T3 documentation, and that seems to be the way to go, but it mentions nothing about whether the folder will be safe when updating.

Also, given the theme system for customisation, I'm not entirely sure how the blank custom.css file fits into everything?

Thanks! I've started to enjoy using the new framework. Pity to see the ZenGrid framework go, but it has a worthy replacement :)
  • designlogik's Avatar
  • designlogik
  • 6 Month Developer
  • 42 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi glad you like it :)

Basically any changes to the core files will get overridden when you update. This happens unfortunately with the custom.css file.

Ive just added an item on the tracker to help avoid this but will look at providing an alternative for our users before that gets added to the T3 core.

The less/theme folder is used by Theme Magic to create your own themes and new themes / folders do not get overwritten on a reinstall.

The themes folder behaves a little differently and plugs the custom less variables into your theme and once compiled they are added to the css/themes folder. So yes it's possible to create your own theme that way but you need to ensure thta you hit the compile to less button in the template admin after making any changes.

If you are using Theme magic then the less gets compiled automatically anyway.

Hope that helps.

Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Actually Ive just figured out a work around for the custom.css getting overwritten. I'll be adding the fix to the next update to all T3 themes so no ones custom.css file will be overwritten from now on.

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Thanks Anthony, that's great.

I'm still not 100% sure why the custom.css file is necessary, if you can create themes. Is it so that one can make changes without using Theme Magic? Or is it to work around having to use LESS?

I made some additions to the custom.css file, and I had issues with the responsive nature of the site, while changes to the template.less file in my own theme folder retained the responsivity.

Just trying to wrap my head around this all :)
  • designlogik's Avatar
  • designlogik
  • 6 Month Developer
  • 42 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hey yes it's primarily for folks that want to avoid using LESS.

I'll also add a custom.less file as well which you will be able to use in the same way and not get overwritten.

If you wanted to do that now you can just include the custom.less file in the template.less file.

Like this:
@import "custom.less";

The Magic is good for basic colour and some dimension changes but if you nee to overwrite bootstrap styles or T3 styles and you use LESS then creating a custom less file is the way to do it.

Actually i just realised we cant use the same protocol with the custom.less file because if we dont include the less file in the package then it will error.

So to create a custom.less file you need to upload it to less/ folder then add the reference to the custom.less file as per the code above.

Cheers
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers