nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

WebStudio and custom CSS/Javascript

deas0815

Hallo everybody,

the components shipping with WebStudio (from labs 3 stable) render quite nice in WebStudio. But OOTB, the HTML rendered can not be what
"you would expect" on virtual tomcat and "other environments". The include component for example renders Javascript/AJAX calls which when using the defaults
(templates etc) don't render the HTML as the global javascript provided by webstudio is not available.

What is the general suggested approach to integrate global/page/template scoped javascript/CSS that works in webstudio and "standalone" and makes sure it
does not interfere with CSS/Javascript provided by webstudio ?

cheers
Andreas

Find more posts tagged with

Comments

nitis

Hi deas,

long time ago from your post but I have the same question and maybe you have already answer it after the time, if it is please tell me 😄

Thanks.

deas0815

Well, I became careful - especially when components use javascript which is provided in the studio
environment.

If your components use yui or jquery for example - I would make sure to use the same version studio provides.

In the freemarker templates within the head element - I use conditions to include javascript depending
on the environment (studio or standalone).

regards
Andreas

nitis

Hi,

Thanks for your fast reply, I will tke care with this, and now I am having a new question which is how to link the CSS to the html components, because I tried but i couldn't do it.

I am thinking that maybe usin the head file, Do you know if it is correct??

Thanks a lot !!

deas0815

view.get.head.ftl renders to the head area of the page - but only if the component appears on the page.

I've included the CSS direcly in the freemarker templates of the page template (dynamic.ftl) so its
always there - no matter which components render.

regards
Andreas

nitis

Ok Andreas, thank so much, I will try it later and I tell you.

cheers. XD

nitis

Hi again Andreas,

I am testing what you told me and its working with the CSS and Javascript… but I have 2 new questions:

1. The typical url to link a CSS file using ${url.context}/css/… , for example, is not working because it is using the virtual server and it needs some url like this: /studio/proxy/alfresco/avmstore/get/s/age–admin/w/ROOT/css/… but how can I get this url dinamically?? or how it works??

2. When I drop some new custom component WITH CSS to a region of the template, I can see it properly, but I lose the options of the region, I mean after that I cannot click the region to edit, view standalone or remove the component, why it is happening??

Thank you very much for you help Andreas.

nitis

Both problems fixed…

Solutions:

1. Including the styles in the ftl file.

2. Defining the webscript for the edition of your new custom component. edit.get.* and edit.post* files.

Thanks anyway!! 😄

muralie39

hi,

i am struck up with webstudio.(basicaly the draging is not working - it is throwing some error failed to execute the image )

how to create new custom page.can you give any suggestions how to work on webstudio and create custum pages

Thanks,
Murali