How to style a craigslist like table layout | Support Questions | Support Forum

A A A

Please consider registering
guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
How to style a craigslist like table layout
October 21, 2014
8:23 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

Hello, we just started experimenting with this plugin and are very impressed by the feature set. We’d like to configure the layout so that the main page shows a grid of ad thumbnails like the recent revision to the craigslist display. Right now we have the “Latest Ads” widget displaying on our homepage. It displays as a single column. If we could get this to display as multiple rows that span the width of the page that would be great. Any suggestions on where to look to configure that?

 

Thanks,
CJ

October 22, 2014
12:10 pm
AWPCP Support
Moderator
Members

Moderators
Forum Posts: 4543
Member Since:
September 4, 2013
sp_UserOfflineSmall Offline

Hi CJ,

I believe custom styling should work on what you need to achieve. Here is an article that would assist you on how to use custom styling with AWPCP http://awpcp.com/forum/faq/how…..ith-awpcp/.

October 22, 2014
2:01 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

Hello,

I understand about adding some additional styles, but I don’t think that will get us where we need to be. We’re using the “Latest Ads” widget on our homepage. The html code in the Ad/Listings section of the Settings doesn’t control that display. How can we directly modify how the Latest Ads widget gets displayed?

Thank You,
CJ

October 23, 2014
12:15 pm
AWPCP Support
Moderator
Members

Moderators
Forum Posts: 4543
Member Since:
September 4, 2013
sp_UserOfflineSmall Offline

Sorry Cj,

I didn’t quite understand the magnitude of what you wanted to do there. For something like that, you’ll need to hack the plugin directly to handle things like that. It’s not a “point you to one file” kind of fix for this, you’ll need to look at the output routines and make layout changes in there to alter the row/column display. It’s something you’ll have to work out on your own. We don’t have the bandwidth to support that level of custom change in the plugin.

October 24, 2014
7:02 pm
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

I just wanted to say I’ve been following this question for a couple days and I can up with one possible solution.  I too am using the widget to display it on the homepage. That isn’t perfect yet, but I thought I would share it.

My theme uses Bootstrap 3 so I added this column class via jQuery:

<script>
jQuery(document).ready(function(){
jQuery(‘.awpcp-listings-widget-item’).addClass(‘col-sm-3’);
});
</script>

With a few CSS changes, 

.awpcplatestthumb {
float: none;
}

.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb a {
width: 100%;
}

.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb a img {
width: 200px;
}

.awpcp-listings-widget-item {
display: inline !important;
}

Now they are in more of a grid view.

And now I just have to figure out a way to alter the thumbnail images to be full width and not distorted.

October 24, 2014
7:56 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

Thanks Demo. I’ve been working on something as well, but I’m going to give your code a try. I’ll post back what I’ve come up with as well.

demo said
I just wanted to say I’ve been following this question for a couple days and I can up with one possible solution.  I too am using the widget to display it on the homepage. That isn’t perfect yet, but I thought I would share it.

My theme uses Bootstrap 3 so I added this column class via jQuery:

<script>
jQuery(document).ready(function(){
jQuery(‘.awpcp-listings-widget-item’).addClass(‘col-sm-3’);
});
</script>

With a few CSS changes, 

.awpcplatestthumb {
float: none;
}

.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb a {
width: 100%;
}

.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb a img {
width: 200px;
}

.awpcp-listings-widget-item {
display: inline !important;
}

Now they are in more of a grid view.

And now I just have to figure out a way to alter the thumbnail images to be full width and not distorted.

October 25, 2014
3:32 am
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

catalano said
Thanks Demo. I’ve been working on something as well, but I’m going to give your code a try. I’ll post back what I’ve come up with as well.

demo said
No problem Catalano. I actually came up with a much better way.  I didn’t realize we have shortcodes to use!  

This code is much better. I have it set up with only 4 images but they’re all in a row, like a grid. And they’re all dynamically linked to their respective page. With the other code I sent, you’ll have trouble with the image cropping. With this Craiglist-like-boxes.jpgImage Enlarger

 

shortcode I think the image cropping is already handled because they are all the same size with the varying image sizes I uploaded.

None of this code has been cleaned up,  but I think it might be a really good start for what you’re looking for.

By the way, just wanted to remind you I’m using the Bootstrap framework in my theme. Hence the col-sm-3. 

I’m calling the shortcode on my homepage with this:

<div class=”col-sm-12″>
     <div class=”row”>
         <?php echo do_shortcode(”); ?>
     </div>
</div>

The CSS:

.fixfloat {
display: none;
}

