Advanced Styling Guide
The best way to control the appearance of your Drugs.com widget is to choose the 'No Theme (No CSS)' option and then style the widget directly in your website CSS file.
As a reference for what CSS classes are available, the following code is the HTML source code of the widget after being generated by our Javascript:
This HTML code is for reference only and should not be copied. For proper functionality, be sure to use the code listed in Step 2 above.
As the above HTML demonstrates, almost every element has a specific CSS class associated with it, making every element easily accessible within your website's CSS file. You have full control over how the widget will appear on your website.
As an example, the following CSS will style the widget with a green border, green title and make the link text small:
.ddc-widget-search {
border: 1px solid #6B5;
}
.ddc-widget-search-title {
padding: 4px;
background: #6B5;
color: #FFF;
font-weight: bold;
}
.ddc-widget-search-content {
padding: 4px;
}
.ddc-widget-search-link {
font-size: 11px;
}
As a test, try copying and pasting the example CSS into your CSS file. Ensure you have chosen the 'No Theme (No CSS)' option and copied the widget code from Step 2 somewhere on your site.
If you come up with a design you feel is worthy of sharing with others, please contact us; we may add your theme to our list.
Advanced Styling Guide
The best way to control the appearance of your Drugs.com widget is to choose the 'No Theme (No CSS)' option and then style the widget directly in your website CSS file.
As a reference for what CSS classes are available, the following code is the HTML source code of the widget after being generated by our Javascript:
This HTML code is for reference only and should not be copied. For proper functionality, be sure to use the code listed in Step 3 above.
As the above HTML demonstrates, almost every element has a specific CSS class associated with it, making every element easily accessible within your website's CSS file. You have full control over how the widget will appear on your website.
As an example, the following CSS will style the widget with a green border and green title:
.ddc-widget-news {
border: 1px solid #6B5;
}
.ddc-widget-news-title {
padding: 4px;
background: #6B5;
color: #FFF;
font-weight: bold;
}
As a test, try copying and pasting the example CSS into your CSS file. Ensure you have chosen the 'No Theme (No CSS)' option and copied the widget code from Step 3 somewhere on your site.
If you come up with a design you feel is worthy of sharing with others, please contact us; we may add your theme to our list.
