T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Thomas
  2. General Discussion
  3. Tuesday, 03 June 2014
  4.  Subscribe via email
Hi
I asked this question before but didn't got an answer I could work with. I'm really used to work with the "old" T3 Frameworks CSS. I'm using the developement tools of google chrome to find the corresponding css file and the corresponding line of whatever it is I want to change.

I really like the idea of LESS but I'm really new to it as well. I know how to find the corresponding LESS file in the new T3 Framework, but I'm really struggeling to find the correct line/value that I have to change.

On this page (http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/) the guy talks about css source maps and how it would work really awesome with LESS. Is there something like that with the T3 Framework?

Am I doing something wrong? How am I supposed to work with LESS in the T3 Framework? Is there any tutorial on how to do this?

Thanks for taking the time to answer my questions.

mitti
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Could you please provide info of t3 framework version?

Normally, you have to turn dev mode on so that your site will load .less file and at that time you can see where to change.

Please check the attached image.

If you still have trouble, please send us your site url and turn off dev mode.

Gardner.
Attachments (1)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi. Thanks for your answer

I have developement mode turned on on see the LESS file. Thats what I meant with:
I know how to find the corresponding LESS file in the new T3 Framework


I try to explain my problem with an example:

I installed Joomla 3.3 with the T3 BS3 Framework 2.14 and the 2.21 pluging. Let's say I want to change the background color from the "HOME" menu item from light gray (as it is right now) to a bright red.
In Google developement mode I get following information: the background-color of .navbar-default .navbar-nav > .active > a is #e7e7e7 and the corresponding setting is in navbar.less in my template (as seen in the attachement). I find following line:
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;


That leads me to the variables.less file where I search for:@navbar-default-bg. There I find following:
/ Navbar
// -------------------------

// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);

@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;

// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;


The base Navbar color appears to be #f8f8f8 but is darend by 6.5% when active as seen in @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
Instead of the darken I write #F00 and there it is: a red background.

That is awefully complicated. Before, with css, the debug tool showed me the file and the corresponding line. That made custumizing really simple and fast. With less I might be more versatile but I is really complicated. The link I posted in my initial question would let me know the corresponding line in the LESS file.

So my question is now: Is it really THAT complicated or am I doing something wrong? If that is the way I have to work now with the T3 Framework I probably have to switch to another framework.

Thanks for your help
mitti
Attachments (1)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.