twenty twelve theme front page template 2 widgets

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Thanks,

I have firebug installed, and i cannot pinpoint the exact placement

Hi Yaginuk,
normally one just right clicks on the element one needs information about.
However, sometimes it’s not working and you have to check manually which parent or child element might be the “host” in the pane left beside the “styles” window of Firebug.

Try the following:
After having right clicked on your element, try navigating level by level through the code nearby.
E.g. if you try to pinpoint a background image used in a div, you may “unfold” the <div …> where you find yourself after right clicking on the element. As those code passages are often collapsed, you might get lucky by checking what’s inside them.
Same goes for the parent elements: If it’s not working with right clicking as well as with checking the child elements, you should give the parent element a shot.

There’s no silver bullet for these issues, but you’ll get a feeling for it after some tries ??

Hi Cthulhu1976,

I have used firebug successfully before, but i could not find why:
front-page template shows 2 sidebars on main page 50% each on width

I wanted to take the left sidebar down to 30%ish, and raise it up to a image.

I did find out that both widgets are part of “seconday”, which takes up 90% of page, so when i change .widget-area { width: 30%; }
It bring the right hand side in and squashes it all up.

I tried adding another <div id=”tertiary” class=”widget-area” role=”complementary”>
But it still added sidebar alongside left, still inside original <div>.

If i go and alter main page template to default, i get my sidebars eitherside of image, but image is a lot smaller.

https://www.barrytrainingservices.co.uk/new if you want a look

also, the right sidebar will stay where it is.

This only applies to the main page tho

Ok, just had a quick look at the site.

Did I understand you correctly that you’d like to get this “BOO” box/widget down to about 30%,?

If so, you may check on the following:
the div with id “secondary” serves as “container” for all the widget elements.

Right in there are two more divs.
The left one -containing the “BOO” and menu widget- can be changed by addressing

div.first.front-widgets {
 width: 30%;
}

The right one -containing the contact form- could then be increased by editing

div.second.front-widgets {
width: 70%;
}

I’ve tried it “on the fly” and made screenshot, however it’s no possibility to add files here.

Hey Yaginuk,

have uploaded the screenshot. Which area(s) do you need to shrink?
Screenshot

Hi Cthulhu1976,
Thanks

yes, but no.
I think i need to seperate them.
my aim, to raise the left sidebar on main page.

ideally, i want the boo to come up alongside the rotating banner ( same top height) and the email contact to stay where it is.