EPL Listing Widget Grid Layout

Viewing 4 posts - 1 through 4 (of 4 total)

These forums are closed to new replies / tickets. Please open a support ticket from our new Support page.

  • Author
    Posts
  • #10929
    Gareth Evans
    Spectator

    Is it possible to change the Listing widget to display in a 3/4 column grid style view, instead of the ‘list’, similar to the image attached

    Attachments:
    You must be logged in to view attached files.
    #10962
    Merv Barrett
    Keymaster

    This configuration depends on your theme. With the widget there is a Skip option which means if your theme can have 3 widgets across then you can insert 3 Listing widgets and set them to one each and set the skip option on the 2nd widget to 1 and the third widget to 2.

    However if your theme can’t place three horizontal widgets you can use one widget to display 3 and then use CSS to make them wrap horizontally.

    Another option is to use the [listing] shortcode and again use CSS to wrap them as needed.

    #17228
    Gareth Evans
    Spectator

    Hi Merv,
    I’m sure I made a three column grid a while back in a test version of my site- I cant remember for the life of me how to do it correctly!

    Could you point me in the right direction?

    I can get the widget area to 1/3 col easily but its just making the 3 listings content into 3 columns is proving more tricky…

    #17320
    Merv Barrett
    Keymaster

    If you have a single widget area that is full width add a single listing widget with 3 properties.

    ————————————–
    SINGLE WIDGET with 3 listings
    LISTING 1
    LISTING 2
    LISTING 3
    ————————————–

    then add below to your theme CSS to convert to

    LISTING 1 | LISTING 2 | LISTING 3

    .widget_epl_recent_property .epl-widget{
    	width: 33%;
    	float: left;
    }
    .widget_epl_recent_property .epl-widget .entry-header,
    .widget_epl_recent_property .epl-widget .entry-content{
    	margin-right: 1em;
    }

    An alternative is to add three separate widgets to that widget area but you will have to adjust the CSS class as the CSS example widget background wrapper numbers will be different on your site.

    ————————————–
    THREE Listing WIDGET with 1 listing each
    LISTING Widget 1 (For Sale)
    LISTING Widget 2 (For Rent)
    LISTING Widget 3 (Land)
    ————————————–

    #epl_recent_property-6-background-wrapper,
    #epl_recent_property-4-background-wrapper,
    #epl_recent_property-5-background-wrapper {
    	width: 33%;
    	float: left;
    }
    
    #epl_recent_property-6-background-wrapper .epl-widget,
    #epl_recent_property-4-background-wrapper .epl-widget,
    #epl_recent_property-5-background-wrapper .epl-widget {
    	margin-right: 1em;
    }

These forums are closed to new replies / tickets. Please open a support ticket from our new Support page.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Priority Support’ is closed to new topics and replies.