Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] How to change width and position of widget title box (http://forum.bytesforall.com/showthread.php?t=10120)

Jozeppi Oct 6, 2010 09:49 AM

[SOLVED] How to change width and position of widget title box
 
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

lmilesw Oct 6, 2010 02:51 PM

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

Jozeppi Oct 8, 2010 05:40 AM

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

juggledad Oct 8, 2010 06:17 AM

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'
HTML Code:

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

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

Jozeppi Oct 8, 2010 08:39 AM

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.

lmilesw Oct 8, 2010 09:20 AM

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

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

juggledad Oct 9, 2010 05:36 AM

Leave the widget title BOX empty

Jozeppi Oct 9, 2010 08:55 AM

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


All times are GMT -6. The time now is 05:08 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.