A quick and easy way to custom align the share button
Overview
As of this writing, the version of Divi’s Monarch plugin (1.4.13) does not include a way to align the Inline share buttons centered on the targeted page or post (among others) where its instance will be shown. Some custom CSS lines of codes help enable that missing alignment option.
Please note: Some of the links below are affiliate links, meaning, at no additional cost to you, I will earn a commission if you click through and make a purchase.
Topic Keywords:
- Inline Share Button
- Monarch Plugin
- Divi Theme
- Cascading Style Sheets (CSS)
- Child Theme
- Theme Customizer
Down with the Details
The default configuration of Monarch’s inline share button is set to align left as shown on the following screenshot.
To adjust horizontal alignment and center it on the layout, add the following CSS codes either on your child theme’s style.css OR via the WordPress Dashboard > Divi > Theme Customizer > Additional CSS as shown on the screenshot right after the code snippets below.
css
width: 23.5%;
display: inline-block;
float: none;
}
.et_monarch .et_social_networks .et_social_icons_container {
padding-top: 50px !important;
margin-top:30px !important;
}
ul.et_social_icons_container:before {
content: “SHARE THIS”;
color: #048bfe;
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: ‘Raleway,Arial’;
font-size: x-large;
font-weight: 300;
}
Check out how it was applied right below this post and at the lower area of other pages on our website. Please share if you find this helpful.
About this Post
The topic posted above is the result of some work done for clients in the past that required customizations. The codes were discovered after doing source code inspections, trying out various CSS code snippets and coordination with Elegantthemes – the creators of Monarch Plugin and Divi Theme – for further advice whenever necessary.