How to center copyright notice after footer
-
Hi,
I just added a copyright notice after the ‘blog at wordpress’ notice in the footer of my site, but can’t seem to center it. At the moment it is left aligned.
The code I used is:
#footer:after {
content: ” Copyright 2012-2014 damienmolony.org All Rights Reserved.”;
color: #ffffff;
text-align: center;
text-decoration: bold;
}The color change is working but the text-align and text-decoration are not.
Any help gratefully received, thanks!
Damien Molony Forum
The blog I need help with is: (visible only to logged in users)
-
Hi Damien, try the following instead of what you have now. Note I have font-weight instead of text-decoration for the bold declaration, and I’ve also switched the selector so that the text can be centered.
#footer #copyright div.container:after{ background-color: #111131; content:"Copyright 2012-2014 damienmolony.org All Rights Reserved."; color:#FFFFFF; text-align:center; font-weight:bold; } .site-footer { padding-bottom: 30px }If you wish to center the WordPress.com footer credits as well, add the following.
.copytext { float: none; text-align: center } -
Hi thesacredpath
thanks for yor reply.
I tried your suggestion, which added a thin extra blue container at the bottom underneath the existing footer, but no text showed up. I have left it like that so you can see what I mean.
Thanks for your continued assistance,
DMF
-
Hmmm, that worked for me when I did it, but it isn’t working now. This is rather “hack-ish,” but will get you there.
#footer:after { color: #FFFFFF; content: "Copyright 2012-2014 damienmolony.org All Rights Reserved."; font-weight: 700; position: relative; left: 500px; padding-bottom: 30px; } -
Ok, another couple modifications. The second rule is the one that centers the existing footer credits, which you can remove if you do not want to do that, and I made a slight adjustment to the left value.
#footer:after { color: #FFFFFF; content: "Copyright 2012-2014 damienmolony.org All Rights Reserved."; font-weight: 700; position: relative; left: 520px; } .copytext { text-align: center; float: none; } #footer { padding-bottom: 30px; } -
Hi,
thank you for the help sacredpath,
I tried both your suggestions, but the copyright line looks oddly slightly right of center. The blog at wordpress line does look centered however. I have left your second suggestion up so you can see what I mean.thanks
-
You know, none of the normal tricks to center stuff, such as “auto” left and right margins and text-align: center; are working in this theme. How about we left align your copyright and right align the footer credits, both on the same line? Take a look with the following.
.copytext:before { color: #FFFFFF; content: "Copyright 2012-2014 damienmolony.org All Rights Reserved."; font-weight: 700; float: left; } .copytext { width: 960px; text-align: right; } #footer { padding-bottom: 20px; } -
Yes, I noticed that! Is that something to do with any previous customizations I have made?
Okay, I have tried (and saved) your latest suggestion and the copyright notice is not visible. …
-
Hi, I’m seeing your copyright notice in Chrome, Safari and Firefox. If you are not seeing it still, can you try clearing your browser cache and then force reloading your site?
-
-
Excellent, I see it now too.
Thank you!
It is a shame we cannot get the centering to work but this is a good compromise.
Thanks so much for your time and help thesacredpath.
DMF
-
You are welcome, and I haven’t give up on the centering. I don’t like being stumped by a theme. :)
-
Okay great!
Sorry for delay, time zones being what they are and everything.
It does seem odd and centering must be doable.
I switched this topic to resolved.. shall I unresolve it again? Maybe the theme maker can advise?
DMF
-
Let me work on it a little more and if I can’t figure it out, I’ll ask one of my team mates to take a look and see if she can figure out what I’m missing.
-
In order to center a block element, you should remove floats.
Try replacing the other examples from above with this:
.copytext { float: none; line-height: 1.6em; text-align: center; } .copytext:before { color: #fff; content:"Copyright 2012-2014 The Damien Molony Forum All Rights Reserved."; display: block; font-weight: 900; } -
I know you are trying to do this “after” the footer – but I solved the problem by just putting the copywrite notice “before” the footer. This was fine for me – maybe fine for you as well.
.footer:before { content: "Copyright 2013-2014 CloudPremise LLC All Rights Reserved."; } -
@asugreg2, thanks for chiming in! I appreciate that. :)
I tested your example, and it didn’t work for me on the Triton Lite demo site. You might have been using it on a different theme. There are two main problems: the selector should start with “#” and not “.” because footer is an id value not a class value and you actually need to go in one step further to one of the divs inside the #footer container or the text will appear above the footer widgets and look out of place.
-
designsimply and asugreg2, thank you both for adding your suggestions , much appreciated.
designsimply, yours worked like a charm. thanks so much!
Grateful to all who jumped in with advice on this one, I hope others with this theme find it helpful too.
Cheers! :)
DMF
-
- The topic ‘How to center copyright notice after footer’ is closed to new replies.
WordPress.com Forums 