How do I "Override" the footer template?

Message Boards

Tiago Machado, modified 5 Years ago.

How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hello, I just installed the porygon theme, that btw is pretty cool... I installed it on the app manager in the portal, but how can I change the footer data? should I just hide the footer and add on my own on the portal or is there another way to do it?

thanks a lot guys!

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

One of the things you can do is create your own theme that uses the porygon theme as a parent. Then, in your custom theme, you simply provide the footer template override.

How much of the footer are you looking to change? the whole thing? or just a few bits and pieces?

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

thanks a lot for your time!

you mean using the liferay theme generator? or anything else? how to I make the theme using porygon as a parent?

if it is with the LTG I tried but I was getting an error on deploy so I deleted it.

I just wanted to change the text and margin/padding.

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

Too bad you need to change the text as well. If it was just CSS you could have just done it with a theme contributor. What I am referring to, the extension piece, is this --

https://dev.liferay.com/es/develop/tutorials/-/knowledge_base/7-1/changing-your-base-theme

... is that the thing you tried?

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

im trying to do it but after i do the gulp deploy, im getting this at eclipse console:
2019-04-11 16:18:34.993 ERROR [com.liferay.portal.kernel.deploy.auto.AutoDeployScanner][AutoDeployDir:242] Unable to write Y-theme.war

it keeps appearing after second...
how can i fix that?

thanks a lot

edit: btw it always says that after deploy:
You are running an old version of liferay-theme-tasks │
│ Run npm update liferay-theme-tasks to install newest version │
│ Current version: 1.5.0 Latest version: 8.0.7

it wont update no matter what-...

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

You're wading into waters now that are a little cloudy for me. What if you run the npm command with the -g flag? Perhaps the dependecy you need to update is in the global install not the localized one?

The unable to write war -- I have seen that message before when the file permissions for the war that is copied are not the same as the process that is running Liferay. Are you working in a Unix (Linux or OSX) environment?

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hey, thanks for the answer

Yes, i followed the turorial : https://dev.liferay.com/es/develop/tutorials/-/knowledge_base/7-1/creating-themes
Im useng the -g I got "WARN deprecated" but works.

yes Im working in ubuntu, how can I add the permission? i think that's what im missing emoticon

thanks!

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

Great, one down, one to go.

Well, the first thing you need to do is figure out which user/group is running your process. If you run this command in the shell

ps aux | grep tomcat

.. then you should get something to indicate the user. Double check the paths -- if you have more than one tomcat running you will see more than one process.

Lets assume that you have it installed in /opt/liferay and that the user that is running the process is "liferay" and they are in a group "liferay". In that case, again in the terminal, you can do this --

$&gt;sudo chown -R liferay:liferay /opt/liferay

.. and that should recurse over the directories and files setting the user/group to liferay/liferay for everything. But this is a temporary fix. The better solution is to align the user that is starting the service with the user that is performing the builds so that you don't have to change the file ownership every time you deploy. That's all assuming of course that permissions are actually the issue.

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hello, thanks for the answer, that worked fine, but now I have a new problem, I was using this command to create a theme:

[code]npm install -g generator-liferay-theme@^7.x.x

since that is only for version 6 and 7 it wont work on my 7.1:
i was using that because the command:

[code]npm install -g generator-liferay-them

was giving me the following error:

Error: EACCES: permission denied, mkdir '/usr/lib/node_modules/generator-liferay-theme/node_modules/node-sass/.node-gyp'

and that is in the usr folder so I cant change the permission, i tried using sudo su and wont work.... emoticon

any idea? thank you gor your time

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

I had a similar issue around this time last year when 7.1 was released with the Blade tools. I updated to the latest version of Blade but didnt realize that the "default version" it would generate code for was 7.1 now -- and at the time I was still on a 7.0 project.

In that case there was a version flag that was added to blade that allows you to target a specific version of the portal. I am wondering two things..

1. Which version of the npm module do you have installed?

npm -g list

1. Maybe you need to update to the latest version of the tools -- and then if you do, you will default to 7.1 anyway

npm update -g generator-liferay-theme

2. Maybe there is a version flag you can pass? I'm not sure - honestly, I usually use the Blade CLI tools

