Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] How to change width and position of widget title box


  #1  
Old Oct 6, 2010, 09:49 AM
Jozeppi
 
5 posts · Oct 2010
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
  #2  
Old Oct 6, 2010, 02:51 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
It looks like they are "wrapping" OK to me. Can you clarify what you mean?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 8, 2010, 05:40 AM
Jozeppi
 
5 posts · Oct 2010
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
  #4  
Old Oct 8, 2010, 06:17 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 8, 2010, 08:39 AM
Jozeppi
 
5 posts · Oct 2010
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.
  #6  
Old Oct 8, 2010, 09:20 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Oct 9, 2010, 05:36 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Leave the widget title BOX empty
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Oct 9, 2010, 08:55 AM
Jozeppi
 
5 posts · Oct 2010
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

Bookmarks

Tags
box, resize, text, title, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Widget Title Box Image? Antonino Giglio Sidebars & Widgets 4 Oct 12, 2010 07:51 PM
Help to change my blog title position and background colour: winphil Header configuration & styling 2 Jun 18, 2010 06:32 PM
[SOLVED] change widget width suzrocks Sidebars & Widgets 2 Apr 6, 2010 08:27 PM
[SOLVED] Change new widget area width jaxon Sidebars & Widgets 10 Feb 15, 2010 01:49 PM
[SOLVED] Change the cell width in new widget area duping812 New Versions, & Updating 2 Jul 16, 2009 07:19 PM


All times are GMT -6. The time now is 12:52 AM.


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