Joomla Templates Club 406,261 posts

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#198259

Hi Guys/Girls.

Sorry this might be a silly question, but how do you edit the css with this less thing overwriting everything?

I am used to use firebug and make changes to the template.css file, but here things seem to work a bit different. I am lost
and not loving it. Can someone please give me simple directions to how to do template overrides on this template?

I want to change the height of the header and it works by editing the relevant less file that firebug refers me to, till i press that less to css button in the template manager, then we are back to square one. What is the big deal with the Less thing? Maybe if I understand it, I might start liking it.

Also, on the contact form, it ads the standard joomla icons next to the phone number. With css I can set display: none(if I can get the right way to edit the right file). There are also some other icons next to address and phone, they are really nice, but how do I change/add them. I want a fax icon next to the fax number for instance.

Any help would be much appreciated.

Kind Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#536996

It’s actually very easy …. all you need do is create a new file called “custom.css” within file path –>
/templates/ja_sugite/css . . . . and put your custom/modified CSS rules within it.

For more information —> CLICK HERE

1 user says Thank You to TomC for this useful post

1. northis

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#536997

Thanks TomC.

You are always there to get me going, thanx. Gona try that.

Any idea on how to add that fax icon on the contact form, it seems to be some font awesome icon by what I read on the forums.

Thanx again.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#536998

<em>@northis 429675 wrote:</em><blockquote>Thanks TomC.

You are always there to get me going, thanx. Gona try that.

Any idea on how to add that fax icon on the contact form, it seems to be some font awesome icon by what I read on the forums.

Thanx again.</blockquote>

Hmmm, not certain on that one … but I’ll forward the question onto one of my Support Team colleagues for follow-up for ya.

😎

1 user says Thank You to TomC for this useful post

1. northis

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#536999

Awesome, I can style away!!!:D

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#537034

How does one do module overrides? To modify the JA-slideshowlite, the correct css file is already in the correct css folder under under the correct template theme, but the changes have no effect?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#537074

<em>@northis 429728 wrote:</em><blockquote>How does one do module overrides? To modify the JA-slideshowlite, the correct css file is already in the correct css folder under under the correct template theme, but the changes have no effect?</blockquote>

You can send me the css style you want to change and URL of your site. I will help you check further.

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#537132

Thanx for your reply Ninja.

I am working on mamp still.

The problem seems to be with less. Tom pointed me in the direction to add a custom.css file in my template/css directory. That works great for the template. This is also where one will put a copy of the {module}.css to do module overrides, and they are there already for slideshowlite, but less overrites them so the changes does not take effect. I believe this will be the case for all module overrides.

How do I create a module (css) override with this less thing going on? Or can one turn less off and later recompile everything? I am not sure how to work with/around less and it is very frustrating by now.

Thnx

[northis Friend northisJoin date: April 2014Posts: 27Downloads:28Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#537146

Okay, think I figured this out after a lot of reading on the t3 blank framework which has a different file structure.

In root/templates/ja_sugite/ is the css folder that I would add my css changes to ordinarily. But there is also a less folder…

If I edit the appropriate less files and press that mysterious LESS to CSS button in template config, things get added to css files in the css folder. Now it makes a whole lot of sense and suddenly I am not so frustrated anymore!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#537197

If you want to work with LESS file, you have to override it directly from LESS files within JA Sugite template, however it will be overriden when you upgrade JA Sugite template.

Please consider to add customisation via custom.css file to store your changes in case of template update later on.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#537242

<em>@Ninja Lead 429933 wrote:</em><blockquote>If you want to work with LESS file, you have to override it directly from LESS files within JA Sugite template, however it will be overriden when you upgrade JA Sugite template.

Please consider to add customisation via custom.css file to store your changes in case of template update later on.</blockquote>

Saaaaaaay … isn’t that what I originally suggested in Post #2 above ???

---

Attachments:

1. 

[Author]

Posts