blade create -t theme my-theme

.. as for the permissions, that is odd that running as a sudo command still gives you that error. Maybe instead or using the global libraries, you could try with installing the theme generator and depencencies in the current folder?

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

hello, thanks for the answer.

its weird that the generator dont work, I have all up to date.

anyway, im going with the CLI but again... a problem xD
after using the command you told me it worked fine, theme created at wars folder of the project (even since I was in theme folder, i guess its normal).

then I went to the link you gave so i can extend the theme to override, i went to the theme folder i created, used gulp extend, said to install first so i used sudo npm install gulp, installed successfully, but when i do the gulp extend it says : no gulp file found.

any idea? emoticon

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago

after using the command you told me it worked fine, theme created at wars folder of the project (even since I was in theme folder, i guess its normal).

That is because there is a configuration (gradle) that sets where the theme modules should be generated. This way you can generate the code from whatever folder you want and the code will always be located in the configured location. In the root of your worksapce there is a gradle.properties file. In there you will find the setting

#
# Set the folder that contains classic WAR-style projects. The default value
# is "wars".
#
#liferay.workspace.wars.dir=wars

Now, I am no javascript genius. I think the issue is that the "gulp file" which is the file that contains the details for the gulp process to work is not generated when you use the blade cli to generate a theme project. If you still have the other theme you generated ypu'll see that there was a gulpfile.js. That's the file you are missing. The thing is I am not sure that would work for you anyway. By default you can choose the styled on unstyled as a base -- I remember a long time back there was a question (it might have even been me that asked it! lol) about how to chose other themes. Sadly I don't recall the response ... but maybe something about registering other themes.

I did find this post that might help you: https://stackoverflow.com/questions/45815620/liferay-7-theme-generator-setting-parent-theme-basetheme

I just generated a theem using yo on my system and looked at the gulp file. There is nothing really to it -- perhaps you can just use the gulpfile.js from your other project in your blade one? -- these are new waters for me to be honest, so I'm just guessing at this point.

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hello, I really appreciate very much your answers and your help, but this doesnt work, such a pain just to edit a footer... xD

I tried to be a little tricky, created a theme with the generator using the 7.0 and then tried to update following the liferay instructions but it gives a thow error lol

well I will just forget about this for now and focus on others things, I will keep trying and if I find a solution I will post it here.

thanks a lot man! <3

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Relly, damn. Well this is going to bug me so I'll put it on my list of things to look at. Hopefully one of us will have some success and we can use this thread to share our findings -- maybe help someone else struggling with this in the future.

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Good news, I managed to fix the issue, it was actually pretty simple xD

so, instead of using :

[code]npm install -g generator-liferay-theme

like it says in : https://dev.liferay.com/es/develop/tutorials/-/knowledge_base/7-1/creating-themes

I just removed the -g tag and it worked fine, so the code is:

[code]npm install generator-liferay-theme

after that is just following the normal steps. the problem was actually on using the -g flag and I didnt try without it first.... that was my bad.

Sorry for that.

After that I extended the theme like you told me and all is working fine, but I have one question, in my project theme folder In the src folder I have a _custom.scss that says "/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */"

but how do I know the parent theme footer property to use in the CSS?

thank you very much!

edit: How do I say whitch theme to extend? I changed to the custom theme in the portal but it changed even the nav buttons... I just want to keep the original porygon and override the footer...

thank you

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hey Tiagom

That's great news! Might be worth letting the documentation team know so that they can add a "note" in the docs to tell people to try without the global flag if they are having issues with the global flag.

After that I extended the theme like you told me and all is working fine, but I have one question, in my project theme folder In the src folder I have a _custom.scss that says "/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */"

but how do I know the parent theme footer property to use in the CSS?

.. not sure what you mean, Are you asking how to figure out which css classes you need to override to provide the styles you are after? If that is the case, then you be able to get them out of your browser with the inspector no? Also, you should be able to see all the source for the theme here: https://github.com/liferay/liferay-portal/tree/master/modules/apps/frontend-theme-porygon/frontend-theme-porygon -- maybe that will help?

edit: How do I say whitch theme to extend? I changed to the custom theme in the portal but it changed even the nav buttons... I just want to keep the original porygon and override the footer...

When you run the command to specify the parent theme, do you see it as an option? Or do you just see styled and _unstyled?

Now, one more thing to keep in mind. The way the theme hierarchy works is that you are basically providing overrides. So if you create an empty theme and then set the parent to porygon what you should end up with (after you build) is basically a copy of porygon. In your case, once you are at this point, you would create a new footer.ftl with the content you want in it.

As a matter of interest, when I look at this link here https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-theme-porygon/frontend-theme-porygon/src/templates/footer.ftl -- which I think is the existing porygon theme, I don't see any static content. I do see a reference to a navigation menu though whcih you should be able to edit.

Can you send me a screenshot of what you have (with porygon) and identify what it is you want to change?

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

thanks for the link its useful, and you are right, I forgot that I could see with inspector...
yes I can only see the styled and unstyled, thats the problem I am not extending the porygon theme... I dont have those files, I dont have a footer.ftl, etc...

print: https://ibb.co/qN02HdQ

thats part of the footer, it just has that in the right corner, nothing more... as you can see it has a lot of margin bottom, I want to remove some and I want to add some custom text in the footer

thank you

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hey Tiago,

Aw man, I can't for the life of me remember how you specify a different parent. You have to register it as an npm bundle or something like that. Not sure if this will work, but I found this article --

https://stackoverflow.com/questions/45815620/liferay-7-theme-generator-setting-parent-theme-basetheme

WORST case scenario.. you could just take all the source files from porygon and put them into your own theme and then just build that. It's not adisable if you think the parent theme is going to change often, but I don't think that is the case for you so that might actually be your best bet. Copy and Paste FTW! emoticon

Tiago Machado, modified 5 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hello, thanks for the answer!

I followed the link and tried to do that but it didnt work...

So I tried the other solution you gave me, that was a very nice thinking! but for some reason the created theme is not using the files...

What I did: created a theme, the theme appears in the project, replaced the src folder theme with the src folder theme from the original porygon theme, I went to test the result, changed the to my theme in the portal but it looks like its not using those files? I replaced the src folder so it should look exactly like the original porygon theme right?

expected result: https://ibb.co/0GDB6h2
(original porygon theme header)

what I got: https://ibb.co/ns5fBL5
(with the replaced src folder)

emoticon

Andrew Jardine, modified 5 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

Hmm -- that's odd. I went back to the link I sent you and there is one thing that I noticed. In the WEB-INF/look-and-feel.xml, the version reference on the master branch os actually 7.2.0+, and I think you are using 7.1? Try maybe doing the same thing again from this branch --

https://github.com/liferay/liferay-portal/tree/7.1.x/modules/apps/frontend-theme-porygon/frontend-theme-porygon/src/WEB-INF

.. because I am pretty sure (going from memory here) if you have a version of the theme that does not match the version of your portal, it won't actually deploy. Try that and if that doesn't work, I'll give the steps a shot on my side.

Tiago Machado, modified 4 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

Hello, thanks for the answer and sorry for the delay.

Still not working...

I get the following error when I do gulp deploy:

[13:47:52] Error in plugin 'run-sequence(plugin:deploy)'
Message:
Invalid output folder
Stack:
Error: Invalid output folder

Anyway, thanks for the help, If I manage to resolve this issue I will notify here.
Last resource I will just create a web content to fill the role as a footer and hide the porygon theme footer.

thank you for your time!

Andrew Jardine, modified 4 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Weird. Ok, I'll see if I can give this a shot in the morning and let you know if I have better luck than you.

Tiago Machado, modified 4 Years ago.

RE: How do I "Override" the footer template?

Junior Member Posts: 59 Join Date: 2/21/19 Recent Posts

thank you very much!

Andrew Jardine, modified 4 Years ago.

RE: How do I "Override" the footer template?

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts

Hi Tiago,

I was able to create a new theme and then pull the files in from the source on my side. I then used the gradlew deploy to build and push it out to the server. Once that was done I was able to see it as an option for me to select as a theme. It doesn't look exactly like the screenshots of course because I don't have any of the content in place, but the header/footer colours including the pink for the user initials and the background colours etc are all the same.

(attached)