How to display custom fields in more than one column

How to display custom fields in more than one column

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 one of the custom fields and choose “Inspect”.

Inspect-custom-field-dj-classifieds

When in Inspect mode, click on div with class “ custom_det_content ” to see the CSS path 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: 

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

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 :

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

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!

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

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


      • Related Articles

      • How to translate custom fields values

        If you want to translate custom fields values in DJ-Classifieds, follow this few simple steps. We will make an example of translation to show how the process looks like. Go to DJ-Classifieds and open "Options". Go to the "Custom fields values to ...
      • Extra/Custom fields in DJ-Classifieds

        The DJ-Classifieds component allows assigning additional fields to the advert details from a certain category. Settings To create a custom field, click on the Extra Fields button from the Control Panel, then click New from the top right toolbar, and ...
      • How to set field groups for custom fields in the registration

        There is a possibility of creating a group of custom fields in the registration form and assigning them to Joomla groups. It allows for displaying different fields for different groups.  To configure this feature, open the DJ-Classifieds component ...
      • How to order "fields" in DJ-Classifieds

        If you are wondering how to order "fields" in DJ-Classifieds component, follow this simple tutorial to learn everything! It's easy to make! Open the DJ-Classifieds component. Navigate to the "Fields" button and open it. Now navigate to the right, ...
      • Display extra fields in Items module

        Now you can display custom fields also in Items Module. This brings whole new possibilities for presenting your content. This can be controlled in every Items Module as well on each Extra Field settings. In Items module, you can select if the custom ...