Jump to content
DianePrince

Shared Folders

Recommended Posts

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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

Capture.PNG

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

  • Like 1
Link to comment
Share on other sites

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.Screen Shot 2016-10-26 at 22.27.41.png

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...