DianePrince Posted September 8, 2016 Share Posted September 8, 2016 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? Link to comment Share on other sites More sharing options...
Graham Quince Posted September 12, 2016 Share Posted September 12, 2016 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 More sharing options...
DianePrince Posted September 21, 2016 Author Share Posted September 21, 2016 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 More sharing options...
Graham Quince Posted September 21, 2016 Share Posted September 21, 2016 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 1 Link to comment Share on other sites More sharing options...
Phil T Posted October 26, 2016 Share Posted October 26, 2016 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now