BootListings - A bootstrap classifieds template

 


Licencing: Please view licencing information on http://expresspixel.com/licenses


How to use the template

  1. To use this template you'll probably already have your own developed system, using wordpress or another classified script.

  2. The easiest way to start installing it as a theme is to copy an existing theme, then change the header to use the bootstrap css.

  3. Continue by replacing the existing theme HTML with the BootListings HTML


Changing colours

We use .less files to control the colors. You'll need to compile bootstrap.less and theme.less in order to change colours. The variables.less contains all the colours and typography that you can edit for the theme.


Customizing the HTML

This theme uses mostly a 2 column layout. The '.container' is used to control the width of the page. Modals are located just before the 'footer'. The '.container' between the '.jumbotron .home-search' section and 'footer' section is used for the inner content.


Extra information

  1. We've used facebook, twitter and google+ codes for social media. You'll need to change these to your own accounts.

  2. You can find these on the home page index.html by searching for 'fb-like'

    <div class="panel-body"> <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="265" data-layout="standard" data-action="like" data-show-faces="false" data-share="false" style="display: block; height: 30px;"></div> <br /> &lt;!-- Place this tag where you want the +1 button to render. --&gt; <div class="g-plusone" data-annotation="inline" data-width="300" style="display: block; height: 30px;"></div> &lt;!-- Place this tag after the last +1 button tag. --&gt; [removed] (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s[removed].insertBefore(po, s); })(); [removed] </div> <div class="panel-footer"> <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-dnt="true">Follow @twitterapi</a> [removed]!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs[removed].insertBefore(js,fjs);}}(document,"script","twitter-wjs");[removed] </div>
  3. and on the details.html page by searching for 'g-plus'

    <div class="col-xs-3" style="width: 100px;"> &lt;!-- Place this tag where you want the share button to render. --&gt; <div class="g-plus" data-action="share" data-annotation="bubble"></div> &lt;!-- Place this tag after the last share tag. --&gt; [removed] (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s[removed].insertBefore(po, s); })(); [removed] </div> <div class="col-xs-3" style="width: 100px;"> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> [removed]!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs[removed].insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');[removed] </div> <div class="col-xs-3" style="width: 100px;"> <div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button_count"></div> </div>
  4. Replace the links with your own social links


Credits

  1. Bootstrap 3.1.1 - http://getbootstrap.com/
  2. Bootswatch - http://bootswatch.com/
  3. jQuery - http://jquery.com/
  4. DropzoneJS - http://www.dropzonejs.com/
  5. fancyBox - http://fancyapps.com/fancybox/
  6. flotcharts - http://www.flotcharts.org/
  7. Listings (images)
    http://flic.kr/p/5Dx3XM
    http://flic.kr/p/eMdSGh
    http://flic.kr/p/4hJkMi
    http://flic.kr/p/8XAg6t
    http://flic.kr/p/9EbR6N
    http://www.sxc.hu/photo/85635
    http://www.sxc.hu/photo/758502
    http://www.sxc.hu/photo/1406893
    http://www.sxc.hu/photo/111193
    http://www.sxc.hu/photo/343350
    
  8. Single listing (images)
    http://flic.kr/s/aHsj1MRH3v
    
  9. Icons (images)
    http://iconfindr.com/IezuxP
    

* Please note that the documentation is sometimes updated. The latest can be found at http://docs.expresspixel.com/bootlistings.