Log in to AnswerLog in to Follow
Jake B.
16Views
3Comments
Solved
RichWidgets\Container_ExpandCollapse - custom CSS
Question
CSS
Traditional Web

Im using this element: RichWidgets\Container_ExpandCollapse. However I would like to change the styles of the default arrow, I would like to change the color and also it seems that the element has some absolute position and top margin and I would like to remove all that margins. Do you know how to achieve that? Thanks!

0
0
on 2020-12-29
Benjith Sam
mvp_badge
MVP
Solution

Hi Jake,

If you observe the Container_ExpandCollapse widget using the Browser inspect element feature or refer/open the clone of the RichWidgets module, you will observe that the arrow used in the Container_ExpandCollapse widget is simply an image. So, defining custom CSS to change the color of the arrow image tag won't work.

 Instead you can follow any of the below mentioned approaches...

  • Clone the Container_ExpandCollapse widget to the module where re-usable component are defined in your application architecture module layer, then customize/change the arrow image as per your need and use the customized widget wherever it's required.
  • Using JavaScript, you can modify the arrow image tag's src property value with the preferred image runtime path value.
  • Clone the widget to the respective module and create the expand/collapse arrows using pure CSS rules instead of using expand/collapse arrow images.


Hope this helps you!


Kind regards,

Benjith Sam

1
0
on 2020-12-29

I have the same problem, I want to customize the arrow but when I check the Container_ExpandCollapse I can't find any image to change it? 

0
0
on 2nd Feb
Benjith Sam
mvp_badge
MVP

Hi,

As mentioned in the solution, you will have to clone (referring from the RichWidgets Module) & modify the actual Container_ExpandCollapse widget implementation in your application module.


Steps to follow:

1) Select the "Open in 'RichWidgets' module" option from the Right-click option of the Container_ExpandCollapse widget as shown below

2) Open the 'RichWidgets' clone module (you will observe the actual widget implementation i.e. the expand/collapse images in clone RichWidgets module)

3) Copy the respective widget i.e. Container_ExpandCollapse Web block to your application module

4) Do the necessary code change in the cloned/copied widget as per the requirement 

5) Refer/use the same modified widget wherever it's required


Hope this helps you!


Kind regards,

Benjith Sam

0
0
on 3rd Feb
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.