Preload Images for better CSS performance

I use a lot of CSS enhancements for things like hover: images, where the image changes slightly as your mouse moves over it. Great little trick to help focus the user’s attention on specific elements on the page. But if you don’t preload the images, you will have a slight (or not so slight) pause when you hover the first time – a sort of flicker. Preloading isn’t hard but in the Drupal world there are a couple of extra things that I did.

I have a custom content type called HTML text. Any sort of HTML can be added in this type as a specific node and placed where ever I want. In my case placement is done by using Panels. So what I did was to create one node that references all the images that I want to preload.

<span>

<img src=”/sites/images/icons/F-chat-lg.png” alt=”DOCResource.org Chat”>
<img src=”/sites/images/icons/F-forums-lg.png” alt=”DOCResource.org forums”>
<img src=”/sites/images/icons/F-research-lg.png” alt=”DOCResource.org research”>
<img src=”/sites/images/icons/F-services-lg.png” alt=”DOCResource.org Serives”>
<img src=”/sites/images/icons/F-top-lg.png” alt=”DOCResource.org”>
<img src=”/sites/images/icons/F-Courts-lg.png” alt=”DOCResource.org Research Courts”>
<img src=”/sites/images/buttons/more-btn-blk.png” alt=”DOCResource.org More”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg-Blk.png” alt=”DOCResource.org Research”>
</span>

easy as pie. i added the class ‘preload-images-class” so I can manipulate the node using CSS. I added this class from within the panel with the node.

Then, I added the node to the front page of my site and set the class in my CSS to have a couple of different styles.

.panel-pane.pane-node.preload-images-class.no-title.block {
margin-bottom: -35em;
visibility:hidden;

the visibility is the key. The images are loaded but don’t show up. But they still impact the spacing of the DIVs so I also added the margin-bottom element to account for and remove the extra space.

I also added a few other images at the same time. I have a couple of buttons that change on a hover event and they are small and don’t affect the loading of the page.

A small detail for the overall look of the site but one that gives a nice spit and polish to the UX.

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

Image

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.Image

CSS to move an Image by Node ID

I have a way that I want to be able to show users help. I have a nice ? icon for this purpose and I have

Image

added a title to the image itself which will display as a hover. I have added the image to a Panel Page via a Panel Pane by the Node ID assigned by Drupal, in this case 960. But I want it to overlay a different pane. So, I place the Pane with the image at the bottom and then I use a CSS rule that affects only the node 960. See the screen shots. I simply add the position of absolute and the proper margin spacing to get the image where I want it to be.

Since the CSS is based on a specific node, which is presented by Drupal as an ID, the CSS rule is formatted like this. Done and done.

#node-960 {

Image

position:absolute

margin:-69em 0 0 47em;

}

CSS aggregation and performance – custom CSS broken after enabling

Today I turned on the CSS aggregation feature in Performance and promptly broke all of my custom CSS. well, almost all of it. It was apparently pretty quickly that the custom css that i have in my custom css file was missing. the css file is properly registered in the .info file so at first I wasn’t sure what the problem was. then i found this.

https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_css/7

If CSS aggregation/compression is enabled, all cascading style sheets added with $options[‘preprocess’] set to TRUE will be merged into one aggregate file and compressed by removing all extraneous white space.

so the workaround is to add all the custom css to a file that has had this variable set to TRUE. any of the subthemed css files that you may have moved will do. CSS doesn’t really care what file the styles come from; it just cares what they affect. the real fix will be to get the variable to be set to true for my custom file.

BTW, the performance difference is really noticeable: you have to be able to turn this on.

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:

Image

Image

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.Image
  • 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.

  • Image

Define Custom Content Type CSS classes

This is a really cool module. And surprisingly, it doesn’t seem to have gotten a lot of attention. But the Field Formatter Class Module is really pretty simple and straightforward. And with Drupal, I really like the KISS rule…

This module allows you to define a CSFF class1S class on a per field basis. You do this in the Display Settings for the field of the content type taht you are working with. So,

  • I create a Content type called admin galleries for image galleries taht I, an admin, create.
  • On the image field, I assign the class admin-gallery. this option is available because of the module
  • now, i can add CSS as seen below to that specific class and only that content type will be affected. so I can style any
  • gallery this way as long as I use that content type for the gallery. which makes sense anyway. Image
  • I can also create a content type for user-galleries and style all those in a consistent way. and that is the real point that i wanted to acheive anyway.

 

 

 

