How to change style of Fileupload pop-up window ?

[Former Member]

Hello Experts!

I want to change the look and layout of the batchload pop-up window (add some padding, margin etc.)

OOTB pop-up window :

I know that I can create custom template and call Fileupload.setTemplate(). I'm wondering if there is another solution for this. Does hybris overwrites somehow OOTB zul file (original fileuploaddlg.zul) ? Is there any css file in hybris which I can overwrite ?

Thanks Andrzej

[arvind-kumar_avinash]

Does hybris overwrites somehow OOTB zul file (original fileuploaddlg.zul) ?

You can overwrite any of the file using ant customze. The definition of customize target is:

 Copies all files from '/config/customize' folder to '/bin' folder recursively

You need to place your custom file under '/config/customize' folder in the original folder structure i.e. if you want to overwrite /bin/x/y/z/abc.txt, you need to put your customized abc.txt as /config/customize/x/y/z/abc.txt and then execute ant customize.

[Former Member]

Hi ,

Thank you for your response. Yes, it's just a matter of styling. My popup is a part of widget so I decided to use your second advise. I created somewidget.css file. It's almost working but I still got some doubts. I'll use color as example.

If I'll put below code into my somewidget.css file all buttons will be green (also those in popup) :

 .z-button {
     background: #00ff00;
 }

This is default OOTB fileuploaddlg.zul file :

 <?xml version="1.0" encoding="UTF-8"?>
 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
 <?page language="xul/html"?>
 <?component name="uploaddlg" extends="window"
  class="org.zkoss.zul.impl.FileuploadDlg" widgetClass="zul.fud.FileuploadDlg"?>
 <?component name="submit" extends="button" widgetClass="zul.fud.Submit"?>
 
 <uploaddlg title="${arg.title}" uploadListener="${arg.listener}" shadow="false" border="normal" width="360px" closable="true"
 xmlns:w="http://www.zkoss.org/2005/zk/client"
     w:onClose="this.cancel()" w:max="${arg.max}">
     <label value="${arg.message}"/>
     <fileupload id="fileupload" forward="onUpload=" label="${c:l('mesg:org.zkoss.zul.mesg.MZul:UPLOAD_BROWSE')}"
         upload="zul.fud.ModalFileViewer,maxsize=${arg.maxsize}${arg['accept'] != null ? c:cat(',accept=', arg['accept']) :''}${arg['native'] ? ',native':''}"/>
     <separator bar="true"/>
     <div id="uploaded" visible="false"></div>
     <div id="btns">
     <submit id="submit" label="${c:l('mesg:org.zkoss.zul.mesg.MZul:UPLOAD_SUBMIT')}"
         w:onClick="this.submit()"/>
     <button label="${c:l('mesg:org.zkoss.zul.mesg.MZul:UPLOAD_CANCEL')}" w:onClick="this.$o().cancel(true)"/>
     </div>
 </uploaddlg>

My questions :

1. What if I only want to change color of buttons placed in uploaddlg component ?

2. What if I only want to change color of buttons placed in div with id="btns" ?

   This will be too general : .z-div > .z-button { background: #00ff00; }

3. What if I only want to change color of button with id="submit" ?

   I tried : #submit { background: #00ff00; } ,but it's not working.

Thanks Andrzej

[former_member625836]

Hi ,

Can't you set a sclass on uploaddlg and use it in css selector?

Cheers, Jacek

[Former Member]

Hi ,

I want to avoid creating my custom zul file. Why I can't refer to element using id or name ?

[former_member625836]

Hi ,

Isn't it just a matter of styling? Can't you just create your custom scss file and define a style there?

1. Create a file yourextension/backoffice/resources/cng/css/yourextension_common.scss (it has to be this way - such files are loaded by convention) and it will be automatically compiled to css during ant build call and loaded during system startup. I would suggest using this file to import styles from yourextension/backoffice/resources/cng/scss/components path (you can use relative paths in those imports here) - still it is just a suggestion, not requirement.

2. If your upload popup is a part of a widget, you can put you scss file next to definition.xml of your widget in yourextension\backoffice\resources\widgets's subfolder and call it same like last element of widget's id (e.g. in yourextension\backoffice\resources\widgets\somewidget\somewidget.scssfor widget with id com.company.commerce.widgets.somewidget)

Cheers, Jacek