Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

adding a custom.css file

Featured Lock Resolved Issue
I am using the Optima template on Joomla 3.2 with Helix II version 2.1.3

The default template manager settings in Advanced tab have LESS enabled and there is no custom.css file to make style changes that are not lost in a template update.

I created a custom.css file in .../templates/shaper_optima/css and added some style change code but they did not work, however when I add the same style change code directly into the bottom of the ..../templates/shaper_optima/css/template.css the changes were made correctly.

I am concerned I may lose the changes I have made during a future version update of the template, what is the correct process to make style changes in Optima with Helix II framework to avoid losing them in future updates?

11 Answers

Kawshar Ahmed - Senior Staff

More than a month ago #Permalink
I have the same problem with Venus template. Although there is custom.css file, but it's placed above template.css file in head tag. That is why template.css styles has highest rank in hierarchy.

I think custom.css should be place below template.css. For now I will change it by myself, but there should me an upgare to fix this.

Ehsan Riyadh

More than a month ago #Permalink
Create custom.less file on less folder and @import it master.less file.

Rock

More than a month ago #Permalink
Riyadh, I have followed the above instructions and created the custom.css file inside of less folder. Where do I reference the page and How to get there. I have been reading tones of stuff on this forum and feel like getting closer. I just want to customize css. By the way, the above statement says "Create custom.less file on less folder and @import it master.less file. ", I got confused on the @import it master.less ... can u alaborate? Thanks.

Nayem Majhar - Staff

More than a month ago #Permalink
Hi,
First create a less file inside the less folder, like (custom.less), then open master.less file and add this code at the bottom :

@import 'custom.less';

Vaggelis

More than a month ago #Permalink
Hello,
I am facing some issue too. I have uploaded the custom.css in /public_html/templates/shaper_helix3/css in order to see 2 CSS changes, but it is not working. Also, if I modify the Presets in Style's options, it is not working again. I have NOT enabled LESS and ANY Compressions.

If I add the changes at the Custom Code TAB, in Style options, it is working.

How can I eneable the custom.css please?

Paul Frankowski - Staff

More than a month ago #Permalink
Yes, I am pretty sure that you forgot close } or missing dot or not completed class structure
---
Q: have you ever used this tool

Attachments (1)

  • inspect-tool-browser.jpg
    inspect-tool-browser.jpg 261.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
BTW
Sometimes you should:
1) Test your code online with Inspector tool (built-in in any modern browser)
2) Then add into custom CSS field to make sure that is right
3) Then copy it into custom.css file
---
Believe me even I done it many times ;)
---
(!) Clear browser cache!

Vaggelis

More than a month ago #Permalink
Hello Paul,
I work always with Inspector, both in Firefox and Chrome. Also, I wrote that the same code is working in the Custom Code TAB, in Style options, where it is working.

I have entered two lines.

.sp-megamenu-parent >li >a {
display: inline-block;
padding: 0 15px;
line-height: 90px;
font-size: 16px !important;
text-transform: uppercase;
letter-spacing: 1px;
color: #000;
}

.post-format {
background: #08b916;
}

Paul Frankowski - Staff

More than a month ago #Permalink
we talk about Helix II or Helix3 this time?

Vaggelis

More than a month ago #Permalink
Helix3 please.

Paul Frankowski - Staff

More than a month ago #Permalink
if your custom.css file is inside /css/ folder it should be loaded
---
check also its file rights -- 644 in most cases


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 135
Sifat

Sifat

Total Accepted Answers: 132
Toufiq

Toufiq

Total Accepted Answers: 44
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 7
D

David2376

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us