Customizing Drupal Confirmation Pages

If you use Panels Pages for the bulk of you site building, you may have noticed that there are frequent limitations on some of the more random pages.

Image

An example is the comment confirmation delete form. I don’t need much on this form, the stock info is fine, but I want to add my logo at least. I don’t use the logo function that Drupal provides standard, I implement it with my own CSS.

On the form, I use the background element on the #node-confirmation-form ID to add the logo via the CSS shown in the SS. But since that places the background right underneath the form text, I have to tweak it a bit to move things around so that they look OK. I ended up using a combination of height, top, padding and relative positioning. I really just had to experiment until I got it right.

This is not the best approach, but it is a good quick and dirty way to customize a form strictly through CSS when Page Manager doesn’t offer to intercept it for you.

CSS Tip – Customize without Theme Intercepts

A thorough knowledge of CSS is a must for customizing a layout using Drupal. Today, I needed to move an input field on a form. The issue is that the field shares its Drupal defined selector class with several other fields of the same type on other forms. Fix one form by the selector, break the same field on a different form.

Image

By using the CSS ID of the parent form, (which is several divs up in the HTML) and inserting a space in between the ID and the class selector, I can zero in on the particular field that I want. The other way that this would have to be done is via an intercept at the theme level, which would be more involved and require subtheming, PHP and a TPL file. Using the two selectors together is easier for someone who doesn’t want (or know how to) take that approach.

User Profiles Page – Customizing with Panels

I have spent the last couple of days working with the user profiles pages. I have some specific needs that I haven’t been able to acheive. And some of the places that you have to go to enable/disable certain pages/forms/elements are a little tricky. But I am going to try to explain.

  • I’m using Panels for everything.
  • I am talking about styling what the user see when the My Account menu item is clicked.

To get the Panels part to work properly with the User Profiles, there are two Panel Panes that you need to enable. They are listed under Pages:Image

Once enabled, these Panel Pages will override the system forms that are displayed. Then you can customize the user profile stuff with Panels. But when you get there, you may notice that things don’t look quite right. You will notice that you appear to be missing quite a few of the expected editable details.

This really tripped me up. But this is what you have to do. There is a listing under Form in the add content section of the edit pages section called General Form:

Image

When you add it you will see that it is also listed as  ‘”User being edited” base form’ in the content drag and drop UI.

Image

Then, when you browse to the page with this form added you will see that this is all the real editable content that you are mainly concerned with. It’s just buried. In the last SS, it is in the left column. The stuff on the right is separate.

Image