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
Tuesday, 18 July 2017 13:08

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.
Subscribe to the Telegram bot / Subscribe to the Messenger Bot
Or share this article with your friends.

 
 
User Rating:  (0)
PoorBest
 

Buy

DJ-Classifieds

Ultimate classified ads solution for Joomla.

Learn more

Footer Menu