Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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/5177775

    B: 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/5177775

    I 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!

    #195300

    Hi 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-3

    Regards,
    Yigit

    #196002

    Hi 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,
    Erica

    #196210

    Hi!

    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,
    Yigit

    #197202

    Hi 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=1212

    This 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,
    Erica

    #197488

    Hey!

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Centering names on "meet the team"’ is closed to new replies.