Employees Section

One of the reasons of chosing this theme was because of the way the Employees section looked like (http://demo.athemes.com/themes/?theme=Sydney)

However after installing the theme and installing the plugin, adding some employees I noticed that it is completely different than the example demo.

The images aren’t square and there’s a hover for some reason were only there the social icons appear, and the fact that I can’t enter a portfolio/website link is also a bit of a shame.

I also don’t seem to find a way to properly order them on how want them to be placed, so any suggestions in the placement would also be nice!

I’ve made use of the Sitebuilder widgets to create the page so I’m not sure if I did something wrong or it’s some kind of setting I’m missing, but I’d like to have a similar appearance to the currently demo version of sydney.

Thanks for any support in advance.

Best regards,
Rafaël De Jongh

I also am having issues with the Sydney Theme Employee widget. Upon first intalling, I was able to hover over each employee’s photo and their social media links would appear. When I woke up this morning, the hover feature is no longer there, just each employee’s photo. How do I get this social media hover feature back? I have tried deleteing and adding the row and widget several times. I even went in and redid all employee pages. My site is bubsociety.com

Thank you!

Whoops, thanks so much for any information!

I also am having issues with the Sydney Theme Employee widget. Upon first installing, I was able to hover over each employee’s photo and their social media links would appear. When I woke up this morning, the hover feature is no longer there, just each employee’s photo. How do I get this social media hover feature back? I have tried deleting and adding the row and widget several times. I even went in and redid all employee pages. My site is bubsociety.com

Thank you!

That’s not really the problem I’m experiancing, it’s that I do not want to have the hover but in fact want it like the demo example from: http://demo.athemes.com/sydney/employees/

I understand. Hopefully we will both get our questions answered!

Yea indeed, while I pretty much got it “fixed” by doing various code edits, I do wonder if there is an actual setting or easier way to achieve the same result!

Hello Rafaël,

I will be glad to help you, but can you please provide a link to your website to let me inspect it?

@bub society, can you please try to deactivate all your plugins except recommended and see if it helps?

Kind Regards, Roman.

Hey there Roma,

Thanks for the possible support, you can view the website here: http://www.jojoproductions.net/over-ons/

I’ve currently reverted my modifications to let you show what the default thing is, which of course is different than on the demo website.

I did notice that the demo version doesn’t make use of the widget as the whole structure is different!

The Demo site makes use of:

<!-- /.team-item -->
<div class="team-item col-md-4">
  <div class="team-inner">
    <div class="avatar">
      <img width="400" height="400" src="http://demo.athemes.com/sydney/wp-content/uploads/sites/35/2015/03/4.jpg" class="attachment-employees-image size-employees-image wp-post-image" alt="4" srcset="http://demo.athemes.com/sydney/wp-content/uploads/sites/35/2015/03/4.jpg 400w, http://demo.athemes.com/sydney/wp-content/uploads/sites/35/2015/03/4-150x150.jpg 150w, http://demo.athemes.com/sydney/wp-content/uploads/sites/35/2015/03/4-300x300.jpg 300w, http://demo.athemes.com/sydney/wp-content/uploads/sites/35/2015/03/4-180x180.jpg 180w"
      sizes="(max-width: 400px) 100vw, 400px" /> </div>
  </div>
  <div class="team-content">
    <div class="name">
      John Stevens </div>
    <div class="pos">Accountant</div>
    <ul class="team-social">
      <li><a class="facebook" href="http://facebook.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
      <li><a class="twitter" href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
      <li><a class="google" href="http://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a></li>
    </ul>
  </div>
</div>
<!-- /.team-item -->

While the widget and the documentation tells us to make use of the widget which results in:

<div class="roll-team carousel owl-carousel owl-theme" data-widgetid="employees-widget-0-0-0" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 1480px; left: 0px; display: block;"><div class="owl-item" style="width: 370px;"><div class="team-item">
<div class="team-inner">
<div class="pop-overlay">
<div class="team-pop">
<div class="team-info">
<div class="name">Johannes De Jongh</div>
<div class="pos">DOP, Fotograaf, Grafisch ontwerp, Producer, Regie, Scenario, Visual FX</div>
<ul class="team-social">
<li><a class="facebook" href="https://www.facebook.com/johannes.dejongh" target="_blank"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="avatar">
<img width="550" height="400" src="http://www.jojoproductions.net/wp-content/uploads/2016/07/Johannes-1-550x400.jpg" class="attachment-sydney-medium-thumb size-sydney-medium-thumb wp-post-image" alt="Johannes De Jongh"> </div>
</div>
<div class="team-content">
<div class="name">
Johannes De Jongh </div>
<div class="pos">DOP, Fotograaf, Grafisch ontwerp, Producer, Regie, Scenario, Visual FX</div>
</div>
</div></div><div class="owl-item" style="width: 370px;"><div class="team-item">
<div class="team-inner">
<div class="pop-overlay">
<div class="team-pop">
<div class="team-info">
<div class="name">Britt Gysen</div>
<div class="pos">Fotograaf, Grafisch ontwerp, Producer, Regie, Scenario</div>
<ul class="team-social">
<li><a class="facebook" href="https://www.facebook.com/britt.gysen" target="_blank"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="avatar">
<img width="550" height="400" src="http://www.jojoproductions.net/wp-content/uploads/2016/07/Britt-550x400.jpg" class="attachment-sydney-medium-thumb size-sydney-medium-thumb wp-post-image" alt="Britt Gysen"> </div>
</div>
<div class="team-content">
<div class="name">
Britt Gysen </div>
<div class="pos">Fotograaf, Grafisch ontwerp, Producer, Regie, Scenario</div>
</div>
</div></div></div></div> 
 
<div class="owl-controls clickable" style="display: none;"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div></div></div></div>

Both are for one entree and as you can see it’s completely different, which I personally do not want!
The edits I’ve done mostly fixes it but I’d like to know how that result was made from the demo as well as how you can fix the current situation in terms of (if you scale your viewport/set to mobile) then not all team members are shown but at the bottom a little bulletin point to select which team member you want to see, this is also something I do not want, which also the demo version does not have as all team members are just listed under each other.

As well if there’s a better way to order them, I still can’t find a proper way to move/place the team members on the right place with the widget.

Either way thanks for the assistance!

Best regards,
Rafaël De Jongh

Hello Rafaël,

Employees are ordered by date, newest first. You can change the order of your employees by changing Published date.

Looks like you still have custom styling, for example this:

.roll-team .team-item .team-social {
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

Please try to remove that styling and also try to use square images.

Kind Regards, Roman.

Dear,

Ah okay, that’s going to be a bit troublesome to be honest. It would be great if there was another way that you could sort them, by ID for example?

The custom styling here is irrelevant to be honest, this was done for the alterations and do not have much weight on the other differences.

I’m talking about the various difference between the widget use and the demo use.
As mentioned before, the popup shouldn’t be there, the social media under the name/position and that on mobile viewport that you don’t have those circles to switch between the team members, but have everyone be put under each other.

So is there a proper way to change these things to make it look like the demo version?

Thanks for the help in advance.

Best regards,
Rafaël De Jongh

Further notice: I just added some more team members (we’ve got around 20) and only the 3 first appear in full screen the latter also with that annoying slider kind of option to switch between team members!
This is really something I do not want, all team members should be visible at all times not hidden behind a slider.

So yea for this point how do I fix this, as this is probably the most annoying as of yet!

Hello Rafaël,

I’m really not sure what differences you are referring to. Can you please specify each difference and provide as many details as you can (including screenshots)?

Sydney FP: Employees widget can show employees only in carousel mode.

Kind Regards, Roman.

Then I assume it is not the widget I need but how do I display all the employees then, as mentioned before the code on your demo site (http://demo.athemes.com/sydney/employees/) is different than the widget. So if it’s not the widget how exactly do I list all employees as seen on that link above?

Okay Rafaël,

You are referring to the employees archive page that is controlled by archive-employees.php file.

By the way, Sydney FP: Employees – Type B widget in Sydney Pro theme can list employees.

Kind Regards, Roman.

Oh so the page here: http://demo.athemes.com/sydney/employees/ is the Employees Type B widget only available in the Sydney Pro theme or how do I make that page be linked to the archive-emplyees.php file exactly?

Rafaël,

That page does not contain any widgets. Please read about WordPress Template Hierarchy here to learn how it works.

Currently your website is in Coming Soon mode, so I’m not sure what is exact URL of that archive on your site, but it should be something like http://www.jojoproductions.net/employees/

Please let me know if you need more help.

Kind Regards, Roman.

Dear,

Oh that explains a lot, thanks Roman! Yea it was the /employees/ page I was referring to which was different than when I used the widget, only later I realised the widget is used in the demo on the front page!

As the employees are a form a post type like blogs it should have been more obvious for me to be honest, I think I focused myself too much on the widget to not see the whole picture properly.

With that I guess the page itself couldn’t be renamed to something else like over-ons or team without changing the whole php structure of the page/widget/post type? Then again with the whole search I ended up just editing the widget to fit the requirements so I guess that’s not necessary anymore.

Picture

That said I do need to thank you for the continuous assistance Roman!

You are welcome Rafaël!

Please feel free to ask any other questions that you might have :slight_smile:

Kind Regards, Roman.

I’m sorry…
but i don’t understand…
is there a setting to have employees images more big?
thank you.

Hello @leonardus,

Please create a new topic for your question in order to make it easier to help you.

Kind Regards, Roman.