Jump to content
Sign in to follow this  
nrbeatty

Center Titles of Footer Left/Middle/Right [WHP]

Recommended Posts

nrbeatty    0
nrbeatty

Hi guys, I'm trying center the titles of my 3 footer widgets. My attempt was not successful:

body #morefoot h3 {text-align:center;}

Any thoughts? temp Link

Share this post


Link to post
Share on other sites
catrina    103
catrina

Hi, The

body #morefoot h3
tag you are using to center your titles should be replaced with:
#morefoot div.widget_text h3

(Of course, place this in the Custom Code section of your Theme Options)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catrina    103
catrina

Hm, I think maybe something in another stylesheet is overriding what's being put in the Custom Code box. Perhaps the best solution is to go into your CSS files and find (cmd or ctrl+F) something like

#morefoot
with
h3
to see if there is any styling that is causing the problem. If you do find something, then you could just add
text-align: center;
or if there's a text-align tag there already but it says
text-align: left;

, then change "left" to "center".


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

There are 3 references to #morefoot in theme.css:

#morefoot #searchform {
				float: left;
				margin-bottom: 1em;
				width:270px;
			}
	#morefoot #s {
					width:220px;
				}
#morefoot .widget {border: none;}
I tried
float: center
instead of left but it didn't work. I also tried,
#morefoot #searchform {
				float: left;
				text-align: center;
				margin-bottom: 1em;
				width:270px;

but no luck.

Share this post


Link to post
Share on other sites
catrina    103
catrina

One more solution I can offer is this:

#morefootbg div.fix h3 {text-align: center;}

It's similar to the first, but tweaked slightly.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

I put

http://aocpmr.org/?wpjf3_mr_temp_access_key=HNMcunO8OqFWP9OLT7hv

in Custom CSS (not theme.css) and it didn't work.

Share this post


Link to post
Share on other sites
catrina    103
catrina

Wow, that's quite strange. I'm testing these solutions out on the WHP theme and they are working, but I'm not sure why they wouldn't work out for you. Here's one last solution that should definitely work:

#morefoot div.wcontain h3 {text-align: center;}

Please place this in the Custom Code section.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

I did, and it didn't center the titles. Are you saying that when you do all of these things- it works for you? This is my current CSS rules:

#cred{display:none}
	#featurenav a{padding:7px 13px 7px 13px !important}
	#nav li.home-icon a {
	    background:URL('http://aocpmr.org/wp-content/uploads/2010/09/home-icon-WHP.png') no-repeat center center;
	    text-indent:-2000px;
	    width:50px;
	    }
	#nav li.home-icon a:hover {
	    background:URL('http://aocpmr.org/wp-content/uploads/2010/09/home-icon-WHP-flip.png') no-repeat center center;
	    text-indent:-2000px;
	    width:50px;
	    }
	    width:50px;
	    }
	#morefoot div.wcontain h3 {text-align: center;}

Is there something overriding something else in all of this, or should I go through the whole process of deactivating all plug-ins, etc. to figure this out. I thouht this was going to to be the simplest topic I ever started- centering a title, but it's not so much!

Share this post


Link to post
Share on other sites
catrina    103
catrina

Yes, all of the solutions I've tried worked out, but I'm not sure why it's not working for you. Perhaps it has to do with your browser (I'm using the latest version of Firefox). Go ahead and try deactivating the plugins to see if that makes a difference.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

I've deactivated my plugins and gone through all the CSS options above. I'm using the latest versions of Firefox and Safari. The titles to the 3-widget sidebar are not centering.

Share this post


Link to post
Share on other sites
catrina    103
catrina

It seemed so simple in the beginning! Since I'm not sure what other possible re-stylings can be done other than the ones already mentioned, I think it's best if you bump this topic so that someone else can offer other possible solutions for this problem. More than likely, there is probably something in there that I missed.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

I thought I'd step in and help out, but it looks like those headers are centered now. Nick, lemme know if you need more help.

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

No, they're not. I'm talking about the titles of the 3-widget footer (Advocacy; Medical Education; Research...). I've centered the images because that's just in the text widget, but I do not know what code to edit for your theme to center the titles. temp link

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

Oh right, i was looking at the feature boxes. The more foot area would need this in the custom css ` #morefoot h3 { text-align:center; } ` Using FireBug this correctly changes it, if it doesn't work then you have some weird overriding thing going on that will require a closer look

Share this post


Link to post
Share on other sites
bryan-hadaway    3
bryan-hadaway

The problem lies in the code just before your h3 center code; ` width:50px; } ` Which is incorrect, broken markup. This would likely cause all CSS after it to not work. Try removing that error and check again. Thanks, Bryan

Share this post


Link to post
Share on other sites
nrbeatty    0
nrbeatty

Bryan! That was it! I started to think I was going crazy, but that was it. After deleting that duplication, the 3-widget footer Titles centered with:

 #morefoot div.wcontain h3 {text-align: center;}

I figured something was weird when code in custom.css was working there but not in the CSS Rules box. I just installed FireBug, so maybe I'll get better at that and minimize things like this. Thank you Bryan, Adam, and Catrina!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×