Archived

This topic is now archived and is closed to further replies.

  • 0

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

Question

Posted · Report post

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

16 answers to this question

Posted · Report post

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)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina, but that didn't work for me. It seems we're sort of following the path of http://www.pagelines.com/forum/topic.php?id=2595. That one is unresolved, so I don't know the solution. What hasn't worked:

body #morefoot h3 {text-align:center;}
or
#morefoot div.widget_text h3

Share this post


Link to post
Share on other sites

Posted · Report post

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".

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

One more solution I can offer is this:

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

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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