Tagged: Meet the team, social media icons
-
AuthorPosts
-
December 2, 2013 at 9:45 am #195216
Hi There!
I am just getting started making a site with Enfold, and really appreciating the drag-and-drop features! Thanks!
I’m having some challenges in rolling out our employee biographies, and hope you can help:
A: MEET THE TEAM
http://naturaintegrativehealth.com/?page_id=1212(1) Centering Names and Titles
The names and titles under the photos are all left justified – how can I get them centered?(2) Headshots
Any way to round the corners?(3) Social Media Links
Instead of scrolling over the employees’ faces, is there a tidy way to just have the icons below the image, as with this demo (scroll down to “meet the team”): http://themeforest.net/item/jupiter-multipurpose-responsive-theme/full_screen_preview/5177775B: PRACTITIONER BIOGRAPHIES
http://naturaintegrativehealth.com/?page_id=2397
http://naturaintegrativehealth.com/?page_id=2406
http://naturaintegrativehealth.com/?page_id=2408(1) I used the Team Member builder to make the bios. But it looks a little “basic” to have the photo centered up top. Is there any way to make it a little more streamlined, with the photo off to the side?
Example: http://themeforest.net/item/jupiter-multipurpose-responsive-theme/full_screen_preview/5177775(2) Headshots
Again, any way to round the corners?(3) Social Media Links
Again, instead of scrolling over the employees’ faces, is there a tidy way to just have the icons below the image?theme/full_screen_preview/5177775I really appreciate the guidance and support, thanks so much for your time. This is the first website I’ve built, so idiot-proof instructions are much appreciated :-)
Cheers!
December 2, 2013 at 4:14 pm #195300Hi NaturaIntegrativeMedicine!
Please add following codes to Quick CSS in Enfold theme options under Styling tab
A-1).team-member-name, .team-member-job-title { text-align: center; }
2)You should add square images to make it function properly
.avia-team-member .team-social, .team-img-container { border-radius: 200px; }
3)
.team-social-inner { top: 87%; }
B-1)
.team-img-container { width: 37%; float: left; margin-right: 20px; } .team-member-description { width: 60%; float: left; }
2) See A-2
3) See A-3Regards,
YigitDecember 4, 2013 at 9:05 am #196002Hi Yigit,
Thanks for your help.
I copied and pasted your codes into Quick CSS under “styling” under “theme options” in my enfold theme. I tried them one at a time as well as all at once, but none of them seemed to change anything.
Could we try again?
Thanks,
EricaDecember 4, 2013 at 4:43 pm #196210Hi!
Please flush browser cache and refresh your page a few times. You can try adding the same code in Custom.css file inside Enfold/css folder
Regards,
YigitDecember 7, 2013 at 3:21 am #197202Hi Yigit,
Thanks for all your help! We’re getting there!So… When I added all the CSS you suggested, it applied the same change everywhere. Eg: Photo off to the left for both the “meet the team” images as well as the “dr. so-and-so” pages. We only want it off to the left for the “dr. so-and-so” pages. Ditto with centering the person’s name.
So, to reiterate…
This page looks good:
http://naturaintegrativehealth.com/?page_id=1212This page needs to have the image moved to the LEFT and the name likewise aligned to the LEFT:
http://naturaintegrativehealth.com/?page_id=2397
But I do NOT want those changes made to the “meet the team” page.Make sense?
Any way to isolate the CSS to only apply to the full team member bios vs. the “meet the team” overview page?Really appreciate your insights,
EricaDecember 8, 2013 at 12:44 am #197488Hey!
Have you tried prefixing the page id before the CSS rule?
.page-id-1212 .team-member-name, .team-member-job-title { text-align: center; }
Regards,
Josue -
AuthorPosts
- The topic ‘Centering names on "meet the team"’ is closed to new replies.