Finding the true code for a widget
jumbalaya said 1 year, 6 months ago:
If I have a widget that puts a data entry grid on my webpage, but I want to change the layout, how do I access the code? The text I enter just has a link to the code.
adamr said 1 year, 6 months ago:
@jumbalaya
You will not have access to the entire code for the widget. However, you can use javascript or CSS to modify the appearance of the widget. This PDF will provide you with some additional information.
http://products.secureserver.net/guides/customizewidgets.pdf
-Adam
jumbalaya said 1 year, 6 months ago:
Thanks Adam.
Right now the widget appears as a list with 1 item on each row. Using CSS would it be possible to put for instance…
Item 1 (and text box) Item 1a (and text box)
Item 2 (txt box) etc
having 2 items on each row? Eventually I need to multiply item 1 and 1a, 2 and 2a, and then sum all the products.
Thanks
bcb said 1 year, 6 months ago:
@jumbalaya
Currently using CSS is the only way to modify the layout of the widgets, but you can do some pretty powerful things with it. Here are some links to the widget CSS documentation. There is an example of doing a basic 2 column layout with the data grid widget using list view that may be a good starting point.
http://support.godaddy.com/help/article/6865
http://support.godaddy.com/help/article/6866
So to do a 2 column layout using the data entry widget, you might try something like this:
/* Set width of form controls and that they should be floated */
.Data_Central_Control {
width: 305px;
float: left;
}
/* Odd widgets need to start on the left again. If you have more than
11 controls you will need to update this */
.Data_Central_Control1,
.Data_Central_Control3,
.Data_Central_Control5,
.Data_Central_Control7,
.Data_Central_Control9,
.Data_Central_Control11 {
margin-right: 10px;
clear: both;
}
/* Align submit button to the left */
.Data_Central_Button_Container {
clear: both;
text-align: left;
}
Regards,
Brad B.
Easy Database Developer
jumbalaya said 1 year, 6 months ago:
Thanks Brad. Since I am a total novice, where would I enter this code? The widget sort of writes itself, so I am not sure how to edit that.
Thanks
bcb said 1 year, 6 months ago:
@jumbalaya
To add CSS (or sometimes called a stylesheet) to your website you generally put code below inside of the document <head>.
<style type="text/css">
... put code listed above here ...
</style>
How you do that depends on how you are building your website. Are you using a tool like Website Tonight, or are you modifying the HTML files and then uploading them?
Regards,
Brad B.
Easy Database Developer
jumbalaya said 1 year, 6 months ago:
Brad, I am using Website Tonight, and the easy database and widgets through that.
bcb said 1 year, 6 months ago:
@jumbalaya
In WST you go to Design -> Advanced Style Options and follow the instructions on the right hand side.
Basically you copy all of the stuff in the top box, paste it into the bottom box, and then add the code I gave you above in my first response.
Hope that helps.
Regards,
Brad B.
Easy Database Developer
jumbalaya said 1 year, 6 months ago:
Brad,
I’m sorry, but I keep trying it and it doesn’t seem to be working. Is there anything in your code that I need to change or is it good as is?
Thanks.
bcb said 1 year, 6 months ago:
@jumbalaya
The code should work as-is. If it is not working please provide me a URL to your widget and I will look to make sure it was put in the right place.
Regards,
Brad B.
Easy Database Developer
jumbalaya said 1 year, 6 months ago:
<style type=”text/css”>
/* Set width of form controls and that they should be floated */
.Data_Central_Control {
width: 305px;
float: left;
}
/* Odd widgets need to start on the left again. If you have more than
11 controls you will need to update this */
.Data_Central_Control1,
.Data_Central_Control3,
.Data_Central_Control5,
.Data_Central_Control7,
.Data_Central_Control9,
.Data_Central_Control11 {
margin-right: 10px;
clear: both;
}
/* Align submit button to the left */
.Data_Central_Button_Container {
clear: both;
text-align: left;
}
</style>
/**
* @file
* @project 678
* @package sftheme
* @site app1
*/
/**
* ——————————————————————
* @section TYPOGRAPHY
* ——————————————————————
*/
h1 {
font-size:2em;
font-weight:normal;
margin:0 0 0.75em;
color:#000000;
}
h2 {
font-size:1.6em;
font-weight:normal;
margin:1.3em 0 0.94em;
color:#555555;
}
h3 {
font-size:1.25em;
font-weight:bold;
margin:1.65em 0 1.2em;
color:#000000;
}
h4 {
font-size:1.1em;
font-weight:normal;
margin:1.5em 0;
color:#555555;
}
h5 {
font-size:0.9em;
font-weight:normal;
margin:1.67em 0;
color:#000000;
}
h6 {
font-size:0.9em;
font-weight:normal;
font-style:italic;
margin:1.67em 0;
color:#000000;
}
p {margin:0 0 1.5em;padding:0;line-height:1.5;}
form {margin:0 0 1.5em;padding:0;}
blockquote {margin:1.5em;}
sup, sub {line-height:0;}
address {margin:0 0 1.5em;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {line-height:1.5;}
caption {margin:0; padding:.5em;}
/**
* ——————————————————————
* @section MAIN AREA
* ——————————————————————
*/
body {
font-family:Arial, Helvetica, FreeSans, sans-serif;
font-size:12px;
margin:0px;
padding:0px;
background-image:url(images/678_grad.png);
background-repeat:repeat-x;
}
html, body {
height:auto !important;
}
a:link,
a:visited,
a:hover {
text-decoration:none;
}
.sf_wrapper {
width:990px;
min-height:1%;
height:auto !important;
height:1%;
margin:0 auto;
position:relative;
z-index:1;
}
.sf_wrapper:after {
content:”.”;
clear:both;
height:0;
visibility:hidden;
display:block;
}
.sf_main_wrapper {
width:990px;
min-height:1%;
height:auto !important;
height:1%;
background-image:url(images/678_whitegrad_base.png);
background-repeat:repeat;
}
.sf_main_wrapper:after {
content:”.”;
clear:both;
height:0;
visibility:hidden;
display:block;
}
.sf_main {
min-height:1%;
height:auto !important;
height:1%;
background-image:url(images/678_whitegrad.png);
background-repeat:no-repeat;
}
.sf_main:after {
content:”.”;
display:block;
clear:both;
visibility:hidden;
height:0;
}
.sf_region6 {
padding:30px 20px 40px 30px;
min-height:200px;
height:auto !important;
height:200px;
}
.sf_region6:after {
content:”.”;
clear:both;
height:0;
visibility:hidden;
display:block;
}
/**
* @subsection header
*/
.sf_region1 {
min-height:1%;
height:auto !important;
height:1%;
width: 990px;
margin:0 auto;
}
.sf_region1:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.sf_main_header {
font-size:26px;
font-weight:bold;
padding:25px 0;
min-height:1%;
height:auto;
}
* html .sf_main_header {
height:1%;
}
.sf_main_header:after {
content:”.”;
display:block;
visibility:hidden;
clear:both;
height:0;
}
/**
* @section navigation
*/
.sf_region2 {
min-height:1%;
height:auto !important;
height:1%;
width:970px;
padding: 0 20px 0 0;
}
.sf_region2:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.sf_navigation {
margin: 0px;
float:right;
}
.sf_navigation .widget_header{
display:none;
}
.sf_navigation ul {
margin: 0;
padding: 0;
}
.sf_navigation ul:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
height:0px;
}
.sf_navigation ul li {
float: left;
list-style: none;
margin: 0 0 0 20px;
padding: 0;
white-space: nowrap;
min-width:1%;
width: auto;
}
.sf_navigation ul li a {
display: block;
margin:0px;
padding:12px 0 13px;
text-decoration: none;
font-size:11px;
min-width:1%;
width: auto;
}
* html .sf_navigation ul li,
* html .sf_navigation ul li a {
width:1%;
}
/**
* @section subnav
*/
.sf_navigation .subnav {
border-style:solid;
border-width:1px;
left: -999em;
list-style: none;
line-height: 1;
margin: -1px 0 0;
padding: 0px;
position: absolute;
width: 154px;
z-index:1000;
}
.sf_navigation .subnav li {
float: left;
margin:0;
padding:0;
width: 154px;
white-space:normal;
}
.sf_navigation .subnav li a {
display: block;
height:auto;
padding:5px 12px 6px;
width: 130px;
white-space:normal;
font-size:11px;
text-transform:none;
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
#Nav1 li:hover, #Nav1 li.hover {
position: static;
}
/**
* @subsection content
*/
.sf_content {
min-height:1%;
height:auto !important;
height:1%;
}
.sf_content:after {
content:”.”;
display:block;
clear:both;
visibility:hidden;
height:0;
}
.sf_pagetitle {
font-weight:normal;
font-size:26px;
padding:0px 10px;
margin-bottom:15px;
}
.sf_pagetitle h1 {
font-size:26px;
font-weight:normal;
margin:0;
color:inherit;
}
.sf_extra12 {
display:none;
}
/**
* @subsection footer
*/
.sf_region9 {
min-height:1%;
height:auto !important;
height:1%;
width: 100%;
clear:both;
}
.sf_region9:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.sf_footer {
padding:12px 20px 13px;
font-size:11px;
text-align:right;
}
/**
* @subsection banner
*/
.sf_region10 {
font-size:10px;
text-align:center;
clear:both;
}
.sf_banner {
padding:10px;
}
.sf_banner #bannerImage {
padding:5px;
}
/**
* @subsection buttons
*/
.btn {
font-size: 11px;
font-family:Arial, Helvetica, FreeSans, sans-serif;
cursor: pointer;
margin: 3px 0;
padding: 2px 4px 3px;
border:none;
}
/**
* @subsection flower container
*/
.sf_extra9 {
width:100%;
height:255px;
margin-top:-150px;
z-index:0;
position:relative;
background-image:url(images/678_flowers.png);
background-repeat:repeat-x;
background-position:bottom left;
}
/**
* ——————————————————————
* @section WIDGETS
* ——————————————————————
*/
.widgetset {
float:right;
width:180px;
display:none;
font-size:11px;
}
.widgetset .widget {
margin-bottom:20px;
min-height:1%;
height:auto !important;
height:1%;
}
.widgetset .widget_header {
margin:0 0 10px 0;
font-size:18px;
font-weight:normal;
}
.widgetset .widget_header a:link,
.widgetset .widget_header a:visited,
.widgetset .widget_header a:hover{
text-decoration:none;
}
.widgetset .widget_content {
width:180px;
overflow:hidden;
}
.widgetset .HomeLink .widget_content {
margin:0px;
padding:0px;
}
.widgetset .widget_content ul,
.widgetset .widget_content ol {
margin:0px;
padding:0px;
list-style:none;
}
.widget li{
margin:0px;
padding:0px 0px 10px;
}
.widgetset label{
margin:0px;
padding:0px;
display:block;
}
.widgetset form{
margin:0px;
padding:0px;
}
.widgetset .form_item {
margin:0px;
padding:0px 0px 6px;
}
.widgetset input[type=text] {
width:172px !important;
}
.widgetset select {
width:177px !important;
}
* html .widgetset select {
width:139px !important;
}
/**
* ——————————————————————
* @section IE6 PNG FIXES
* ——————————————————————
*/
* html body {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “images/spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));;
}
* html .sf_main_wrapper {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “images/spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’scale’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));;
}
* html .sf_main {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “images/spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));;
}
* html .sf_region6 {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “images/spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’scale’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));;
}
* html .sf_extra9 {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “images/spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));;
}
* html input,
* html textarea,
* html a {
position:relative;
}
* html .sf_region2 {
position:relative;
z-index:2;
}
bcb said 1 year, 6 months ago:
@jumbalaya
Remove the <style type=”text/css”> and </style> tags. They are not needed if you edit your CSS in Website Tonight.
If that still doesn’t work, show me the website address to your widget.
Regards,
Brad B.
Easy Database Developer
4 min expected wait time