Colorbox theming documentation is out of date. Help needed for Drupal 8

Created on 9 November 2020, over 4 years ago
Updated 14 August 2024, 8 months ago

Problem/Motivation

Theming colorbox for Drupal 8

I am building my first Drupal 8 Sub-theme and attempted to follow the documentation for setting up the colorbox theme.

I have created the css and js files along with the corresponding image folder (modified from the default theme)

Add a custom Colorbox style to your theme

The easiest way is to start with either the default style or one of the example styles included in the Colorbox JS library download. Simply copy the entire style folder to your theme and rename it to something logical like "mycolorbox". Inside that folder are both a .css and .js file, rename both of those as well to match your folder name: i.e. "colorbox_mycolorbox.css" and "colorbox_mycolorbox.js"

Add entries in your theme's .info file for the Colorbox CSS/JS files:

stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css
scripts[] = mycolorbox/colorbox_mycolorbox.js

Go to "Configuration" Β» "Media" Β» "Colorbox" and select "None" under "Styles and Options". This will leave the styling of Colorbox up to your theme. Make any CSS adjustments to your "colorbox_mycolorbox.css" file.

However, the above code for the mytheme.info.yml file crashes the site!
I am suspecting that the code snippet applies to Drupal 7 styling but I am unable to discern the changes of that code as it would apply to a Drupal 8 theme!

Can anyone advise on how to configure my *.info.yml (and *.libraries.yml - if appropriate) files to point to the 'colorbox_mycolorbox.css' and 'colorbox_mycolorbox.js' files?

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Closed: works as designed

Version

1.6

Component

Documentation

Created by

πŸ‡ΊπŸ‡ΈUnited States bas123

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¬πŸ‡§United Kingdom vali hutchison

    Here's the setup I used for a Drupal 10 site with a child theme. I created a folder called 'colorbox' in the root of my child theme folder and added my custom Colobox CSS and JS files to that folder. I then updated the *.libraries.yml file to include the Colorbox css and js files like this:

    *.libraries.yml file before adding colobox:

    global-styling:
      css:
        theme:
          css/style.css: {}
    

    *.libraries.yml file after adding colobox:

    global-styling:
      css:
        theme:
          css/style.css: {}
          colorbox/colorbox.css: {}
    
      js:
        colorbox/colorbox.js: {}
    

    And that all worked.

    Remember to clear Drupal caches after making these changes.

  • Status changed to Closed: works as designed 8 months ago
Production build 0.71.5 2024