The jQuery: (removing classes on the individual DIV classes holding the imgs and adding the bootstrap grids)

jQuery(document).ready(function(){
jQuery(‘.awpcp-listings div:first-child’).removeClass(‘displayaditemseven’).addClass(‘col-sm-3’);
jQuery(‘.awpcp-listings div:nth-child(3)’).removeClass(‘displayaditemsodd’).addClass(‘col-sm-3’);
jQuery(‘.awpcp-listings div:nth-child(5)’).removeClass(‘displayaditemseven’).addClass(‘col-sm-3’);

});

I attached a screenshot of the middle of my site (dresses listings). I probably will display a title underneath, but that’s it. I didn’t style it all the way on the last box, but you get the idea. The images all link correctly.

Let me know if you come up with something too! Thanks.

sp_PlupAttachments Attachments
October 25, 2014
2:42 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

That looks like its going to work. I had approached it a little differently just by using css styling. We’re using the ‘latest ads’ widget on our homepage. So here’s a screen shot of how I got it to look:

Image Enlarger

The spacing needs to be adjusted and we’ll probably add the price below the description. But I did this by simply adding these styles to a new stylesheet (awpcp_custom_stylesheet.css) placed directly in the plugins directory:

 

div #awpcp-latest-ads-2.widget-wrapper.widget_awpcp-latest-ads {
float:none;
}
.awpcp-listings-widget-items-list .awpcp-listings-widget-item {
display: inline-block;
}
.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb {
width: auto;
}
.awpcp-listings-widget-items-list .awpcp-listings-widget-item .awpcplatestthumb a {
width: 80%;
}

October 25, 2014
4:38 pm
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

Nicely done! Yeah I would definitely go with your all CSS code if I were not using Bootstrap. MUCH cleaner. I guess I just got lazing with using jQuery for the width and wanted to let Bootstrap align and keep everything responsive. But good job! I’m sure I’m discussion will help a couple people on here :)  

October 25, 2014
5:39 pm
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

Quick question. Are you able to upload images of any sizes to fit into your thumbnail grid? Thanks in advance.

October 25, 2014
6:34 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

demo said

Nicely done! Yeah I would definitely go with your all CSS code if I were not using Bootstrap. MUCH cleaner. I guess I just got lazing with using jQuery for the width and wanted to let Bootstrap align and keep everything responsive. But good job! I’m sure I’m discussion will help a couple people on here :)  

I’m going to hold onto your code for a site that is using bootstrap. I inherited this site, but if I had designed it from scratch I would have built the template using bootstrap.

October 25, 2014
6:36 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

demo said
Quick question. Are you able to upload images of any sizes to fit into your thumbnail grid? Thanks in advance.

I believe so. I haven’t played with the image settings, and I recall when I uploaded the test ads that the images HAD to be at least 640×480. And I know at least one of them is actually a vertical oriented image, so it seems like the thumbnail creation process is working correctly.

October 26, 2014
8:15 pm
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

Ahh ok, great. Yea I think my settings were off in the backend and that’s why I couldn’t get the thumbnails to work maybe.

So I took your advice and went the all CSS way even with the shortcode and it’s much cleaner. But then I decided to take it a little further and created a pretty nice slider with a free flex slider plugin. If you’re interested, check it out.

I just appended this in as the list items of the flexslider. I don’t think the shortcode has a display limit so essentially you could scroll through a long list of posts. All link dynamically to their respective posts. Right now I’m working on getting the title below each one.

I just hid the div with the shortcode in it, and added below.

var thedivs = $(‘.displayaditemseven img, .displayaditemsodd img’);
$.each(thedivs, function(index, value) {
$(‘ul.slides’).append(‘<li><a href=’ + $(this).parent().prop(“href”) + ‘><img src= ‘ + $(this).prop(“src”) + ‘ width=”200″ height=”200″ /></a></li>’ );
});

Turned out pretty nice.

October 26, 2014
8:17 pm
demo
Member
Members
Forum Posts: 8
Member Since:
November 18, 2013
sp_UserOfflineSmall Offline

left-arrow.jpgImage Enlarger

 right-arrow.jpgImage Enlarger

sp_PlupAttachments Attachments
October 27, 2014
1:52 pm
catalano
Member
Members
Forum Posts: 8
Member Since:
October 21, 2014
sp_UserOfflineSmall Offline

I like it. I’ll have to ask the client if they’d want to do something like that. Originally they were going to use the ‘featured ads’ widget on the homepage. But this might be a good idea.

demo said
Ahh ok, great. Yea I think my settings were off in the backend and that’s why I couldn’t get the thumbnails to work maybe.

