Cambiar color de fondo de gadgets o widgets

Podríamos, para darle un mejor diseño a nuestro blog, ponerle al fondo de los gadgets un color diferente al que nos es dado por defecto. En este tutorial veremos el procedimiento. 1.- Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos, en las plantillas antiguas, un código como éste:       <div id='sidebar-wrapper'>         <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='HTML3' locked='false' title='TITULO' type='HTML'/> <b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/> <b:widget id='Followers1' locked='false' title='TITULO' type='Followers'/> <b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/> <b:widget id='BlogArchive1' locked='false' title='TITULO' type='BlogArchive'/> <b:widget id='Profile1' locked='false' title='TITULO' type='Profile'/> </b:section>       </div> ...y en las plantillas nuevas un código como éste: <b:section-contents id='sidebar-right-1> <b:widget id='HTML3' locked='false' title='TITULO' type='HTML'/> <b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/> <b:widget id='Followers1' locked='false' title='TITULO' type='Followers'/> <b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/> <b:widget id='BlogArchive1' locked='false' title='TITULO' type='BlogArchive'/> <b:widget id='Profile1' locked='false' title='TITULO' type='Profile'/> </b:section-contents> En los códigos anteriores están identificados los widgets que tenemos en la sidebar. Les ponemos títulos para distinguirlos más fácilmente; después los borramos, si queremos. 3.- Localizamos esta etiqueta: ]]></b:skin>, y antes de la misma pegamos, por cada widget que tengamos en la sidebar (en nuestro ejemplo tenemos seis), este código: #HTML1{ background: #XXXXXX; } El resaltado en verde es la identificación de cada widget, y es donde debemos poner los resaltados en verde del código anterior. El resaltado en rojo es el código del color que le daremos al fondo de cada widget. 4.- En nuestro ejemplo el código que debemos pegar antes de: ]]></b:skin>, debería quedarnos así: #HTML3{ background: #XXXXXX; } #HTML1{ background: #XXXXXX; } #Followers1{ background: #XXXXXX; } #HTML2{ background: #XXXXXX; } #BlogArchive1{ background: #XXXXXX; } #Profile1{ background: #XXXXXX; } Debemos ser cuidadosos con las identificaciones de los widgets (resaltado en verde); Éstas deben ser exactamente iguales en los códigos de los puntos 2 y 4, teniendo en cuenta mayúsculas y minúsculas. Si no es así, los colores no serán interpretados. Twittear