Knowledge Base > Syndication Services > Editor's Desk and Widgets
Search the Knowledge Base
 
Date Modified
Thursday, February 21, 2008
Widget How To's - Change or remove widget border

This Knowledge Base article only applies to premium Editor's Desk accounts. A premium level account allows for customization of the HTML, CSS, and JavaScript of your widgets. If you'd like more information about how you can take advantage of this more robust version of Editor's Desk, please contact Craig Lachman. His contact information is included in the confirmation email that was sent to you when you signed up for a basic Editor's Desk account. 


For many widgets there is a border that surrounds the entire widget. This border may not always blend well with the part of the page where the widget is being deployed. To modify or change this border, go into the CSS pane of Editor's Desk (located within the Design tab of a widget). Look for  .ng_summaryList at or near the top. This class is used in the div tag that wraps the entire widget, and it contains a definition for "border." The value for color is set by default to #9e9e9e, and the thickness is defined as 1px. Change the color and/or thickness as desired. Removing the border can be done by setting the border width to 0px. Below are some examples to guide you.


By default:

.ng_summaryList_${BuzzId}{
border:1px solid #9e9e9e; /* border color of the buzz box container */
background-color: #fcfcfc; /* background color of the buzz box container */
}

Change color (in this case, to dark blue):

.ng_summaryList_${BuzzId}{
border:1px solid #000066; /* border color of the buzz box container */
background-color: #fcfcfc; /* background color of the buzz box container */
}

Change thickness (make it twice as thick):

.ng_summaryList_${BuzzId}{
border:2px solid #000066; /* border color of the buzz box container */
background-color: #fcfcfc; /* background color of the buzz box container */
}

 

Remove the border altogether:

.ng_summaryList_${BuzzId}{
border:0px solid #9e9e9e; /* border color of the buzz box container */
background-color: #fcfcfc; /* background color of the buzz box container */
}

If you have additional questions, or need personalized help on this topic, please send an email to Private Label Support.



Knowledge Base Software - myKB.com