So I took your advice and went the all CSS way even with the shortcode and it’s much cleaner. But then I decided to take it a little further and created a pretty nice slider with a free flex slider plugin. If you’re interested, check it out.

I just appended this in as the list items of the flexslider. I don’t think the shortcode has a display limit so essentially you could scroll through a long list of posts. All link dynamically to their respective posts. Right now I’m working on getting the title below each one.

I just hid the div with the shortcode in it, and added below.

var thedivs = $(‘.displayaditemseven img, .displayaditemsodd img’);
$.each(thedivs, function(index, value) {
$(‘ul.slides’).append(‘<li><a href=’ + $(this).parent().prop(“href”) + ‘><img src= ‘ + $(this).prop(“src”) + ‘ width=”200″ height=”200″ /></a></li>’ );
});

Turned out pretty nice.

May 14, 2015
8:12 pm
metricgalv
Member
Members
Forum Posts: 3
Member Since:
May 14, 2015
sp_UserOfflineSmall Offline

Hi all,

has anyone got anything like a grid display working at all? I would love the Browse and Recent ads to be displayed in a grid, the list option is next to useless for the type of sites I want to use this for. If anyone is able to style the listing page into a grid layout could they let me know. I have bought a couple of premium modules, but without a decent listing page it really is not much use to me. I am happy to pay for assistance. Thanks!

May 14, 2015
8:13 pm
metricgalv
Member
Members
Forum Posts: 3
Member Since:
May 14, 2015
sp_UserOfflineSmall Offline

weirdly enough, i am not metricgalv, why am i posting as the wrong person?! 🙂

March 17, 2017
10:24 am
hzeiyssip
Member
Members
Forum Posts: 35
Member Since:
November 23, 2015
sp_UserOfflineSmall Offline

metricgalv said
Hi all,

has anyone got anything like a grid display working at all? I would love the Browse and Recent ads to be displayed in a grid, the list option is next to useless for the type of sites I want to use this for. If anyone is able to style the listing page into a grid layout could they let me know. I have bought a couple of premium modules, but without a decent listing page it really is not much use to me. I am happy to pay for assistance. Thanks!  

Did you ever get a grid layout working?

I’m also trying. I’d really like to see your site and the syntax used.

I’m struggling with finditswapit.com – Thanks

March 17, 2017
2:16 pm
hzeiyssip
Member
Members
Forum Posts: 35
Member Since:
November 23, 2015
sp_UserOfflineSmall Offline

demo said
left-arrow.jpgImage Enlarger

 right-arrow.jpgImage Enlarger  

Hi there

If I paid you some money, would you be able to help me integrate your coding into my site perhaps?

I’m an IT and not completely daft, and I’ve setup the site on a home server from scratch, but coding seems like a dark art and I admire you guys who can do it.

Just need a list of ad’s to appear headed up Recent Ad’s exactly as you have here, perhaps 10 lines of 4 ad’s per line of something. 

That’s all I need !

Thanks

[email protected]

e m a i l 

finditswapit.com

March 17, 2017
2:18 pm
hzeiyssip
Member
Members
Forum Posts: 35
Member Since:
November 23, 2015
sp_UserOfflineSmall Offline

catalano said
I like it. I’ll have to ask the client if they’d want to do something like that. Originally they were going to use the ‘featured ads’ widget on the homepage. But this might be a good idea.

Hi there

If I paid you some money, would you be able to help me integrate your coding into my site perhaps?

I’m an IT and not completely daft, and I’ve setup the site on a home server from scratch, but coding seems like a dark art and I admire you guys who can do it.

Just need a list of ad’s to appear headed up Recent Ad’s exactly as you have here, perhaps 10 lines of 4 ad’s per line of something. 

That’s all I need !

Thanks

[email protected]

e m a i l 

finditswapit.com

Forum Timezone: America/Denver

Most Users Ever Online: 163

Currently Online:
10 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Johnny B: 140

godie: 120

laburke: 94

NAIN KHAN: 93

kerdezo: 84

salvig67: 84

purplepaula: 72

rude: 72

gery: 71

WAYTOBAYWTB52: 71

Member Stats:

Guest Posters: 28

Members: 36843

Moderators: 2

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 6554

Posts: 29488

Newest Members:

toto, Mike Wilson, Melanie, andrea salis, Chardon, Mareks, Grégoire, Alex, bassam, antu lal

Moderators: awpcp: 7530, AWPCP Support: 4543

Administrators: wpengine: 0, awpcp: 298

Skip to toolbar