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 »

Centering title on new wiget area:


  #1  
Old Apr 28, 2012, 06:24 AM
monkeymitch1
 
8 posts · Apr 2012
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
  #2  
Old Apr 28, 2012, 07:22 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
this is where a code inspector like FireBug in FireFox comes in handy. Here is teh meaningful part of the source
HTML Code:
<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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 28, 2012, 07:51 AM
monkeymitch1
 
8 posts · Apr 2012
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.
  #4  
Old Apr 28, 2012, 08:55 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 (.)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Apr 28, 2012, 09:06 AM
monkeymitch1
 
8 posts · Apr 2012
Thanks for the info, i'll go check it out now.
  #6  
Old Apr 30, 2012, 01:00 AM
monkeymitch1
 
8 posts · Apr 2012
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
  #7  
Old Apr 30, 2012, 04:09 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you would need to find the selector and add something like
HTML Code:
    margin-left: 200px;
    text-align: center;
    width: 60%;
as the rules.

This is where you use FireBug to examine things.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old May 1, 2012, 12:48 AM
monkeymitch1
 
8 posts · Apr 2012
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
  #9  
Old May 1, 2012, 05:08 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
HTML Code:
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
HTML Code:
<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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 1, 2012 at 08:27 AM.

Bookmarks

Tags
new widget area, new widget css, new widget styling, widgets

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Centering Text in Title CurtisCandy Center area post/pages 4 Aug 3, 2010 06:36 PM
Suddenly, new widget area not centering paulae Header configuration & styling 2 Nov 4, 2009 02:24 PM
Trouble with centering header area - page & category menus oddree Forum How-To 2 Jul 22, 2009 01:21 PM
Centering Title and tagline PhillM Header configuration & styling 1 Jun 14, 2009 03:39 PM
Archives wiget, thndrwhls Sidebars & Widgets 1 Apr 2, 2009 05:23 AM


All times are GMT -6. The time now is 04:54 AM.


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