1. kbloem
  2. Support
  3. Thursday, July 07 2022, 11:57 AM
Hi, i am trying to play around with CSS. For instance, i would like to change the layout of the profile tabs.

So far i found two files in \components\com_jsn\assets\css

  • tabs.css
  • tabs.min.css


changes in tabs.css are not visible on the front page. The inspector in Chrome points to tabs.min.css but that is a nightmare to edit since there are no linebreaks.

What is the best way to approach this?
kbloem Accepted Answer
Pro
Anyone?
  1. more than a month ago
  2. Support
  3. # 1
admin Accepted Answer
Admin
Hi,
sorry for this very late reply....the best way to change the layout is to add a CSS code that override the default code from tabs.min.css directly in your template. Using template is the correct way to manage the layout because the file tabs.min.css will be overwritten every update.

Anyway tabs.min.css contain same code of tabs.css, but it is minimized to improve performance....if you want to edit tabs.min.css then you can follow these steps:
- delete file tabs.min.css
- copy file from tabs.css to tabs.min.css
- edit the new file

Can you please try to explain me your needs? so I can send you an example code....for example, change background, add border, change fonts or text size, add a hover effect.....
  1. more than a month ago
  2. Support
  3. # 2
kbloem Accepted Answer
Pro
Sorry i am on holiday but i am very glad to read this answer.

What i am looking for is a change of the profile page tabs to something in the example. So a profile contains 4 seperate pages on my site and i am looking for the effect of colored tabs. If i know how to change the css i can get a long way.

In the example you get an idea. Only not on the side like in the picture but the tabs on top.
  1. more than a month ago
  2. Support
  3. # 3
  • Page :
  • 1


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