Very cool module. And this post is where I heard about it. It has some other useful ideas on this subject too.

http://drupal.stackexchange.com/questions/30561/add-a-css-class-to-field-in-content-type

 

 

Add a custom hyperlink to a View

This is similar to what I did last night with the More buttobn PNG file. I have the same file in a Panel Pane for a View that I put together. And I want it to go to a completely custom URL that links to a searchable View of the same aggregator items.

First, I need to get the link and the text on the screen. Since it is View, there are better, more flexible options than there were on the Block that I was working with last night. I decided to add a Link via the Header part of the View as seen below. Because there is a text area option for the header and you can place full HTML in there, I was able to add all of the styling elements directly in the header. So, it is really Inline CSS. Which is fine for here because I want complete flexibility over the element. I added positioning elements, opacity and a title to the More text and I now have my link right on the More PNG file button.

ImageImage

One Image – Many links – CSS, image backgrounds gradients and creativity (cheating)

ImageI have been trying for days to figure out a way for this idea to work. This is CNN’s web site. Very nice site. About as good as you can get. I really like the “More” button that the site uses. so, i reverse engineered it and this is what I came up with,  to the left and a bit down. you can’t really see it from the ss but the more link that is native to the Drupal Block for the Blogs, Forums, etc. is now nested behind the image that i recreated from the cnn site via Gimpshop. You can see the progression and how I got the darn thing where it is. First, to get the gradient background with image inserted into it is a whole other set of issues that i have covered in other posts. I just needed a way to make the More button PNG file function like the text link. So, I simply moved it (the native More link) to where the More button PGN is located via some CSS and then, I set the More link’s (from Drupal) opacity to 1. You can see it in the SS. now, because the custom style that I have used for these specific panels is consistent, (and they all have 5 items for the preview which means their height is the same) this

THERE ARE SOME CAVEATS

AT THE BOTTOM OF THIS POST – and sorry for the messiness. I don’t care too much for WordPress.com.

start learning drupal

CSS adjustment works on all the Panels that I have it enabled on. Very nice now that I am at this point but there was quite a bit of work going into it.
more button1

more button2

more button3

    • The More button PNG file is not a piece of Drupal content; it is not a node. It is a simp
      le PNG file that has been uploaded to the images dir and referenced in the CSS.
    • I do use the Link Module (the logo is a prime example) to add  urls to images but that means that the one image can only have one url. I don’t want to have to upload a separate PNG for each more button then have to keep track of them all. Plus, adding a node to the site and then having to move that around would mess up the consistency with the custom panel style. This way, I have one image that essentially has more than one link. I know, I know, not really; i have cheated. But the upside to using the Native  ore Link is that I don’t have to worry about the target; it’s already in there. I do realize that there may be a better way (I am sure of it) to do this in code with a custom module maybe, but i’m not at that point. and I need to keep moving on the project. and this way does have an elegance in one image
      =
    •  multiple links via CSS. 

CSS to specific Panels – another way

This is a better way to add CSS to individual Panel Panes. And really it is the way that it was designed to w0rk, i believe. Take a closer look at the SSs to see whstartlearningdrupal - css and panelsat is going on.

    • Edit the Panel in the Panels Admin section of Drupal
    • Edit the content of the Pane you want to be able to w0rk independently with
    • Choose CSS Properties
    • Add a CSS ID and a CSS Cl@ss save all this. I had to clear Cache to see what I needed after saving
    • Using Firebug, track down the Login Block info.
    • Highlight the Login-css-id div tag on the left
    • Right click on the right hand side and choose Add Rulestartlearningdrupal - css and panels
    • Make these Firebug “local” changes to test what you want
    • When you are good with the change, transfer the syntax to the actual CSS file and save it
    • startlearningdrupal - css and panels

 

    • Test your changes again.

 

 

 

startlearningdrupal - css and panels

 

CSS – Gradients and Images together

I really wanted to get the effect that you often see on nice looking sites like CNN where you have a gradient with a button in the corner of said gradient. Like the More buttons that you see.

This is a great tutorial on gradients.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

Here is the actual syntax that I used to make this work:

.pane-plain-box-bs1 h2 {
background: url(‘/sites/images/more-btn1.png’) no-repeat top right, linear-gradient(to bottom,rgba(161,161,161,0) 0,rgba(82,81,80,1) 100%);}

Note that I am doing this in the subthemed CSS file from Panels. One important thing to note is that you have to have the image listed BEFORE the gradient in the line. Otherwise the gradient will cover it up.