Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#184626

Hello all – I’m looking for help from staff and user base on this…

I have been developing templates on the T3v2 framework for about 2 years now and I think I understand it pretty well. I’ve seen a number of threads on here as well as read the docs for the t3v3 framework, but I’m coming up short on where to begin with a custom template creation.

I start everything from scratch – a picture in Xara (photoshop/illustrator-like application you should check out: Xara.com) that I export all of the colors, images, measurements, etc from. Then I build the css.

I understand the concept of the .less files ok, and I get that they “generate” the css files for the template, but I don’t really know which files are which. I have seen that I can do stuff in custom.css as well without worry that it will get overwritten. So a few questions:

1. Is there some documentation on exactly what all those less files are for? There are a lot and obviously you have compartmentalized them so each has a specific function – some more obvious than others. Is there a list?

2. How about the “sections” in the outputted code? I’m not very adept at html5 yet. I understand that section is not = div but similar nonetheless. Do you have a basic document explaining how the general page structure is created? I’m quite used to the nested divs that are created in t3v2 so this is all a bit new to me.

I’d like to start using the new framework for my custom development work, but I don’t understand it well enough yet and my development time needs to stay quick, so I’m trying to learn this using test sites while I continue my production work on t3v2.

Any assistance or input is genuinely appreciated.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#482228

As more “proof” that I shouldn’t just be adding a bunch of css rules to the custom.css file, I downloaded the Mero template and installed it to my Xampp install and I see that the custom.css file in there has 1 line, which is a font styesheet import.

I started reproducing a personal website of mine. Making changes to a few things in the variables.less makes sense for some overall colors and stuff, but it really seemed like changing the custom.css was the easiest way to customize the template to look like I want the site to look. It seems that this CAN’T be right though. There must be a good reason to use the .less files for this instead, right?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#482286

Hello slavelle,

Here is user guide for T3v3 Layout System http://t3-framework.org/index.php/layout-system. Please take a look at it and make your own custom.

If you’re familiar with LESS, you can change in less file directly, if not, you can put your css change in /templates/your_default_template/css/custom.css file so that when you compile or update plugin, your change will not be affected.

Regards

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#482430

Thanks Stork, but I’m looking for some extrapolation, if you will. Some discussion about what people are doing in regards to getting the best out of the framework would be helpful. I’ve looked through the various documents available, but they address things in a bit of an abstract way, and mostly from a customization perspective rather than a “build it from scratch” one.

Again, I’ve played around a bit and I’m getting some things done, but before I start developing on T3v3 for my paying clients, I want to have a better idea of how it’s intended to be used rather than just my best guesses, which tend towards doing it the old, comfortable, t3v2 way.

Make sense? Anyone have any input on this? There must be some developers out there using this framework. How are YOU using it?

When I get a better handle on it, I plan on creating some basic usage video screencasts for others to follow. Sure would like some ideas! 🙂

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#482845

Hi slavelle,

First of all, you should read the code and understand it by yourself as you are a developer.

About less files, we have separate to multiple files but in the end they are join and compile to only 4 main files.
They are
bootstrap.less => bootstrap.css
bootstrap-responsive.less => bootstrap-responsive.css
=> Bootstrap core
template.less => template.css
template-responsive.less => template-responsive.css
=> Core template style

Those css files will be include by framework.

If you want to build another css for specfic theme (‘home’ style in T3 Blank is an example for this case)
You will need to create home.less and home-responsive.less which include some other less files.
Then you include those new css to your theme file for example in this file
tpl_t3_blanktplshome-1.php

There was no magic here. You just think about what you want to style then put all of theme in single file or separate to multiple files as your choice.

The benefit of separated to multiple files is that you can reuse those styles for other theme.

You may see there are too many files at first, but just take a closer look, you will get familiar with them and they will become your weapon. :laugh:

Regards

[Author]

Posts