Hi there
I'm working with T3 for a while but I just started with the new version which ist working with LESS: I'm not familiar at all with less and so far it is quite confusing. I'm used to check my browsers (Chrome atm) debugging tool to see where a certain css setting is located. With LESS I'm unable to find the exact location of a setting in the less file and because of that I just have to search for everything.
I found this website (http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/) which explains, how to debug less with chrome. But it requires a css source map. Is it possible to get that working with the current version of the T3 Framwork?
Or am I doing something completely wrong? How else should I'll be working with LESS
Thanks for your answer
mitti2000
T3 Community Discussion & Support
Let's build the best free Joomla template framework, together!
-
Thomas
- General Discussion
- Sunday, 15 December 2013
- Subscribe via email
Comment
There are no comments made yet.
Accepted Answer
Pending Moderation
Hi, thanks for your post but it is not answering my question at all. Of course I know how to find the corresponding less file. But now how to find the corresponding setting.
I'll give you an example. I'm trying to change the background of the active item in my t3 menu. Here is what the debugging tool is telling me:
Here is the corresponding navigation.less file located in my theme folder:
As you can see, I already tried to set it to transparent but without success. What I'd like to see is, that in the dubugging tool of my browser it shows me the corresponding .less file and the line in that file the setting is corresponding to.
I'm hope I made myself a bit more understanable
Thanks
mitti2000
I'll give you an example. I'm trying to change the background of the active item in my t3 menu. Here is what the debugging tool is telling me:
.t3-mainnav .navbar .nav > .active > a, .t3-mainnav .navbar .nav > .active > a:hover, .t3-mainnav .navbar .nav > .active > a:focus {
color: #eee;
text-shadow: none;
background-color: #008ada;
background-image: -moz-linear-gradient(top,#0097ee,#07b);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#0097ee),to(#07b));
background-image: -webkit-linear-gradient(top,#0097ee,#07b);
background-image: -o-linear-gradient(top,#0097ee,#07b);
background-image: linear-gradient(to bottom,#0097ee,#07b);
background-repeat: repeat-x;
filter: progid
XImageTransform.Microsoft.gradient(startColorstr='#ff0097ed', endColorstr='#ff0077bb', GradientType=0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: none;
}Here is the corresponding navigation.less file located in my theme folder:
// -------------------------------------------------------
// JA MAIN MENU
// -------------------------------------------------------
.t3-mainnav {
background-color: @transparent;
background: @transparent;
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid darken(@navbarBackground, 10%);
}
.navbar {
color: @navbarText;
margin-bottom: 0;
margin-top: 0;
}
.navbar-inner {
min-height: @navbarHeight;
padding: 0;
background: transparent;
border: 0;
border-left: 1px solid darken(@navbarBackground, 5%);
.border-radius(0);
.box-shadow(none);
.reset-filter();
}
// NAVBAR
// -------------------------------------------------------
.navbar .nav {
margin: 0;
}
// Links
// -----
.navbar .nav > li > a {
border-top: 0;
border-right: 1px solid darken(@navbarBackground, 5%);
padding: ((@navbarHeight - @T3globalPadding) / 2) @T3globalPadding;
text-shadow: none;
}
// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: @transparent;
text-shadow: none;
outline: none;
}
// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: @transparent;
text-shadow: none;
background-color: @transparent;
.box-shadow (none);
outline: none;
}As you can see, I already tried to set it to transparent but without success. What I'd like to see is, that in the dubugging tool of my browser it shows me the corresponding .less file and the line in that file the setting is corresponding to.
I'm hope I made myself a bit more understanable
Thanks
mitti2000
- Page :
- 1
There are no replies made for this post yet.
However, you are not allowed to reply to this post.
However, you are not allowed to reply to this post.