[Shared Folders - List View]

Is there any way of getting the shared folder widget to display in a list view rather than grid?

[Shared Folders]

Been having a play with this and thought I'd add what I had managed to do to style up the widget

<style>
.widget_sharedfolders .content-wrapper:before {
    content:"Useful Downloads";
    height:30px;
    background: rgb(180,227,145); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(180,227,145,1) 0%, rgba(33,127,12,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(180,227,145,1) 0%,rgba(33,127,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(180,227,145,1) 0%,rgba(33,127,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#217f0c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    display:block;
    width:100%;
    padding:10px;
    font-weight:bold;
    color:black;
    text-align:center;
    font-size:32px;
    font-family:"Arial";
}
</style>

<style>
.widget_sharedfolders .resources-container {
    background: #eeeeee; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>

First I used http://www.colorzilla.com/gradient-editor/ to make some gradients and used them as my background colour for the top bar. I then added a little to Grahams css by adding in the 'color:black;' to change the colour of the font, aligned the text in the center, changed the font size and family.

I then found that the inside of the box is .resources-container so changed the background of that to make it stand out a little more.

I've attached an image of the one that this creates. Not the one I went with but not a bad first attempt.

[Style sheets inside image properties]

I have just tried it and had no problems. Bit below did have to be in it's own html widget though. I have attached an image that it definitely works on.

<style>
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>

 

[Style sheets inside image properties]

Been playing with this and here is what I've had some success with so far

<style>
.grow:hover{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}</style>

The above will scale/zoom the image by adding 'grow' to the image css stylesheet.

<style>
  .shrink:hover{
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
</style>

The above will shrink the image by adding 'shrink' to the image css stylesheet

<style>
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
</style>

The above will tilt the image by 10 degrees by adding 'tilt' to the image css stylesheet

<style>
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>

The above will morph the image from a it's original shape to a circle by adding 'morph' to the image css stylesheet

Been fun playing. Cheers for the video Graham.