Help with employees

tmng · January 26, 2016, 6:47pm

Hi there!

Here is my site.

My question is if your on any of the subpages from “Meet The Team”, the pictures of the employees are really small, can they be bigger? When I’ve made an employee page that shows all employees, the pictures are much bigger so I assume that this has to be possible?

Also on the current employee pictures the Facebook icon gets cut off, how do I fix that?

And how can I show more info below the employee pictures such as email address, phone numbers, and links to other pages?

Thank you!

tmng · January 26, 2016, 6:49pm

Sorry I forgot to link my site!

http://themattnadergroup.com

kharisblank · January 26, 2016, 11:53pm

Hello there,

Thank you for getting in touch here.

> … the pictures of the employees are really small, can they be bigger?

Yes, they can. Try to do the following.

Edit your respective “Sydney FP: Employees” widget, then apply a custom class name. Widget Styles > Attributes > Enter singular-employee class name in the field that says “Widget Class”
Update page
Install and activate Simple Custom CSS plugin
Go to Appearance > Custom CSS. Then paste the following code in the provided CSS editor box

.singular-employee .owl-item{
  width: 100% !important;
}

Update Custom CSS

> Also on the current employee pictures the Facebook icon gets cut off, how do I fix that?

I thought it would be displayed correctly once the employee container size get scaled up. Make sure the Facebook field in the “Employee info” box isn’t empty.

> And how can I show more info below the employee pictures such as email address, phone numbers, and links to other pages?

You can insert those data by adding a Text or SiteOrigin Editor widget underneath the Employee widget you have had already.

I hope this reply helps.

Regards,
Kharis

tmng · January 27, 2016, 3:43am

Hi! Thank you for your response!

Im slightly confused with the first few steps. Im working on my child theme, and I have a copy of the fp-employees file in my child theme widgets folder… is this the file I am suppose to be editing in steps 1 & 2?

I don’t think I know where/how to do this:
Widget Styles > Attributes > Enter singular-employee class name in the field that says “Widget Class”

Is it possible to explain a little more?

And do I have to do step 3 since I am working on my child theme?

Thank you again so much for all of your help!!!

kharisblank · January 27, 2016, 4:40am

Hello there,

I would like to apologize in advance for I couldn’t explain myself well.

You don’t have to edit the theme’s file. For the sake of visual, could you please see this screencast https://cloudup.com/cNm1kj3Regd?

> And do I have to do step 3 since I am working on my child theme?

If you are working in a child theme, you can enter the custom CSS code in your child theme’s style.css file.

Regards,
Kharis

tmng · January 27, 2016, 2:20pm

Thank you so much for your screenshot guidance! It worked perfectly! I ended up changing the 100% to 60% which got me the perfect size Thank you!

Now I have another part of this for your help please… if you see on my page: http://themattnadergroup.com/meet-the-team/matt-nader/

The text NMLS ID# is showing to the left, how can I center that along with an email, phone number, and another link… center it all below the picture? I had to set the picture to “center” in the theme because if I didn’t then the header was to the right and it looked weird.

Also, everything in the area is pushed to the right… do you see how everything is not centered? That there is more space on the left than on the right? How do I fix that? It seems to be on every page.

Thanks again so much for all of your help!!

kharisblank · January 27, 2016, 3:37pm

Hello there,

To make the Text widget content center aligned, enter the following style rule in the CSS Styles box. Edit widget > Widget Styles > Attributes > CSS Styles https://cloudup.com/cG12wG0WGOb

text-align: center;

> Also, everything in the area is pushed to the right…

To fix this issue, could you please try to change the previous code I provided to the following?

@media only screen and (min-width: 601px){
  .singular-employee .owl-item{
    width: 100% !important;
  }
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

tmng · January 27, 2016, 3:57pm

Hi there!

So the text align worked perfectly!

I put in the new code that you sent, but made the width: 60% !important; instead of 100% because when I type in 100, the picture doesn’t fill the box and there ends up being white borders on the left and right of the picture. So when I write it at 60%, the size of the picture is perfect!

So unfortunately the space on the sides of the row are still off. With all of the space being on the left side and the right side having very little space.

Here is the page:
http://themattnadergroup.com/meet-the-team/matt-nader/

Thank you for all of your help on this!

kharisblank · January 27, 2016, 11:44pm

Hello there,

Thank you for updating me.

It seems your site is being under construction mode. It prevents me to have a look at the actual page.

If you don’t mind, could you give me a temporary access to your site admin area so I could it? You can send the login credentials to my email kharisblank at gmail dotcom with the link to this topic.

Regards,
Kharis

tmng · January 28, 2016, 2:49am

Hi! Sorry about that, I took off the maintenance mode now.

Here is the page link again.

http://themattnadergroup.com/meet-the-team/matt-nader/

Thank you so much!!

kharisblank · January 28, 2016, 5:58am

Hello there,

To balance the columns padding, you might need to manually set the columns width https://cloudup.com/c2BL5u2LFwx.

Then you might need to add extra padding to the right content https://cloudup.com/cn4bhGFZpd7.

Let me know how it helps.

Regards,
Kharis

thebiskut · April 14, 2017, 9:43am

hello sir,

how can i add email address for the employee at the same page with facebook, twitter, google plus etc.

tq.

kharisblank · April 15, 2017, 12:58am

Hello @thebiskut,

There is no an option to display employee’s email by default. To add it, naturally we need to edit PHP code of the theme’s core code to supply the email address field and fetch its value in a form of clickable icon like the existing social icons like Twitter and Facebook. Fortunately, there is an easier way which shouldn’t require you to touch any single PHP code of the theme. You can use jQuery approach as instructed below:

Install and activate the TC Custom JavaScript plugin
Go To Appearance > Custom JavaScript
Paste the following code into the provided box


;(function($) {

   'use strict'

   if( $('.roll-team').length ) {

      $('.roll-team .team-item').each(function(i){

          var n             = i+1;
          var emailAddress  = '';

          if( n == 1 ){ // Email address for employee 1
            emailAddress = 'youremployee1@gmail.com';
          }

          if( n == 2 ){ // Email address for employee 2
            emailAddress = 'youremployee2@gmail.com';
          }

          if( n == 3 ){ // Email address for employee 3
            emailAddress = 'youremployee3@gmail.com';
          }          

          if( n == 4 ){ // Email address for employee 4
            emailAddress = 'youremployee4@gmail.com';
          }                    

          if( n == 5 ){ // Email address for employee 5
            emailAddress = 'youremployee5@gmail.com';
          }   

          if( n == 6 ){ // Email address for employee 6
            emailAddress = 'youremployee6@gmail.com';
          }   

          $(this).find('.team-social').prepend('<li><a class="email" target="_blank" href="mailto:'+emailAddress+'"><i class="fa fa-envelope"></i></a></li>');
          
        
      });
   
   }

})(jQuery);

In the code above, adjust your employee email address defined in these lines:


if( n == 1 ){ // Email address for employee 1
  emailAddress = 'youremployee1@gmail.com';
}

Update

Regards,
Kharis

thebiskut · April 26, 2017, 8:12am

hi kharis,

i already did the step 3 but how can i see the email field?i mean i have done the details using employees page based on each department.

for this code,

if( n == 1 ){ // Email address for employee 1
emailAddress = ‘youremployee1@gmail.com’;
}

did u mean i have to write all the employee email using this code?let say i have 40 staff i have to write all the email at the jQuery following order?

Update:

i already done the coding, but how to make the email address appear for each of the employee?

thank you.

keren-kj · July 17, 2017, 1:37am

Hye, Kharis. I wanna ask about how to improve or make my website more happening. I am trying to edit the contact us page, because it look too simple. Btw, the theme that I uses now for the website is Sdyney theme.

kharisblank · July 17, 2017, 7:24am

Hello Keren,

I’d like to help. But, please explain in details of what exactly you want to achieve.

Regards,
Kharis

blueplanetism · November 30, 2018, 2:37pm

Hi, I would like to disable the pop-up (blue) in the employee section. Is there a custom css i can use for this? thank you so much in advance for your help.

Here’s the site: http://wp.solargenossenschaft-essen.de/

kharisblank · November 30, 2018, 6:15pm

Hello there,

Try this CSS code:

.roll-team .pop-overlay {
  display: none;
}

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

blueplanetism · November 30, 2018, 6:28pm

That was quick and it worked. Thank you!

kharisblank · December 1, 2018, 12:02am

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis