Joomla Templates Club 406,261 posts

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#190313

Hi,

To customize the look of my ja-onepage template, should I be in development mode and editing one of these files?
templatesja_onepagelessthemesmodern
template.less
variables.less
variables-custom.less

Or should I be using theme magic?

I enabled development mode.
After using theme magic it has changed variables-custom.less but the preview didn’t change.
For example the bg colour of the heading is #fff100 or yellow and it is still white.

Changing the header bg colour worked on the following themes:
default, metro, solid.
And didn’t work on the following
Modern, and retro.

Or should I be customizing css files? Like custom.css or template.css in the themes folder.

Any help or links to info would be greatly appreciated. 🙂

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

#504749

For myself, I’ve always found the best way to work on modifying CSS and the like with Joomla 3.0+ templates is to set the template to Development Mode and utilize an online web development tool like FIREBUG to identify the appropriate CSS rules/properties and test out modifications prior to committing them to my actual template.

1 user says Thank You to TomC for this useful post

1. Mark Kennedy

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#504804

Less is really useful and great for development but after changing Less file you need to compile Less to css

In case you’re not familiar with Less, you can make your change in css custom.css or template.css in the themes folder. It’s recommended to add your css customization in custom.css file since your changes will not be affected when updating template/framework. And when your site loads css file instead of less (in development mode), it will load faster.

http://t3-framework.org/documentation/customization.html#custom-css

1 user says Thank You to Saguaros for this useful post

1. Mark Kennedy

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#504814

Thanks for the replies! Very Helpful.

I am now adding my custom css to custom.css!

If I wanted to develop in less is there an equivalent custom.less file?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#504820

No, mate. Custom.css is used for css customization only, if there is a custom.less file then when you compile, it will override the custom.css file :p

1 user says Thank You to Saguaros for this useful post

1. Mark Kennedy

[Author]

Posts