Shared Folders

[DianePrince]

I would love to be able to change the colour of the shared folder, can this be done using the HTML brick and if so could someone provide the bit of code I would need to do this?

[Graham Quince]

Hi @DianePrince

The CSS class for the shared folder widget is widget_sharedfolders

Just before I left for my unexpected break(?), I prepared the first in a series of tutorials, showing how you could make big changes to Frog using an HTML widget and CSS:

https://www.frogcommunity.com/css

Colour options would include:

• background
• border

There might be more, but if you add a widget to a page, leave the editor and right-click and choose Inspect Element, you'll see of the widget is rendered(?) in HTML with its CSS classes.  That might help you makes alterations.

[DianePrince]

I've looked at your tutorials, however, I can't seem to find anything that helps with my query and unfortunately I don't do CSS so I am completely stuck.

Is there anyway you could give me the bit of code I need or alternatively could I ask for a RFC so we can change the colours of widgets without having to use the HTML brick?

 

[Graham Quince]

Sorry @DianePrince,

I've just tried myself and it is hard to remove the background colour, so let's bypass that altogether, this code hides the blue top:

<style>
.widget_sharedfolders .theme-headerbg {
    height:0px;
    overflow:hidden;
}
<style>

And this code replaces it with a solid red box:

<style>
.widget_sharedfolders .content-wrapper:before {
    content:"Shared Folders";
    height:30px;
    background:#FF0000;
    display:block;
    width:100%;
    padding:10px;
    font-weight:bold;
}
</style>

I'm going to guess you'd want to style it up a bit more, but this should get you started.

Of course, you're welcome to create an idea on the Ideas Portal too

[Phil T]

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.