LESS to CSS Not showing changes with DEV off

mwb123451

Hi,

I am working with JA Morgan for the first time. My issue is the changes I make in Development mode are not showing up in the final CSS when I perform the LESS TO CSS and turn of development. I am totally confused as to where it is making changes since there is a Local and CSS file under the template/ja_morgan folder. I did the following for this Template:

I duplicated the Template Style from the default and renamed it, then made it default.
I chose the Default Theme
I turn on development and make a change in the LESS CSS file that I see in Inspect
I perform the LESS to CSS , turn off development and then do a save.

If I look at the any of the files in local or CSS I do not see any changes.

What is the correct way I should be doing this? I have got myself confused by the Styles and Themes.

mwb123451

In addition, I have read the T3 Framework Pages such as https://www.t3-framework.org/documentation/bs3-customization#custom-css and nothing seems to line up exactly with what I have in the JA-Morgan template. I notice this is running on Joomla 4 and use T3 Framework, do things work differently than the documentation would show?

saguaros

mwb123451 Hi

You can share the super admin account of your site and tell me the changes you made, I will take a look.

mwb123451

Thank you, I have added the credentials.

saguaros

And what are the changes that you made?

mwb123451

For example,

1- The very TOP BAR (t3-topbar) of the template is normally a dark blue (#1b3060). I wanted this to be pure black (#000000).
2- I go to site templates styles, clock on my default Style (Ja-Morgan-iotran), Go to general settings, and turn on development mode.
3- In the Web inspector, I see that the CSS for the t3-topbar) is in LESS mode from the T3-assets/ folder. I edit that LESS file to the new color and upload it.
4- I clear my caches in the browser and the change works fine
5- I click the LESS to CSS, and it says it successfully updated
6- I disable the Development mode and save
7- I clear my caches on the browser, refresh, and the inspector shows I am back to CSS from the templates/ja_morgan/local folder, but the change is not present and still shows the original color. If I open that CSS file, it shows the old color.

saguaros

The problem here is that you edit the wrong file. That T3-assets helps to keep the temporary compressed LESS/CSS files only, you should not edit any files there.

If you want to play with LESS files, you should edit files in: ROOT//templates/ja_morgan/less/ folder

Let take the topbar as sample, the style of this section declared in this file:

ROOT/templates/ja_morgan/less/style.less

At approx line 153, you will find this code:

// Topbar
.t3-topbar {
  background: @topbar-bg;
  color: @topbar-color;
  font-size: @font-size-h6;
}

The variable like @topbar-bg is defined in ROOT/templates/ja_morgan/less/variables.less line 75:

@topbar-bg:		#1b3060;
@topbar-color:	rgba(255,255,255,0.5);
@topbar-height: 	40px;

you can change color for variables here.

Then compile less to css: https://www.t3-framework.org/documentation/bs3-configuration#compile-less

I hope this helps.

mwb123451

Hi,

Yes, that helps very much. I was able to make the changes there and it was compiling. I think the terminology for the folders makes you unsure if you're dealing with the t3-assets or the template folder when you are not used to T3/T4 framework. I have been using Shape 5 for several years.

I have a question while we are on the T3 subject, Is it ever possible to upgrade to T4? or is this template forever on T3 and Joomla 4?

Thanks, Michael

saguaros

mwb123451

T3 and T4 are different framework, it's not an 'upgrade' so you can migrate. If a template is built with T3 framework, you can use with T3 only and vice versa with T4's templates.