Custom Link Employee only 10. Can I add one more?

Dear Sir,

I tried to use the custom link employee and it only appear 10 employee in the page and one more is left behind under Older Post button.

Can I have 11 employee instead of only 10? And can the setting be like this:
3 employees on the top row,
4 employees on the second row
4 employees on the third row
If it is not possible just make it 11 employees in one page without any more button needed.

Thanks before,

Regards,
Nocky

oh by the way my link is: www.newface.gsjabatutulis.com

Sorry, I forgot to add that on my first message

Hi,

Please post a link to a page where you have already added the employees widget, so I can check.

Best Regards,
Csaba

Hi Csaba,

Right now I’m trying to display the employee in one page using custom link. You can see that in http://newface.gsjabatutulis.com/employees/

But before that I put them as a carousel in http://newface.gsjabatutulis.com/about/tim-pastoral/ (err… but now since I’m using the hint from Kharis from message #682291 with this css code now it can display 11 employee (I even didn’t realize it, since I did the CSS after using custom link employees )

Well I will then use the second one (the tim-pastoral page), but can I make the line out like I said before? (3 on the first row, 4 on the second row and 4 on the third row).

I would really appreciate if you can tell me how to make it, but if it is not possible that’s not really a problem for me)

Hi,

Ok, so the 10 employee per page issue has been resolved?

Unfortunately you can only modify how many columns to be in total, so we can’t modify that to 3 in first line and 4 in second… If you want to have 4 columns in total for every line, that can be done, just let me know, so I can give you a working Custom CSS for that.

Best Regards,
Csaba

Yes Csaba, it is resolved for the 10 per page problem.

If you don’t mind to give the CSS code I will consider either 3 or 4. Thanks before :slight_smile:

Best Regards,
Nocky

Hi,

You can make it 4 column with this Custom CSS:

.post-type-archive-employees .team-item {
    width: 25% !important;
}

.archive .team-item:nth-of-type(3n+1) {
    clear: none !important;
}
  • the above CSS is just for the employees page, but you can do that on any page with the employees widget with this Custom CSS:
.team-item {
    width: 25% !important;
}

.team-item:nth-of-type(3n+1) {
    clear: none !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

oh wow… it become so tiny now… Is that because I already use this css for pagination and also the js script then combine with the new css?

this css for pagination:

.roll-team .owl-wrapper{
max-width: 100% !important;
transition: none !important;
transform: none !important;
}

.roll-team .owl-controls{
display: none !important;
}

and this is the js script:

/**

  • Javascript-Equal-Height-Responsive-Rows
  • https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
    */
    (function($){‘use strict’;$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css(‘box-sizing’)===‘border-box’)||($element.css(’-moz-box-sizing’)===‘border-box’);if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css(‘height’,Math.max.apply(window,heights)+‘px’);return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(’:visible’);$tiles.css(‘height’,‘auto’);for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    row.equalHeight();}}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(’:visible’);$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var this=this;var event_namespace=’.grids’+grids_event_uid;_this.data(‘grids-event-namespace’,event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind(‘resize’+event_namespace+’ load’+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css(‘height’,‘auto’);$(window).unbind(_this.data(‘grids-event-namespace’));return this;};})(window.jQuery);

;(function($) {

‘use strict’

$(window).on(‘load resize’, function() {

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

    $('.roll-team .owl-item').responsiveEqualHeightGrid();
    
 }

});

})(jQuery);

Regards,
Nocky

ps:
will anything I add to the additional CSS will be disappear when I upgrade the wordpress? (I’m not using child themes instead I use the additional CSS.

Hi,

What became tiny? Can you, please point out? That have happened only after adding the Custom CSS to make the employees 4columns?

Best Regards,
Csaba

The one with employees widget page after I add this section:

– the above CSS is just for the employees page, but you can do that on any page with the employees widget with this Custom CSS:

.team-item {
width: 25% !important;
}

.team-item:nth-of-type(3n+1) {
clear: none !important;
}

Hi,

Please post a link to the page where the issue have happened and also, please point out what is the issue there, so I can check further why that have happened after adding the Custom CSS.

Best Regards,
Csaba

That was the page I mention which using employees widget.

Best Regards,
Nocky

Hi,

Please change the previous CSS to this then let me know how it works:

.widget_sydney_employees .owl-carousel .owl-item {
    width: 25% !important;
}

Best Regards,
Csaba

Well, they almost perfect but with one little thing: The employee name inside the box with the social media thing seems a little bit too low. Can you help to repair that?

Best regards,
Nocky

ps: How come I can’t start a question about slider position? I typed my question twice and ended with nothing on the forum?

Hi,

You can fix the team details with this Custom CSS:

.roll-team .team-item .team-pop .team-info {
    top: 0 !important;
}

This will remove the space from the top, so it will display more content from below, but all items will show the title from top ( not center ), even those without social links, but unfortunately this is the only way to display social links of team items where there are longer text. Please let me know how it works.

Best Regards,
Csbaa

Well I guess this one is much better than before. Thanksa lot Csaba.

Best Regards,
Nocky

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba