Alignment: Title – Tagline – Copyright – Credits…
This tutorial will take you through alternative alignments for the following elements
- Site Title and Tagline
- Copyrights and Credits
- Header HTML Area
Changing alignment of the site Copyright and Credits
By default the Site Copyright is on the left, and the Credits are on the right.
You can hide the “Powered by” section and redesign the Copyright with the box found in:
Customizer: Appearance > Customize > Added Content…> Footer > Site Copyright
Legacy Admin: Appearance > Weaver Xtreme Admin > Main options > Footer > Site Copyright
Below are some CSS Rules to change the various alignments of the two bottom parts.
a- Align both the Copyright and “Powered by” to the right
#site-info {float:none;margin-right:20px;} #site-ig-wrap {text-align:right;}
b- Align them both together on the left
#site-generator {float:none;margin-left:20px;}
c- Align them right but reverse their order
#site-info {float:right;margin-left::20px;}
d- Center the Copyright when “Powered by” is hidden
#site-ig-wrap {text-align:center;} #site-info {float:none;padding-left:0;}
If you need to create more of your own CSS rules, note the following container IDs:
- The container of both copyright and “Powered by” is #site-ig-wrap
- The copyright is #site-info
- The powered by text is #site-generator
Centering Site Title & Tagline
To center them both, first put a zero in:
Customizer: Spacing, width… > Header Area > Site Title and Tagline > Title Position X box AND the Tagline position X box
Legacy Admin: Main options > HEader > Site Title / Tagline > Title Position X box AND the Tagline position X box
Then add the rule below in:
Customizer: CSS…> Header Area> Site Title / Tagline Custom CSS
Legacy Admin: Main Options > Header > Site Title / Tagline > Title tagline Area BG CSS+ box
{text-align:center;}
To center them individually use either of the rule below in the Global Custom CSS Rule Box.
.site-tagline {text-align:center;} .site-title {text-align:center;}
Centering Header HTML content
Add the rule below in:
Customizer: CSS… > Header Area > Header HTML Area Custom CSS
Legacy Admin: Main options > Header > Header HTML > Header HTML BG: CSS+ box
{display:block !important;margin:0 auto;}
Alternatively you can also use
{display:inline;text-align:center;}