[Drupal] How to Create Custom Colorbox Style in Drupal 7

| | 1 min read

You can create your custom color box styles instead of using a plugin provided styles. For creating custom color box style go to /sites/all/modules/contrib/color box/styles copy any one of the folders. (You can find plain, default, and Stockholm syndrome styles there).Place the copied folder into your theme folder. Rename the folder with your custom name. Also, rename the CSS and js files.

ie, if your custom color box style is "My custom style" then rename the folder as my_custom_style. The CSS and js files are "colorbox_style.css" and "colorbox_style.js" respectively. Change them to "colorbox_my_custom_style.css", "colorbox_my_custom_style.css". Open your themes .info file and append new files.

stylesheets[all][] = my_custom_style/colorbox_my_custom_style.css
scripts[] = my_custom_style/colorbox_my_custom_style.js

Make required changes on css and js files. Now your custom colorbox style is ready, go to admin/config/media/colorbox set style to 'none' in styles and options area.

Hope this helps! Please feel free to get in touch with us for further queries.