Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Small icons for custom form-elements

Vote:
 

Hi,

I created some custom form-elements and I whant to set the small icon shown in the form-element listings in Edit-mode. According to the documentation the icons are sett using the css class ".epi-forms-icon.epi-forms-icon--small.epi-forms-*****__icon", where ***** is the name of the element.

Link to documentation: https://world.episerver.com/documentation/developer-guides/forms/creating-form-element-with-validator/

Now to the problem, where do I put the CSS file? I now use module.config in root using "epi-cms.widgets.base" to locate my css file, but this feels like a hack. Is this the way to go or is there another solution to this problem?

Another thing: ".epi-forms-icon.epi-forms-icon--small.epi-forms-mycustomelementblock__icon" only sets style for the small icon in the selection menu not the small icon in the row of elements in selected form elements. See Image below

#210464
Nov 25, 2019 10:19
Vote:
 

Have you tried copying this full css? (On this link)

.epi-forms-icon{display:inline-block;vertical-align:middle}.epi-forms-icon.epi-forms-icon--small{height:16px;width:16px}.epi-forms-icon.epi-forms-icon--small.epi-forms-datetimeelementblock__icon{background:url(images/formIcons16x16.png) 0px 0px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-recaptchaelementblock__icon{background:url(images/formIcons16x16.png) 0px -16px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-addresseselementblock__icon{background:url(images/formIcons16x16.png) 0px -48px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-datetimerangeelementblock__icon{background:url(images/formIcons16x16.png) 0px -64px no-repeat}

After applying these changes make sure that browser is refreshed properly. Because sometimes it get cached. So you can inspect into browser and see if you css file has changes that you did.

And, the hack you are talking about is the way Epi provides to override the styling of built in components.

#210478
Nov 25, 2019 11:55
Vote:
 

No, that dosen't work for me. My class for recaptcha is "RecaptchElementBlock" (the same as the name of the element class) not "epi-forms-recaptchaelementblock__icon" and none of the classes are close to the classes needed to make the icon appere in "Formulärets delar" (see Image).

Ok, so all files needed to change EPi apperence need to be referenced in module.config in root or in a module.config in modules. You cant define a module.config in youre own solution-tree outside of modules?

/Jesper

#210519
Nov 26, 2019 15:19
Vote:
 

Hi,

I'm looking for a solution regarding the same issue, want to be able to define my own icon.
Jesper, have you found a solution on your own?

//Carl

#210810
Dec 06, 2019 10:41
Jesper.Ahne - Feb 19, 2020 11:48
Hi, wrote my solution below
Vote:
 

Sorry for the really late reply Carl,

I solved this by first adding the ContentIcon annotation to my custom ElementBlock class. EPi server will now add a class to the icon with the name set in the annotation.

I then added a CSS filepath in module.config located in the root of the application and added the CSS below. This will make EPiServer load the css to the Edit view.

ElementBlock class:

[ContentIcon("CustomElementBlock16x16")]
public class FormUsageLimiterElementBlock : InputElementBlockBase, IElementRequireClientResources

modile.config:

<?xml version="1.0" encoding="utf-8"?>
  <module>
    <clientResources>
      <add name="epi-cms.widgets.base" path="../Business/EpiFormsCustom/ClientResources/Styles.css" resourceType="Style" />
    </clientResources>
   <dojoModules>
      <add name="thunderstruck" path="Scripts" />
    </dojoModules>
</module>

CSS:

.epi-forms-icon {

  display: inline-block;
  vertical-align: middle;

}

.epi-forms-icon.epi-forms-icon--small, .dijitTreeIcon {

  height: 16px;
  width: 16px;

}

.epi-forms-icon.epi-forms-icon--small.CustomElementBlock16x16, .dijitTreeIcon.CustomElementBlock16x16 {
  background: url(CustomElementBlock16x16.png) no-repeat;
}

#217211
Feb 19, 2020 11:48
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.