Drupal Design

Variants and Node Add/Edit Overrides

Variants in Drupal allow you to reuse Panel Page layouts to make your life easier. You use Selection Rules to allow the system to decide what variant to use based on any number of criteria. In my case, I use Variants on the node add/edit form to provide a consistent interface between several different content types. As with many things Drupal, there are a few idiosyncrasies.

I have a custom content type called member-galleries. This holds images in a gallery like display. To render the add node properly, I had to learn the hard way that using

the “Node Being Edited: Gallery Image form” is not the correct form to use. Even though Gallery Image is the field name that I gave the Image field on the content type that I created. It just seemed to make sense, right? And even worse, it appears when you test the functionality that this is the way to go. But, I kept getting a red herring error about file size when I would try to save an image. It turned out that the Variant really needed the “Node Being Edited” Base form instead. It appears to be exactly the same until you try to save a node of the content type.

The “More” block link – make it look professional with css

I use a lot of views to display content. In the pager section of your view you have an option to include a “more” link. I like the concept but i really want more flexibility

in styling and such. So, what ended up creating is a “more” link using a little custom HTML and some CSS. First, I used the Header section of the View to add the link with simple HTML. But I also added a class selector on the link (for the images and placement). I also added a <span> tag on the text that will be displayed for the link itself. This allows me to style the text of the link separately.

Then, i created some CSS for the new class more-button-added. they are as shown:

