Wouldn’t it be nice if you could have your node edit tabs (view, edit, manage display, etc.) without having them push your layout down 50-100 pixels? Well, good news: you can!
This is how the node tabs normally look (with my subtheme styles). Not even close to what my normal visitors will see..
This is what I’m going to show you how to do in this post…
You can get a better sense of it from this short video.
One of my all-time favorite Saturday Night Live skits was “Stuart Smalley’s Daily Affirmations.”
I’ve decided to have a little fun with PHP by adding random Stuart Smalley quotes to the gench site I’m building. I only want one user to see these quotes (my client who is also my husband) and it’s really just a silly joke between us. As silly as this example is, this technique can be used for serious applications as well. Many is the client who wants rotating slogans in their branding zone.
A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).
Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”
For the music label site I’m creating, the client wants to prevent people from ordering items no longer in stock, but he wants to continue displaying them as they represent his discography.
For a high-volume Drupal Commerce site, you’re going to want to write or use a custom module for inventory control (like Commerce Stock), but that seemed like overkill for this project.
I decided to deploy a solution that doesn’t require any additional modules – just a little jQuery and the addition of a status field to my product variation type.
Please Note: This example was based on version 3.2.1 of the font-awesome library. I’m not sure when this occurred, but the current version of the font-aewsome library (4.0.3) has changed all the class names for their icons. The example in this posting will work with version 3.2.1, but if you prefer to use the most recent font-awesome library, you should substitute the word ‘icon’ in class names with ‘fa’
For example, in 4.0.3, you would use…
<i class="fa-play fa-rotate-90"></i>
etc…
A commonly desired feature on websites is an expanding/collapsing list, with a rotating arrow button.
I want this feature on both the gench FAQ and album review pages, and I want the currently expanded section to collapse if another section is expanded or if the currently expanded heading is clicked on again.
On the gench site I’m currently working on, I wanted to display a song and audio player on each CD product page. I have two content types I used for this: “Product display” with most of the CD information (title, artist, label, cover image, price, etc.) and “Song” which includes the mp3/player, song title and an entity reference field that points back to the Product display.
I knew I wanted each Product display page to display the song/player in the Second side bar. I suppose I could have created a view and block for each song and then used each view block’s config to display each on the appropriate Product display page. But this seemed like madness to me! Is the client to be expected to create a new song, view and block each time they want to add a product/CD?! True, the client in this case is “only” my husband, but he’s generally a decent guy, so I figured there had to be a better way. Continue reading
A webform’s layout can be controlled by PHP.
Say I want to take this webform…
Webform – before: the student’s name is on 3 separate lines
…and put the 3 Student’s name fields (Student’s first name, Student’s middle name & Student’s last name) on the same line together like this…
Webform – after: the student’s name is now on 1 line
banoodle land 