Look of widgets when placed in a folder

2415
2
Jump to solution
08-27-2015 05:41 AM
TerryGustafson
Occasional Contributor II

I was curious if anyone else has had this problem.  I had developed an app in 1.1 and upgraded to 1.2.  I have a folder that contains several widgets related to each other..  It seems as though the way it works has changed since I upgraded.  The widgets used to be shown when the up or down double arrows were clicked.  Now it has a "+" or "-" to expand or contract the specific widget.  I liked the old version, how does I revert back?  Here is what it looks like now.  TIA

0 Kudos
1 Solution

Accepted Solutions
HerdisGudbrandsdottir
New Contributor III

Hi Terry,

Go to in style.css in panels/<panelname> folder of your chosen theme and search for "images/minus.png"

Above it (at least in \themes\FoldableTheme\panels\FoldablePanel) you'll see the old css:

.jimu-foldable-panel .foldable-btn{

  background-image: url(images/fold_up.png);

}

.jimu-foldable-panel .foldable-btn.folded{

  background-image: url(images/fold_down.png);

}

So all you have to do is to comment the lines in the css that are setting images of the btn's to plus/minus:

/*

.jimu-foldable-panel .jimu-widget-frame .foldable-btn{

  background-image: url(images/minus.png);

}

.jimu-foldable-panel .jimu-widget-frame .foldable-btn.folded{

  background-image: url(images/plus.png);

}

*/

If your panels style.css does not look like above then do a text search for 'minus.png' and 'plus.png' in the panels style.css to know where to replace them.

Also for some themes only plus/mines png's are in the panels images folder - for those you'd have to copy/paste the double arrow .png's into the folder.

View solution in original post

2 Replies
HerdisGudbrandsdottir
New Contributor III

Hi Terry,

Go to in style.css in panels/<panelname> folder of your chosen theme and search for "images/minus.png"

Above it (at least in \themes\FoldableTheme\panels\FoldablePanel) you'll see the old css:

.jimu-foldable-panel .foldable-btn{

  background-image: url(images/fold_up.png);

}

.jimu-foldable-panel .foldable-btn.folded{

  background-image: url(images/fold_down.png);

}

So all you have to do is to comment the lines in the css that are setting images of the btn's to plus/minus:

/*

.jimu-foldable-panel .jimu-widget-frame .foldable-btn{

  background-image: url(images/minus.png);

}

.jimu-foldable-panel .jimu-widget-frame .foldable-btn.folded{

  background-image: url(images/plus.png);

}

*/

If your panels style.css does not look like above then do a text search for 'minus.png' and 'plus.png' in the panels style.css to know where to replace them.

Also for some themes only plus/mines png's are in the panels images folder - for those you'd have to copy/paste the double arrow .png's into the folder.

View solution in original post

TerryGustafson
Occasional Contributor II

Sweet, thank you very much!!