Solved Templates

template.css messed up

Asked by Robert 5 years ago Last activity 5 years ago

Hi,

I just installed a new full package Joomla 3.10. After installing the template helixultimate_template_v2.0.0.zip
I noticed the template.css was messed up like this:
@charset "UTF-8";
:root{--header_height: $header_height}body{text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.helix-ultimate-preloader{overflow:hidden}body.helix-ultimate-preloader:before{content:" ";position:fixed;top:0;left:0;width:100%;height:100%;z-index:99998;background:rgba(255, 255, 255, 0.9)}body.helix-ultimate-preloader:after{content:"";font-family:"FontAwesome";font-size:36px;position:fixed;top:50%;left:50%;margin-top:-24px;margin-left:-24px;width:48px;height:48px;line-break:48px;text-align:center;color:#007bff;-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear;z-index:99999}a{transition:color 400ms, background-color

How can this be done in the "normal" or "old"way like for instance this:
/**

@package Helix Ultimate Framework
@author JoomShaper https://www.joomshaper.com
@copyright Copyright (c) 2010 - 2018 JoomShaper
@license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/
:root {
--link-color: #333;
--text-color: #000;
}
body {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.helix-ultimate-preloader {
overflow: hidden;
}
body.helix-ultimate-preloader:before {
content: " ";

Accepted answer

Marked as the solution

Muntasir Sakib Staff

5 years ago

Hello Robert,

You can create a complete new website using the framework just by using the front-end and back-end editor. Changing the template.css file is not necessary in such case. However, if you want to use custom CSS, I have already told you the method which is even more organized than ever, more user-friendly you can say.

Most importantly, editing template.css is no way recommended from us as after every update, it will be gone.

So, it's even easier now to create your own site with zero coding knowledge.

I hope you can understand.

Thanks!

6 more replies

Muntasir Sakib Staff

5 years ago

Hello there,

Do you want to use custom code in your template?

If yes, please do not change anything in template.css file. Go to template > shaper_helixultimate > css and then create a folder named custom. The folder name has to be custom, not to mention.

Then create the file as like as you want and it should work perfectly.

Check from your end and let us know if it works fine.

Thanks!

Robert Asked this

5 years ago

Thanks Muntasir Sakib,

Yes, I do use some custom-code (which is working fine), but only a few. To realize this I do need to know some information about the original code however, f.i. the width and/or height of the logo on a tablet or mobile phone, margins e.o.. Normaly you can see those in the template.css. At the moment this css-file is hardly to read....

Thanks so far.

Muntasir Sakib Staff

5 years ago

Hello there,

You can see those using inspect element as well. However, you can see the basic settings from the front-end as well.

Thanks!

Robert Asked this

5 years ago

Hi,

This means in fact you have to build an almost complete new template.css-file to style your own template. This also means you have to be a more than experiencd programmer instead of a amateur-template-builder-lover-none-programmer like me...

It used to be so much easier.....

Robert Asked this

5 years ago

Hi Muntasir Sakib,

Thanks for the reply, guess you're absolutely right... I have to get used to another way of working with it.
Have to learn a little more coding .... guess that will work. Anyhow great there is SP Pagebuilder... working fine.

Thanks so far!

Muntasir Sakib Staff

5 years ago

Hello Robert,

You are always welcome.

Please close the post by accepting the most suitable answer so that others can find the solution easily as well.

Have a nice day!