Examples of Custom CSS for Easy Database for Websites Widgets
On June 30, 2013, we will no longer support Easy Database for Websites. Visit Exporting Your Easy Database for Websites Table for information on exporting your content and moving to another company.
To customize the look of Easy Database for Websites using CSS, you need to write CSS rules and link to them on your site. You can either do this using a <style type="text/css"> tag, or linking to an external file with a <link rel="stylesheet"> tag. If you're unfamiliar with this process, there are several resources available on the Internet to show you how to do it.
For more information see Customizing Easy Database for Websites Widgets with CSS.
Here are some examples of custom CSS in Easy Database for Websites. These are only examples and not all you can do. You are only limited by your imagination.
Here's an example of what a widget looks like by default:
NOTE: We provide this CSS information as a courtesy. In general, we do not support custom code or custom scripts. We assume that customers using custom CSS have the technical skills necessary to troubleshoot their own coding. For additional support, you can post your custom CSS questions to the Easy Database for Websites Go Daddy Support forum.
Removing the Title from the Widget
.Data_Central_Title { display: none; }
Squaring Widget Borders
.Data_Central_Widget,
.Data_Central_Title {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Removing the Widget Scrollbar
.Data_Central_Content {
max-height: none;
height: auto;
}
Creating a 2-Column Layout Widget
.Data_Central_Row {
width: 320px;
margin-bottom: 10px;
}
.Data_Central_Row_Even {
clear: both;
float: left;
}
.Data_Central_Row_Odd {
float: right;
}
Making Form Labels Bold and Aligned Above Field
.Data_Central_Control .Data_Central_Control_Label {
float: none;
}
.Data_Central_Control_Label label {
font-weight: bold;
}
.Data_Central_Control_Input {
width: 95%;
}
Right-Aligning the Widget Form Submit Button
.Data_Central_Button { float: right; }
.Data_Central_Button_Container { overflow: auto; }
Organizing Widget Checkboxes into Columns
.Data_Central_Checkbox_Control .Data_Central_Control_Input div {
float: left;
width: 33%;
white-space: nowrap;
overflow: hidden;
}
NOTE: Using the white space and overflow properties keeps the column from showing up on top of another column, and keeps them from wrapping lines. It does this at the expense of hiding any content too long to fit on one line.
Customizing a Specific Widget
You may use multiple widgets on your site. If so, and if you want to specifically style one widget differently than the rest, the best way to do this is to wrap it in a <div> with a unique id.
<div id="product_widget"> <!-- Easy Database Embed Code --> <script src="..."> </div>
Now you can prefix your CSS rules with #product_widget and it will apply only to that one widget.
Customizing Widgets in Easy Database for Websites
Customizing Easy Database Widgets in Website Builder
Customizing Easy Database for Websites Widgets with CSS
Resizing Widgets in Easy Database for Websites
Custom JavaScript for Easy Database for Websites
Adding Hidden Fields in a Data Entry Widget in Easy Database for Websites
Sending Message...Have a question about the content of this article?
2 min expected wait time