I've done this before but I forgot. I wanna change the text color/font of the titles in the widgets located at the footer section of this (greatly undone) website: http://sainthilaire.com.br/home/?page_id=4

I can change the title attributes of the sidebar widgets through the Style WIDGETS option at ATO, but somehow changes here won't affect the footer widgets.

You will have to determine the selectors for the widgets and/or widget titles in questions and use some CSS in ATO>Add HTML/CSS Inserts>CSS Inserts. I use Firebug with Firefox to determine selectors.

Here are my current CSS Inserts. I have no idea how to determine the selectors. In this case I want to change the color of the red titles in the footer widgets. I have done this before on another site (I just copied its CSS Inserts), otherwise i think the titles wouldn't be red... but I want them yellow this time.

td#header {
padding-bottom: 15px;
}
/* removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */
td#middle {
padding: 0;
}
div.searchbox-form {
margin: 5px 0 15px 5px;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}
div#imagecontainer {
border-top: 0px;
border-bottom: 0px;
}
div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/round-gray.gif') no-repeat 0 7px;
}
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

Determining selectors is important to know when developing sites I would suggest installing Firefox and Firebug and play with it. The selectors I see on your site are.

#footer_widget_area

The titles are wrapped in a b tag so the whole selector for all the items wrapped in b tags in any one of the footer widget areas is

#footer_widget_area b

So what I would put in ATO>Add HTML/CSS Inserts>CSS Inserts would be something like the following to make all the items in b tags white. You could also add font size etc.

#footer_widget_area b {
color: #ffffff;
}

Thanks a LOT! It's fixed.

This is the greatest theme support ever!