Breadcrumbs

Home / Support Center / Tutorials, Guides & FAQs / DJ-Classifieds tutorials and guides / How to display custom fields in more than one column

Top Menu

Content

How to display custom fields in more than one column

howtodisplaycustomfields

You can easily modify the CSS of DJ-Classifieds to display the custom fields in more than one column.

I will show how you can do it using our demo installation as an example.

The example product we will be working on is: https://demo.dj-extensions.com/dj-classifieds-new/single-ad-view-with-buy-now

Once the product is displayed in the browser (I am using Chrome, but you can find similar options in other browsers) right-click on of the custom fields and choose “Inspect”.

Inspect-custom-field-dj-classifieds

Now, when in Inspect mod, click on div with class “custom_det_content” to see the path to the CSS in your Joomla installation

dj-classifieds-inspect-element-columns

In my case, it is: https://demo.dj-extensions.com/dj-classifieds-new/components/com_djclassifieds/themes/clean/css/style.css 

Now, I find the CSS file in the FTP client and open the file

e6a56325-8da5-4a02-a603-72d3185d205f

now, in the file we need to add: 

#dj-classifieds .dj-item .custom_det_content { 
column-count: 2;
}

css-dj-classifieds-two-columns

and save the file.

Now, there are two columns available:

specific-details-custom-fields-dj-classifieds

You can, of course, use a different number of columns if needed.

The solution I will show you is the most simple one and need to be done again once the extension is modified.

If you are using Joomla-Monster template built on the EF4 framework you can add those changes to the custom.less file and then it won’t be changed during the DJ-Classifieds update.

Follow this tutorial to add your own styles to Joomla-Monster’s templates: https://www.joomla-monster.com/documentation/template-tutorials/how-to-add-your-own-css-styles-to-joomla-template-based-on-ef4-framework

In my case I have added to the custom.less:

#dj-classifieds .dj-item .custom_det_content { 
column-count: 2;
}

the effect is the same, two columns added + you are safe with the updates.

You can add more css styles to change the look!

For example
Specify width for class “ Custom_det” for better look on mobile devices!

@media screen and (min-width: 751px) {
#dj-classifieds .dj-item .custom_det {
float: left;
width: 46.9%;
margin-right: 3%;
column-count: 2;
}

This code comes from our reader, who decided to praise him in the comment

alexander angelov

And that is the result:

apple-iphone6-spacegrey-portrait-2


Found this article interesting? Subscribe for more.
Or share this article with your friends.
Tuesday, 18 July 2017 13:08
 
User Rating:  (0)
PoorBest
 

Buy

DJ-Classifieds

Ultimate classified ads solution for Joomla.

Learn more

Footer Menu