Customize buttons on Edit / Delete App modals

[dkirankumar]

I want to customize / change button styling on Edit / Delete App modals.

I don't want to change the code in apigee profile. I would like to extend and change the button styling

Please suggest the best way to do it.

[DChiesa]

Are you referring to the Drupal-based developer portal?

The best way to do it is to create your own theme, and modify the .css for the theme to do what you want. Find out more about customizing a theme, here.

Does this help?

[dkirankumar]

Thanks for your reply Dino.

I'm working on Drupal based Developer portal. I have created the custom theme and has completed most of the customization. I couldn't change the button styling in these two screens as they are in modals (ajax loaded) and doesn't seem to be customizable with css modifications done using js or template.php.

Please suggest the best way to make changes on only these two modals. I probably need to extend the hooks and change the css. I would like to take an expert suggestion before making those changes.

Question - Is there a developer portal without Drupal that is shipped with apigee integration done?

[dkirankumar]

@Anil Sagar- Can you help me with best possible solution?

[anilsr · Accepted solution]

@Kiran Devarapalli , Welcome to Apigee Communtiy !

It should be straight forward. Just add the css to your theme css file.

For example, http://dev-4mv4d.devportal.apigee.io/sites/all/themes/api4mv4d/css/api4mv4d.css

#devconnect-developer-apps-edit-form #edit-submit {
    background-color: #000;
}

See it in action here, http://dev-4mv4d.devportal.apigee.io/ Create an app & edit app to see button in black color,

Hope it helps.

[dkirankumar]

@Anil Sagar Appreciate your quick response.

I want to remove glyphicon from the button and remove class "icon-before" as well.

[anilsr]

@Kiran Devarapalli ,

Very interesting requirement. It took me a while to figure out how exactly these icons are getting rendered. After quite some time found out that these are bootstrap icons that gets rendered based on text of the button.

Disabling them is simple,

Go to theme settings -> General -> Button, Uncheck Iconize buttons option -> Save settings. See screenshot for reference.

Hope it helps. Please accept answer if your query is resolved.

[dkirankumar]

@Anil Sagar - Appreciate your detailed response. It really helped.

One last question - Can I add custom classes to the Delete App button?

[dkirankumar]

I could make changes in the theme settings for Devconnect - pretty easy. Thanks