Public Forums 71,145 posts

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1062957

I would like to change the horizontal padding for navs on the navbar, so that I have smaller padding on medium screen sizes.

In my variables.less file, I have this:

@nav-link-padding: 10px 30px; 
@nav-link-padding-md: 10px 18px; 

In my navigation.less file, I have this:

 .nav {

> li > .separator { 

// between 992 & 1199px 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { 
          padding: @nav-link-padding-md;  
          display: inline-block; 
}

//greater than or equal to 1200px
@media (min-width: @screen-lg-min) {
          padding: @nav-link-padding;
          display: inline-block;
}
}
}

It is not working. I also tried the same less rules in the

li > span {}
section of the navigation.less file.

The 30px designation for @nav-link-padding: works properly. If I change the 30px to 24px or any other value, I can then see the smaller padding on my navbar. But it stays at the @nav-link-padding: value on both lg and md screens. My goal is smaller padding on md screens.

The @nav-link-padding-md: specification and the related rule in navigation.less
do not work.

Can anyone tell me why it doesn’t work, or what I need to do differently?

Thx!

http://www.2avoters.org
I am making all my less edits to files within a local folder.

• This topic was modified 7 years, 2 months ago by  dsinor.
• This topic was modified 7 years, 2 months ago by  dsinor.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1062993

Hi
I suggest you to use custom.css file to override the style code.
Add a new file with name custom.css in css folder and override the code.
Use firebug to check the style classes: http://prntscr.com/gnaq8s

Regards

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1063179

Thanks for your reply.

I am not using a custom.css file. I prefer the local folder with customized less files.

What I really need is the ability to track styles back to the source less.

Chrome inspector will do that if a less source map is available.

The see a source map option in less.php. It is set to ‘false’.

If I set it to ‘true’, does the code generate appropriate basepath, writeto, and url values, or do I need to specify these myself?

Are any other T3 steps necessary to generate a sourcemap that can be identified and followed by chrome inspector?

I looked at the less.js file as well, but I do not recognize any map-enable features there.

I am curious: does the T3 less compiler utilize only the less.php file, or only the less.js file, or both?

I am becoming fairly proficient with T3, but as I learn more, it is increasingly apparent that the primary flaw of a less-based system can be the inability to track styles back to source less files. This flaw only occurs in less-based systems that disallow less source maps.

I am not familiar with joomla-monster EF4 framework, but I discovered today that enabling less source maps is a standard feature of that framework. I also noticed that EF4 looks similar to T3.

Bottom line – it would be great if you could summarize the essential steps for enabling T3 less source mapping so that I can get this running in a manner compatible with chrome inspector.

Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1063223

Hi
I am not entirely sure to abut your question because When you disable development mode it runs on css file.
And if you are not familiar with Less file, you have to use custom.css that will not be updated on template update.
Using chrome inspect element you can get the style code class and all the less file are coming from the less folder of the template.
Either you can apply the changes in the less file or via custom.css file.

Regards

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1063247

See plugins/system/t3/includes/lessphp/less/less.php. Line 31.

The less compiler has a built-in source map generator.

It is disabled in T3.

When source map is enabled, google devtools Inspector will point to less files, not css files. This makes customization much simpler. No custom.css file required. Just edit less file.

This solves the primary problem of not knowing which less file is the source of a client-side css rule.

Can JA provide documentation or support for enabling the built-in source map feature?

Thanks.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1063254

Hi
There is no such documentation as it core custom changes you want to apply.
We do not suggest to customise the core of T3. In T3 options we provided the option to turn ON/OFF development mode.
If you want to change style from less files you can open less folder in the template and customise it.
Or custom.css is best way to apply changes.

Regards

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1063256

Hi, thank you for your reply.

It is poop.

Two scenarios:

Scenario 1 – browser css inspector is not a useful tool for customizing T3 site because inspector points at client-side css files, but there is no path to server-side less source file.

Scenario 2 – browser css inspector is a useful tool for customizing T3 site because inspector uses source map to point at server-side source less file, allowing simple edit of proper less file.

The source map capability is built into the less compiler by the original author. JA loads the open source less compiler and then disables the source map function.

I enable the source map function, then compile less to css, then T3 freezes.

Maybe you should give the world a simple method and steps for enabling the most valuable feature of the less compiler in T3.

Just sayin is all.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1063261

Hi
I already explain both ways to customise the files, in case you want to edit the less files it’s in the less folder,
While we do not suggest to edit the core file.
In T3 there is an option to enable disable development mode. On each template update, Less files need to update to get bug fixes and improved code.
While if you want to customise T3 you can customise it but make sure it will create issue on working if wrong work has been done, It something that needs developer work to customise a framework.

Regards

[Author]

Posts