Try adding this to the Custom CSS field under Coller Settings > Basic Settings:
#social_icons:after {
content: '888-555-1212';
display: block;
margin-left: 20px;
}
You can adjust the value for margin-left depending upon how much you want to move the phone number under the icons. You can also add other formatting properties, like font-size.
This works great for one line of text–is there a way to add more than one line of text to the header social icon area? I’d like to put our organization’s mailing and email address. It would look nice next to our logo on the left. Thank you!
Use this CSS instead:
#social_icons:after {
content: "888-555-1212 \\00000a 640 Main Street \\00000a El Segundo, CA 90245";
white-space: pre;
display: block;
margin-left: 20px;
}
Note that the CSS editor that Coller uses will change the first backslash to a funny looking character after you Save the options. That’s OK, it will still display properly on your site, but you have to remember to change that funny character back into a backslash next time you go in to make a change to the CSS.
Thank you, your instructions worked perfectly.
One last question: any tricks for getting our email address in this area under our mailing address? I’ve tried different methods, but it won’t appear. I really appreciate your knowledge and helpfulness.
Can’t you just add your e-mail address to the end? The \\00000a separator is the key, it’s the code for a line break.
#social_icons:after {
content: "888-555-1212 \\00000a 640 Main Street \\00000a El Segundo, CA 90245 \\00000a E-mail: huggybear@example.com";
white-space: pre;
display: block;
margin-left: 20px;
}
What if i wanted the email to “mailto” and the phone number to be clickable on mobile?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’d have to ditch the CSS “content” style and write it in HTML instead. It’s probably better if you write in in HTML for everyone anyway.
You’d have to ditch the CSS “content” style and write it in HTML instead. It’s probably better if you write in in HTML for everyone anyway.
Yes, I agree. A child theme can be created and a copy of header.php can be modified. Or if you are lazy like me, you can install a script-enabling plugin like Header and Footer and add the following JQuery:
<script>
jQuery(document).ready(function($){
$("#social_icons").append('<div id="ContactInfo">888-555-1212<br />640 Main Street<br />El Segundo, CA 90245<br /><a href="mailto:huggybear@example.com">huggybear@example.com</a>');
});
</script>
This adds a child DIV to the end of the social media DIV with the contact info. It has a class of ContactInfo in case you want to add styling to it via CSS.
This was SO useful @crouchingbruin, thank you.
If you don’t mind can you assit me a bit more with putting the contact info under the social media buttons using Coller?
My site is: http://www.thriveology123.com
Using your code I was able to get the contact info exactly where I wanted it. Then, when I uploaded my slider images, it no longer went in that area.
I have no idea how to code. Would you mind letting me know how you would code the contact under the social media buttons with the slider images below.
Thanks! Justina
Hi, Justina. OK, whenever you make a change to the theme options (like creating a slider), the CSS editor that comes with the theme makes goofy changes to the special escape characters in the Custom CSS field, so you have to re-copy in the original code before you save whatever other changes you are making.
So what you should do is:
1. Copy the code again from above and paste it into a plain text editor, like Notepad.
2. Make the changes you need to customize it to your own site.
3. Save the file so you can use it again if necessary (i.e, when you make another theme option change).
4. Copy & paste your new code into the Custom CSS field.
5. Save changes.
Note: if you use the JQuery/Javascript option that I posted above, you won’t have to worry about this because that method isn’t affected by the quirky CSS editor.
CrouchingBruin, this WORKED! Wow, thank you so much!!! I am so impressed I could hug you! I have questions regarding other details that I’ll post in the forum. I’d love to hear tips from you is possible. Thanks! 🙂
Thanks Again,
Justina
I copied the jQuery lines into the installed Header and Footer plugin. But where and in which plugin file? And where in thre file?
I havent’t made a child theme, but this isn’t necessary I guess when using the Header and Footer plugin.
Thanks in advance!
In addiction, copy it in one of the plugin files didn’t make it work..
Hi, Dilopo, yes, you do not need to create a child theme. After you install the Header & Footer plugin, go to Settings > Header and Footer from your WordPress dashboard.
Copy the code above into the field that is labeled Code to be added on HEAD section of every page and click the Save button.
It worked! Thanks for all the help, improved my website a lot!
