Hello!

I am trying to get the title box of my widgets to wrap round the content within them but am finding it very difficult to find the correct CSS script to use. Also I am unsure how to align the left sidebar widget title box's to the left and the right ones to the right. I am using Wordpress version 3.0.1 and the Atahualpa theme version 3.4.9.

Basically I would like my widget title boxes from this site www.jonassacks.com to look like mine on my site www.joeallenpreston.com.

I am still quite new to the website building game so any help would be fantastic.

Thanks a lot,

Joe

It looks like they are "wrapping" OK to me. Can you clarify what you mean?

Thanks for your reply.

Sorry I'm not sure what the correct term is for it but basically I would like to get the grey background in the title box to be the same width as the text inside it and not the width of the sidebar. You can see what I mean at this url www.jonassacks.com. Also the text inside the right side bar title boxes is aligned to the left at the moment and would like to align them to the right as it is at this url. I hope that makes more sense

Thank you

When you have a situation like this, go to their page and view the source. You can copy the source to a text file, call it test.html and then open it in your browser. Now you can make change s to the text file and refresh it in your browser. This way you can mess with the code and see the results and figure out what they have done.

what they did was add the background to the Widget Title styling (ato->Style WIDGETS->Widget Title) and adding a 'display:inline'

background-color:#000000;
color:#FFFFFF;
display:inline;

you'll also need to adding padding to make it look like you want

Hi there,

I did try that before but when I add the 'display:inline; code to the widget title box section the titles disappear altogether. I'm not sure if some codes are conflicting with others from the widget title or widget container but here is what I have in the style boxes:

Widget Container:

font-size: 12px;
margin: 0 0 10px 0;
padding: 10px;
border: 0;
/* uncomment next block for round corners */
/*
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
*/

Widget Title Box:

background: #555;
colour: #FFFFFF;
display: inline;

Widget Title:

font-size: 1.5em;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
color: #FFFFFF;
border-bottom: solid 1px #eee;
padding: 5px 0 5px 5px;
margin-bottom: 10px;

I'm not sure if there is anything there obvious which would cause them to disappear or if I need to add some margin/padding codes but it's proving very stubborn to change.

I really appreciate your help with this.

Try this in ATO>Add HTML/CSS Inserts>CSS Inserts and see if it does what you want.

td#right .widget-title, td#left .widget-title {display:inline-block;margin-right:0;}td#right {text-align:right;}

Leave the widget title BOX empty

Hey it worked!

Thank you both so much for all the help, I thoroughly appreciate it. I would love to donate for your time but I'm a poor student in his overdraft with no money

Thanks again guys

Joe