.more-button-added {
background: url(“/sites/images/buttons/more-btn-blk.png”) no-repeat;
position: relative;
float: right;
margin: -34px -19px;
}
.more-button-added:hover {
position: relative;
background: url(“/sites/images/buttons/more-btn-ylw.png”) no-repeat;
float: right;
margin: -34px -19px;
text-decoration: none;

these allow the image to be inserted and moved to the appropriate spot right along with the text for the link. Now, I don’t want a More text link in addition to the image, so, i use the selector i created in <span> called .more-link-clear to style this way:

.more-link-clear {
color:transparent;
text-decoration:none;
}
.more-link-clear:hover{
opacity:0;
}

now, the link is there, it is directly behind my image and it can’t be seen! and since it is a class and not an ID, I can use it for many of the other “more” buttons that I will place. I ended up using this technique on five different Panels panes on the front page of my site and they work really well. all of the panes are views, so i simply have to change the HTML link target to make it custom for that view. the css remains the same. very nice!

Quicktabs with CSS

Quicktabs is one of the best modules that I have found as far as getting a really nice, tabbed-style, JQuery layout. The mod comes with several different style, out of the box, and it wasn’t too hard to add some cool customizations via CSS. The bottom image is the way the Nav tab style looks out of the box. It gives a nice cle

an vertical set of links. But what I really wanted was to have images along with some text to make the menu look sharp. There are some files in the modules CSS folder that I overrode in the .info file. Some of the changes I was able to make in my own custom CSS file. There appear to be a few issues with the “active” LI items vs the non “active” items. But, i was able to get this to work without too many issues. VERY NICE MODULE.

Quicktabs – AJAX, Views and Panels

This module turned out to be a a real blessing for me. My site offers the ability to research news, court cases and legislation. As this content is viewed, my users are able to drag and drop links, text, pics, pretty much whatever and then save the node as a custom content type.

Originally, I was faced with the idea that each type of content was going to have a separate “Notes” area. This was OK but not ideal. Drupal users AJAX quite a bit so I started digging around and found Quicktabs. You can see from the ss below that this module allows you to place content in tabs areas for easy organization and quick access. It uses JQuery and AJAX (It also uses a non-ajax mode) to allow seemless loading of all sorts of content. For me, I really need to be able to display Views. This is not a problem and with the View that is being displayed enabled to use AJAX as well, allows for a really great way to see content without having to do page refreshes.

Quicktabs as an install base of over 35k so it is well-vetted. GREAT module.

Breadcrumbs – Path Breadcrumbs, Disable Breadcrumbs and more

You wouldn’t think that BCs would be such a sore subject, but in Drupal, apparently they are.

I have pretty simple needs for my BCs; I really only need them on the Forums pages. and the ones that come with the core are pretty limited. I think that I have come up with a pretty good workaround.

I am using the Path Breadcrumbs and the Disable Breadcrumbs modules. I use the DB module’s Disable All feature to completely get rid of the core crumbs and the Path mod to set the ones that I do need.

I also looked at Custom Breadcrumbs as well and it certainly has a great install base, but the documentation seems to be really light.

There is a nice CodeKarate video for Path that helped me quite a bit. Frankly, I’m getting a bit tired of slogging my way through modules that are powerful but difficult to implement and poorly documented as well. Drupal is already tough enough.

Tokens in a menu – edit the current node without the edit tab

This is a really handy module for me. https://drupal.org/project/menu_token

what this allows me to do is use tokens in menu URLs. What this means is that I can create a simple URL that references content dynamically. and since it is a menu, I can easily place it with panels.

so, I have a URL whose relative path is

node/[node:nid]/edit

I place this on the node view variant page for my specific content type and I now have a movable link that will edit whatever node I am looking at. one link will allow me to edit any node.

the tabs from drupal will allow you to do this of course, but I hate the tabs because they always interfere with my CSS and I use Tab Tamer to hide them. But, I still need the functionality. and with this solution, i can style it pretty easily with css.

Image Linked to a Colorboxed Image

I have my nice “About Us” page contained in a colorbox now. And the link that leads to it is embedded in a text area of a View’s header. But what I really want is to have a fancy about us button image that links to the colorbox.

I have the image link module installed but that just allows for a regular hyperlink. The way that I load colorbox in this case is via “colorbox-load” within the tags of the link itself. So, I simply added a piece of content that allows for full html (and isn’t available for anyone

else to author), uploaded my button to the custom images folder that I have within /sites and it works really well. Here is the way the link looks in the body of the html body field for the piece of content that i added. after the content is in place, i simply add it to the page via Panels, referencing it by the name of the node.

this is what the html looks like in the editor of the piece of content.

The images above show the end result. I still need to move the button around with a bit of CSS but that will be pretty straightforward.

Here are the highlights of making this work:

Image uploaded manually, not a part of a piece of content
Hyperlink embedded in the body field of a Full HTML Drupal piece of content
That content piece added to a Panel Page

Add an easy to manage Footer

My site is coming along nicely but I needed a simple, but appealing footer section. I use Panels and have gotten pretty good with CSS so I put this together as shown:

Here is a summary of what I did to make this.

I created a panel style for the footer element called footer1.
I edited the css for footer1 in my custom css file in my subtheme and added a background image, a little 1k blue gradient sliver, that is repeated via css to cover the entire bottom of the page.
I made sure to check the “make this style available to other..” as seen here. The name that you give the region/pane will then be easily assigned to other panel elements in the in-place editor
Create a custom menu with whatever you want. Add that menu to a Superfish block. The superfish menu block doesn’t have to be handled by the Block Admin at all; it will be available via the in-place editor in Panels under Misc. as seen here.
So once I have configured the Superfish settings for the Block the way I want (without enabling the block in Blocks Manager at all) it will be ready to go. In this case, I have used CSS for the superfish menu I created to center the menu, make the text color white. That is tested in Firebug and Inspector (the chrome tool) and then added to my custom css file.
Since the background image and the menu are separate entities and handled by different css classes, they can sit on top of each well well.
Now, On any Panel page that I have, any at all, all I have to do to add this footer is add the fotter1 style to the region in Panels Pages, and add the Superfish Menu from Misc as a piece of content, also in the Panel in-place editor.

This is a little complicated to get set up. But I now have a lot of flexibility on the footer. It is easy to maintain (the menu items are just menu links in the standard m

enu config) the footer image takes a few clicks to insert. and if I wanted to update the image itself, all i would have to do is place a new “sliver” image with the same name in the same folder where it currently resides. Quite nice once it si in place. If you want more detail, let me know and I’ll be more specific.

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:

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:

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.

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.

Disable Breadcrumbs Module

Breadcrumbs can be useful. But for me, they just seem to get in the way. Since I want command over all stylistic aspects of my site, I just want to get rid of the pesky things. And there is a module for that – Disable Breadcrumbs. There are per page options that didn’t work very well for me. It seemed to be a little inconsistent. But the overall disabling of all breadcrumbs seems to work just fine.