How to customize Products list in "Add App" page?

[#1]

Hi,

My requirement is, in the "Add App" page, to add side bar to the hierarchical view of products. If I see the source of the this page, the div class="form-item" is used for the product list and a different id is used for each product. I wanted to use same id for all products and add styling for product list. But I could not find the location of the class in the code. Can anybody points me, where it is defined in the code?

Thanks

Swarna

[anilsr]

@SwarnaLatha , It's coming from a drupal form. You can override it. You need little bit of Drupal Expertise. Can you explain what do you mean "add side bar to the hierarchical view of products" ?

Why do you need same id for all products ? You mean class ? What's the end goal here ? To change the css ?

Can you add, what you see ? What you expected to see ? A screenshot with quick annotations will help.

[mahathidev]

Hi @Anil Sagar, we are trying to customize the look and feel of the product list by making it accessible as a navigation/ side bar (please refer the screenshot). The end goal is to change the css but we did not find the css of the product list form to make the changes. I was skeptical that it was something to do with Drupal as there was no sign of css or php in any of the themes or devconnect module files. Could you please tell us where to find the Drupal form so that we can override it according to our requirements? Your help is very much appreciated!

actual-product-list.png expected-sidebar.png

[anilsr]

@Mahathi Chaturvedula ,

It's easy to add CSS / JS and achieve what you want using little bit of Javascript magic & CSS styling. You need to access developer portal codebase & Create a custom theme if you don't have one in your portal.

See instructions here for creating a custom sub theme if you don't have one in your portal. Once you have a custom theme, you can add css & js files that will execute in above add app page. For example, see article here.

It should be straight forward if you know CSS & JS. Also, If you can make it generic, Please feel free to post your solution here. I am sure, It's a great feature to have & let community know about it.

Keep us posted if any.