Hi guys, i'm building a site for a friend and I am having a spot of bother. The site is going to be for employment and recruitment and untill she gets enough jobs to advertise for heself she is using Indeed.com to populate the site job wise. As she only has a few jobs to advertise so far I have added a new widget area under the menu bar in which I am going to put the category widget with a drop down box and will put the few jobs she has in as categorys and advertise them as featured jobs of the week.
It is a multisite and i have set up a subdomain to work on styling which is http://test.perfectcandidatejobs.co.uk if you look at it you will see the new widget area but I would like to have the title centered like it is in the sidebar widgets but can't figure out how to do this.

Also is it possible to keep the width of the green background of the widget but have the dropdown box the same width as the center column and have the "select category" text of the box centered too?

If anyone can answer this could you please elaborate in the answer as I am new to this sort of thing and have little to no knowledge of coding but can follow instuctions very well (just ask the wife).

I'm using wp 3.3.1 and Atahualpa 3.7.3

Thanks in advance
Mitch

this is where a code inspector like FireBug in FireFox comes in handy. Here is teh meaningful part of the source

<div id="my_new_widget_area" class="bfa_widget_area">
<div id="categories-2" class="widget widget_categories">
<div class="widget-title">
<h3>Featured Jobs of the week</h3>
</div>

so you just need to create a CSS Selector, use the rule 'text-align: center;', and add it to the 'CSS Insert' option

Hi and thanks for the quick reply but I need a bit more info if you can please.
I found the css inserts section in the theme options and it already had some stuff in so i just put the code in and add the bit like you said but obviously I have done it wrong because it isn't working, like I said i have little to no knowledge of coding, here is what i did:

h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
h2 { font-size: 28px; line-height: 1.3; margin: 1em 0 .2em; }
h3 { font-size: 24px; line-height: 1.3; margin: 1em 0 .2em; }
h4 { font-size: 19px; margin: 1.33em 0 .2em; }
h5 { font-size: 1.3em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 1.15em; margin: 1.67em 0; font-weight: bold; }
<div id="my_new_widget_area" class="bfa_widget_area">
<div id="categories-2" class="widget widget_categories">
<div class="widget-title">
<h3>Featured Jobs of the week</h3>
'text-align: center;',
</div>

The h1-6 bits were already in there. What did I do wrong please.
Thanks again for your time and effort
Mitch.

What you did wrong is you inserted HTML not CSS. You should take a quick tutorial of CSS so when you want to muck you will know what to do. Http://htmldog.com has a good tutorial

CSS is made up of a selector (the path of element names and or ID's or classes assigned to the elements) and rules ( like 'text-align: center;'). The rules are enclosed with the squiggle brackets {} and each rule ends with a semicolon (.

So in the case below, the first selector is an 'H1' and the rules follow, so every H1 (that doesn't have a more specific selector) will get a font size of 34px and a line height of 1.2 etc, etc

So take the tutorial and with this little suggestion, you should be able to figure it out.

Oh yeah, in the selectors, IDs always start with a pound sign (#) and classes start with a period (.)

Thanks for the info, i'll go check it out now.

Thanks for that link, some great info on there.

I have now managed to center the title but would still like to shorten the category drop down box so that it is the same width as the center colum not the width of the page and have the text in the drop down dox centered too, is this possible and if so where should i look for the info on how to do it please.
Again thanks in advance,
Mitch

you would need to find the selector and add something like

    margin-left: 200px;
    text-align: center;
    width: 60%;

as the rules.

This is where you use FireBug to examine things.

OK, I'm slowly getting the hang of this now and have located it with firebug and got this:

<div id="my_new_widget_area" class="bfa_widget_area">
<div id="categories-3" class="widget widget_categories">
<div class="widget-title">
<h3>Featured Jobs of the week</h3>
</div>
<select id="cat" class="postform" name="cat">
<option value="-1">Select Category</option>
<option class="level-0" value="4">Hair &amp; Beauty</option>
</select>

Now do I edit it with firebug because i tried another css insert using:
cat { margin-left: 200px; text-align: center; width: 60%; } and
id= cat { margin-left: 200px; text-align: center; width: 60%; } and
id= "cat" { margin-left: 200px; text-align: center; width: 60%; }
Which as you probably know havn't worked, sorry for being a pain and thanks again for your help and support.
Mitch

Remember the first part of a CSS statement is the selector. The selector is made up of combinations of 'element#id' and/or 'element.class'. So your statement

cat { margin-left: 200px; text-align: center; width: 60%; }

says "apply these rules to the HTML element <cat>'.

Now the only where I see 'cat' in you example is in the

<select id="cat" class="postform" name="cat">

The <select> is the element and you have an ID of 'cat' - remember ID's must always be prefixed with a #, so knowing this, how to you code the seector?