Changing Widget Font, Size, Color, Bold, etc
the_shark said 1 year ago:
I have my widget up and running…but when i use it on my website it’s in a dull gray color and tiny print.
i believe somewhere i saw that it follows your website template…in my case i’m using a template off of website tonight.
can i modify this to make it bigger, bolder, different colors, etc?
adamr said 1 year ago:
@the_shark
Yes, by default, the widget will follow the color scheme of the template you’re working with. You’ll want to check out this article that goes over different ways to customize your widget:
Customizing Easy Database Widgets in WebSite Tonight
-Adam
DS said 1 year ago:
@the_shark
You should be able to do anything you would need to by using CSS. You’ll want to take a look at this article and the linked articles regarding CSS and some examples of what you can do:
http://support.godaddy.com/godaddy/customizing-widgets-using-css/
Once you’re ready to start experimenting, log into your Website Tonight account and go to the page designer.
Next from the Design dropdown, select “Advanced Style Options,” copy the read-only view of CSS file to the edit view of CSS file, and check Use Modified CSS.
In the modified section of the CSS, you can add new CSS for the widgets here. You should be able to cut and paste some of the examples into the Modified CSS.
There may be some code in a section called Data Widgets that controls the colors of the widget. You can remove that it and it will use the colors shown in the Widget Builder.
Hopefully that gets you off to a good start. Let me know if you need anymore help.
DS
Nate D said 1 year ago:
@the_shark – You can post the web address if you need help with the CSS.
Also here are some great resources…
There is a CSS guide and reference at http://www.w3schools.com
A great tool for identifying CSS elements is at http://getfirebug.com/
the_shark said 1 year ago:
im at the end of my wits…ok my site is wheredoyoubike.com
if you select the state of Kentucky or Missouri…and take a look at the widget showing up…i can’t get those changed
on the missouri page in website tonight i have it in as an “insert, easy database”
on the kentucky page in website tonight i have a script inputted
do i need to publish before i can see the changes?
im struggling bad on this part
- also…sidenote…when i drag a picture to one of my easydatabase boxes…after setting it as a hyperlink…the picture doesn’t show up on the website…just a link that then opens up a new page to see the picture
the_shark said 1 year ago:
i believe i can find the css scripts i need…i just don’t know exactly where to put the script…in the easydatabase edit widget page then click save? do i input a script and copy paste what was saved in the easydatase widget page w/ my modifications there? thats what i have for the state of KY
do i do an advanced options then do the copy paste original css into the edit css…edit it there? if so where do i edit it? i tried changing text size to 26pt…cant see it though
do i publish after my changes? or can i select preview and see the changes/
bcb said 1 year ago:
@the_shark
Sorry for the delay in responding to this.
If you want an image to show up you need to set the column type to Photo not Hyperlink.
To add custom CSS in Website Tonight see the instructions DS posted above. You may need to publish the changes before you see the CSS changes take affect. How did you try changing the text size to 26pt, what CSS did you use?
Also, may I ask why you have chosen to use a separate table and widget for each state rather than using a single table and a “Search & Filter” widget?
Regards,
Brad B.
Easy Database Developer
the_shark said 1 year ago:
in response to your note below:
- i don’t know why i didn’t use a “search & filter” widget. probably because this was my first try on it. a search and filter widget now that you say it probably would be a whole lot easier.
- i have had zero luck modifying the colors or anything like that on the widget table…plus…the table doesn’t fit very well on the page
- i believe i set the column as a photo column and the pictures didn’t show up…rather a link did and you had to click the link then it opened a new page with just the picture on that page
- what i would PREFER to do…is have one excel page i can input all this data in…then do an import each day after i input all my excel data. but will that work? if i combined all these tables into one…can i export that to an excel database? or get all this information in excel…then import it to easy database…do the cell entries show up when you import or only the row and column headers?
i’m still very new to this whole experience…and so far i’ve had some luck…but nothing compared to how i would really like it to appear
bcb said 2 weeks, 1 day ago:
@the_shark
Sorry for the delay in responding to this.
If you want an image to show up you need to set the column type to Photo not Hyperlink.
To add custom CSS in Website Tonight see the instructions DS posted above. You may need to publish the changes before you see the CSS changes take affect. How did you try changing the text size to 26pt, what CSS did you use?
Also, may I ask why you have chosen to use a separate table and widget for each state rather than using a single table and a “Search & Filter” widget?
Regards,
Brad B.
Easy Database Developer
the_shark said 1 year ago:
ok…here is the script i have for my alabama page widget
<script type=”text/javascript” id=”dbboon_script_4fb544a99d910″ src=”https://dbexternalsubscriber02.secureserver.net/embed/?method=getForm&accountId=19935&formId=ALABAMA&scriptId=4fb544a99d910&height=0&width=0&includecolorcss=0″></script>
i have the height part working…i have the width part working
how do i change the colors now? what does the “&includecolorcss=0″ do??? from what i can tell it doesn’t change a thing
is this where i now have to go in and add the strings below somewhere:
To Define Classes in your CSS Stylesheet
After you update the JavaScript you can define classes in your stylesheet. Control your widget’s color scheme by replacing X with your own values.
.Data_Central_color1{
color:X; background-color:Y;} Header and Submit/Search button
.Data_Central_color2{
background-color:X;} Form controls and table header row
.Data_Central_color3{
background-color:X;} Even table rows and the container background
.Data_Central_color4{
background-color:X;} Odd table rows
.Data_Central_color5{
border-color:X;} Table and form control’s border
if so…where do i add those in the string i have created above? because as it is now…i can only configure the height and width…still struggling with the color changes. do i make all the color changes in my one script line? or do i now have to go somewhere else and modify as well?
Nate D said 1 year ago:
@the_shark – In Website Tonight you can add CSS to the Advanced CSS file:
http://support.godaddy.com/help/article/4229/editing-css-with-website-tonight
.Data_Central_color1 {
color: #000000; background-color: #000000;} /* Header and Submit/Search button */
the_shark said 1 year ago:
Last question…and I think I finally have it.
Please go to the following:
https://wheredoyoubike.com/Alabama.html
Here are the things I would like to change…and I just cannot figure it out…i have tried now for three hours.
1) I am trying to get the main background to be this color: 0088FF
Not sure where in this modified CSS I am supposed to make this change. It would be nice if those modified CSS boxes had the actual number codes in the color you selected. When i say main background…i’m talking about the very first layer of color…in the top right of the page…the light gray.
2) The word ALABAMA above the drop down box on this page…I want it yellow…FFFF00. I cannot figure out where to make this change either in the modified CSS
3) Two things…A) I don’t even need the widget header which contains the word ALABAMA in WHITE. However…if that is way too difficult to remove completely…i would like that Alabama to also be yellow…FFFF00.
4) The data labels (Date, Event, etc) I want BOLDED, YELLOW, and increased in size by one or two points…no idea where to change this.
5) And lastly…i want the actual data in the widget changed to yellow, bolded, and to be one or two points smaller in size than the data labels in #4 above. I’m good w/ the data labels being fairly large.
Where in my modified CSS below to i make these changes? I can’t do trial and error anymore…it is taking incredibly too much long. I greatly appreciate anyone’s assistance.
/**
* @file
* @project 730
* @package sftheme
* @site app1
*/
body {
background-color:#acadad;
color:#868787;
}
.sf_region7 {
background-color:rgba(52, 52, 52, .6) !important;
background-color:#343434;
}
.sf_main_wrapper {
background-color:rgba(52, 52, 52, .6) !important;
background-color:#343434;
border-top:solid 1px rgba(88, 88, 88, .5) !important;
border-top:solid 1px #5b5b5b;
}
.sf_header_wrapper {
background-color:#414242;
background-image:url(images/730_nav_1.jpg);
border-bottom:solid 1px rgba(45, 45, 45, .7) !important;
border-bottom:solid 1px #2e2f2f;
}
.sf_main_header { color:#bdbdbd; }
.sf_navigation ul {
border-top:solid 1px rgba(88, 88, 88, .7) !important;
border-top:solid 1px #5b5b5b;
}
.sf_navigation {
border-top:solid 1px rgba(45, 45, 45, .7) !important;
border-top:solid 1px #2e2f2f;
}
.sf_navigation ul li {
border-right:solid 1px rgba(45, 45, 45, .7) !important;
border-right:solid 1px #2e2f2f;
}
.sf_navigation ul li a {
border-right:solid 1px rgba(88, 88, 88, .7) !important;
border-right:solid 1px #5b5b5b;
}
.sf_main {
background-color:rgba(37, 37, 37, .8) !important;
background-color:#262626;
border-color:rgba(94, 94, 94, .3) !important;
border-color:#5f5f5f;
-moz-box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
-webkit-box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
}
.sf_pagetitle { color:#868787; }
.widgetset .widget_header {
background-color:#202020;
border:solid 1px #373737;
}
.sf_footer {
background-color:rgba(37, 37, 37, .8) !important;
background-color:#262626;
border-color:rgba(94, 94, 94, .3) !important;
border-color:#5f5f5f;
-moz-box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
-webkit-box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
box-shadow: inset 0 0 13px rgba(0, 0, 0, .3), 0 0 1px rgba(94, 94, 94, .5);
color:#5a5a5a;
}
/*——————————–
DBNow
——————————–*/
.Data_Central_color7 {
background-color:#07F72F;
color:#fff;
}
.Data_Central_color1 {
background-color:#000000;
color:#fff;
}
.Data_Central_color2 { background-color:#000000; }
.Data_Central_color3 { background-color:#010139; }
.Data_Central_color6 { background-color:#08F820; }
.Data_Central_color4 { background-color:#030374; }
.Data_Central_color5 { border-color:#FFFF00; }
DS said 1 year ago:
Hey the_shark,
I don’t write much CSS so my suggestions may or may not work, but I’ll take a crack at it.
1. It looks like that color is set in the body section of your CSS, so change that to something like this:
body {
background-color:#acadad;
color:#0088FF;
}
You may also need to change the background color because #acadad is a very similar grey color. I would experiment with those two values.
2. In your CSS below you should be able to change this line:
.sf_pagetitle { color:#868787; }
to
.sf_pagetitle { color:#FFFF00; }
3. In the DBNow section at the bottom of your CSS add this to remove the header:
.Data_Central_Title { display: none; }
4. Okay that text is #868787, bold, and 14px. It’s already bolded so in the DBNow section at the bottom of your CSS add something like this:
.Data_Central_Column {
color:#FFFF00;
font-size:16px;
}
5. In the DBNow section at the bottom of your CSS add something like this:
.Data_Central_Row {
color:#FFFF00;
font-weight: bold;
font-size:14px;
}
I have some additional tips for you after looking at your site.
1. If you are using Chrome, Firefox, or Safari you can right click on any of the elements you were asking about and select “Inspect element.” Use this to get information about where the styles are coming from.
2. Here’s a link to some example Easy Database styles: http://support.godaddy.com/help/article/6865/examples-of-custom-css-for-easy-database-for-websites-widgets#title
3. I noticed Alabama is the only widget that is sized correctly. If you want to fix this, the best size to pick in Website Tonight is blank or zero. Just uncheck the Keep proportions box and put in blank values and then save.
4. For the website links you can add anchor tags to them. In Easy Database, edit the “WEBSITE” column and select yes. Now you can add text to that column so that the links look like “Click Here” instead of http://www.tourdekingston.com.
Let me know if that helps,
DS
the_shark said 12 months ago:
your help has been amazing…i’m getting closer and closer.
i have an easy database question. i’m creating a “Search & Filter” widget as you asked previously why i hadn’t done.
I have selected two different headers in my data to be my search filters…DATE and STATE.
Then I started with DATE…i clicked into the DATE widget…and on the CONTROL PROPERTIES…i selected it to be a DROPDOWN, FIELD LABEL DATE, my Lookup Table is set to what i call my “master file” which has every bit of data i need. Then i save. HOWEVER…the search options in the dropdown do not remove duplicates. For example…i have 2012/05/05 listed like 15 times from where i have multiple items on different rows on that date. How can i remove duplicates? Or can i not remove duplicates…with each one being specific to that row in the database?
Secondly…i go to the Control Properties for my STATE search field. I use the same master file as my lookup table…save…and now the choices in the drop down box are STILL dates. It doesn’t grab the states…even though the search filter is already pulling from the STATE column. So i’m stumped there…and of course after seeing how the DATE dropdown duplicates…i’m worried now it will duplicate in the state dropdown as well.
Is there a customer service # i can call into and provide my login information to so that someone can actually go in and look at what i’m talking about and see if they can provide any assistance?
bcb said 12 months ago:
When using lookup tables for dropdowns, currently it only pulls the value from the first column in the table. And as you suspect, it does not remove duplicates. To get around this and still use a lookup table you would need to create a new separate table with the lookup values. Such as STATE_LOOKUP or DATE_LOOKUP tables. For more information about lookup tables see this help article: http://support.godaddy.com/help/article/3748/using-lookup-tables-in-easy-database-for-websites
Another way to approach the state dropdown is to avoid using a lookup table altogether. In the control properties dialog set the field to a dropdown, but look for the option that says “Import Options from predefined lists” and choose “States”. This makes a static list of options and is a good solution if your state list does not change frequently.
And similarly for your date field. Rather than have a date dropdown, you could leave the field as a “Textbox”. If you have set the column type to “Date” in the data tables interface, then when you click on the date input box for your widget a date picker will popup. That may be more user friendly than a huge list of dates in a dropdown.
Hope that helps. You’re always welcome to call in to customer service. The number is listed on the right side of the screen.
Regards,
Brad B.
Easy Database Developer
the_shark said 12 months ago:
i cannot express how helpful your posts above have been…everything is getting better by the day thanks to this forum
3 min expected wait time