.LESS, CSS and MacRabbit Espresso
-
- A step forward.
- 1
- 25%
-
- A step backward.
- 3
- 75%
-
-
- duncan12
- Rocketeer
- Posts: 50
- Thanks: 1
-
I've been a rocketeer for about 4 years now, but this might be the end of the road for me. I have always found the need to extensively edit the CSS of every site I've ever built, without exception, and RT themes have made this increasingly difficult for me.
With a "normal" Joomla theme, you can simply open up the CSS files and edit them. If you have a nifty tool like MacRabbit Espresso you can even do it all in real-time with a visual editor.
But RocketTheme has started using LESS files, which are then compiled into CSS files... so there are no CSS files for me to edit. I would have to edit LESS files instead, and there is no real-time visual editor for LESS. You must use a command-line editor, and then refresh the page to get your edits compiled into the CSS. NO THANK YOU.
So I have a choice: a) give up my real-time editor, MacRabbit Espresso, or b) give up Rocket Themes.
Am I missing the bigger picture? Or is RocketTheme just doing it wrong? -
The following users have thanked you: DBianchi
-
-
-
- Ron O.
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
I have to agree this LESS and CSS combo is killing me on the themes, especially with my K2 integration. Images are not resizing correctly due to this LESS files reading through the thirdparty-k2.....even with a custom thirdparty css file still not doing the trick.
with the LESS files now its just not working out for me as of the moment. -
The following users have thanked you: DBianchi
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
It sounds to me like edits to files maybe aren't being made in a correct manner.
There is the easy way where you just edit the file that you find the code you want to change in and then call it good.
The issue here is that your edited code is not upgrade proof. The next time you upgrade, your files will be overwritten. So, yes, you will most definitely find themes that will be coded this way and they seem easy at first, but they are not using proper override proof procedures.
Then there is the strictly css override.
This method requires you to create a custom css file in your template that Gantry will pick up.
YOUR_TEMPLATE-custom.css
Any css you find that you want to change can be placed in this file. This file will also load after the other files, so the css placed here will be what's used on the site. This is upgrade proof because your custom css file will not be replaced when you upgrade your template. This is also nice because you can keep all of your edits in one place.
Lastly, there is the LESS method.
I definitely prefer this method as I've found that with a little bit of learning, I can do much more and do it much more efficiently. This also has a great override system included so your edits can be upgrade proof. Troubleshooting is different, but it doesn't take too much looking to find what you need once you understand LESS a little better. It really is a code type that you can pick up in a day and then have fun with for quite a while.
In short, yes, edits are a little different, but they are that way by design and to provide for easier template upgrading. If you are looking to customize a site once and never upgrade or touch it again, this can seem time consuming, but if you're looking to have a managed site that is customizable and upgradeable in the future, this is definitely the way to go.
-
-
-
- Ron O.
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
hey Ben!
thanks for the input and yes I slightly agree with you, anyway as for the edits, I created a custom css already but still the images are not updating as what they are supposed to. I have a topic here that I have been following regarding custom CSS with rockettheme ( www.rockettheme.com/forum/general-discus...kettheme-k2-settings )
any suggestions and help would be greatly appreciated.
thanks
-
-
-
- duncan12
- Rocketeer
- Posts: 50
- Thanks: 1
-
Ben Lee wrote:
...Then there is the strictly css override.
This method requires you to create a custom css file in your template that Gantry will pick up.
YOUR_TEMPLATE-custom.css
Any css you find that you want to change can be placed in this file. This file will also load after the other files, so the css placed here will be what's used on the site. This is upgrade proof because your custom css file will not be replaced when you upgrade your template. This is also nice because you can keep all of your edits in one place.
It is my understanding that even this method no longer works with the latest Rocket Theme templates. - Last Edit: 10 years 8 months ago by duncan12. Reason: formatting
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
If you know the LESS file that has the code you want to change, open that file.
Copy only the code that you want to change and place it in a new file.
Save this new file as the old filename plus "-custom.less".
So, if you want to change a line in "template.less", you would create a new file named "template-custom.less".
After doing this, make sure to clear Joomla's cache and it also may be necessary to clear the LESS compiler cache which can be done from the template manager under the advanced tab.
Then make sure to refresh your browser a couple times.
-
-
-
- duncan12
- Rocketeer
- Posts: 50
- Thanks: 1
- Hi Henning. I think you've figured it out. I was under the impression that this method was no longer supported. If you read the Gantry documentation it says that it WON'T work anymore. But I tried it and you are correct. Sneaking a new CSS file into the right directory will work. Thanks!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
duncan12 wrote:
If you read the Gantry documentation it says that it WON'T work anymore.
www.gantry-framework.org/documentation/j...custom_stylesheet.md
Where did you read it's not working anymore?
As far as I can see there is nothing like that in the Gantry-docs.
-
Time to create page: 0.071 seconds