Change Background Overlay Color - Part 2
Permalink Browser Info Environment
Hello!
Your block works just fine, but my customer wants some customization that is driving me batty:
She would like the fancybox background and the white box surrounding the picture to be black. Of course this means the caption text will have to be white.
I set up a template folder and the correct files per your suggestions in this forum. (see attached jpg)
I tried modifying the jquery.fancybox-1.3.4.js, and the jquery.fancybox-1.3.4.css files and applying the template to the block - no luck.
I added the code in view.php on line 50 per your suggestion:
Now I (finally) get a black background, but no arrow navigation, closing "x", etc.
I have looked at the google forum you suggested for ideas, but they are a bit over my head.
Do you have any ideas?
Here is also a link to the gallery on my staging site:
http://www.stagingseydoux2.ch/index.php/about...
Thanks in advance - I appreciate any input...
Your block works just fine, but my customer wants some customization that is driving me batty:
She would like the fancybox background and the white box surrounding the picture to be black. Of course this means the caption text will have to be white.
I set up a template folder and the correct files per your suggestions in this forum. (see attached jpg)
I tried modifying the jquery.fancybox-1.3.4.js, and the jquery.fancybox-1.3.4.css files and applying the template to the block - no luck.
I added the code in view.php on line 50 per your suggestion:
'overlayOpacity' : 1, //<--number from 0 to 1 'overlayColor' : '#000', //<--hex color code,
Now I (finally) get a black background, but no arrow navigation, closing "x", etc.
I have looked at the google forum you suggested for ideas, but they are a bit over my head.
Do you have any ideas?
Here is also a link to the gallery on my staging site:
http://www.stagingseydoux2.ch/index.php/about...
Thanks in advance - I appreciate any input...
| Type: | Discussion |
|---|---|
| Status: | New |
Thanks Jordan -
I appreciate that you don't support fancybox, but it turns out that isn't the problem anyway...
I tried to achieve my goals by creating a template. Using a template, I can only seem to modify "view.php".
However, there were things I wanted to do in addition that required messing with the fancybox css, and for some reason the only way I could do this was to change it in the original block folder in "packages"
Previously I had tried to place a copy of "fancybox" in the template folder, and modify it there, but this did not work. I don't understand why this override didn't work.
I would much rather work with a template, instead of a mish-mash. (Updates!) Is there something additional I could do to view.php to make it use the files in the template folder rather than returning to the originals?
You can see what I have done at the link mentioned in my original post.
Anyway, thanks for responding so quickly -
I appreciate that you don't support fancybox, but it turns out that isn't the problem anyway...
I tried to achieve my goals by creating a template. Using a template, I can only seem to modify "view.php".
However, there were things I wanted to do in addition that required messing with the fancybox css, and for some reason the only way I could do this was to change it in the original block folder in "packages"
Previously I had tried to place a copy of "fancybox" in the template folder, and modify it there, but this did not work. I don't understand why this override didn't work.
I would much rather work with a template, instead of a mish-mash. (Updates!) Is there something additional I could do to view.php to make it use the files in the template folder rather than returning to the originals?
You can see what I have done at the link mentioned in my original post.
Anyway, thanks for responding so quickly -
Overrides in Concrete5 are kind of a mess -- I've had a lot of problems myself with this type of thing.
Really the only things that are easily over-ridable are the view.php and view.css file for a block. But the fancybox stuff is its own separate stylesheet and js so Concrete5 doesn't know to pick it up.
If you're running Concrete5.6+ and the most-recent version of the image gallery addon, though, there is a way to trick the addon into loading your own custom js and css for the gallery -- but loading your own js/css files yourself in your theme head. The downside is that it will load that for every page in your site (not just the ones with fancybox on it) -- although that stuff should be cached by the browser so it shouldn't be that much of a performance hit. Let me know if you want to try this solution (assuming you have the most recent C5 running).
-Jordan
Really the only things that are easily over-ridable are the view.php and view.css file for a block. But the fancybox stuff is its own separate stylesheet and js so Concrete5 doesn't know to pick it up.
If you're running Concrete5.6+ and the most-recent version of the image gallery addon, though, there is a way to trick the addon into loading your own custom js and css for the gallery -- but loading your own js/css files yourself in your theme head. The downside is that it will load that for every page in your site (not just the ones with fancybox on it) -- although that stuff should be cached by the browser so it shouldn't be that much of a performance hit. Let me know if you want to try this solution (assuming you have the most recent C5 running).
-Jordan
Hi Jorden -
Your suggestion would be okay for me - the only 3 pages of the site without a gallery are info, contact, and home.
However, do you know if it would be possible to "fork" the Deluxe Image Gallery - that is, I would have it loaded as a package, but copy the entire package into "blocks", rename it and simply make my changes there. Sort of like forking a theme. Might this be easier?
If you don't recommend this, or for some reason don't want me to do this - okay - then please direct me to info about loading custom js and css. I am running 5.6.
Performance isn't a big deal for most of my clients - they are pleased as punch to be getting sites online!
Thanks and have a great weekend...
Arlene
Your suggestion would be okay for me - the only 3 pages of the site without a gallery are info, contact, and home.
However, do you know if it would be possible to "fork" the Deluxe Image Gallery - that is, I would have it loaded as a package, but copy the entire package into "blocks", rename it and simply make my changes there. Sort of like forking a theme. Might this be easier?
If you don't recommend this, or for some reason don't want me to do this - okay - then please direct me to info about loading custom js and css. I am running 5.6.
Performance isn't a big deal for most of my clients - they are pleased as punch to be getting sites online!
Thanks and have a great weekend...
Arlene
Sorry to intrude in this thread (which I have been monitoring) but I am overriding DIG and have been for about a year. It does take some testing between versions (especially when c5 releases big changes) but it is well worth it.
My suggestion is, if you decide to override, to also set up a development environment where you can mirror the live site and try out all the changes before updating the live site(s).
My suggestion is, if you decide to override, to also set up a development environment where you can mirror the live site and try out all the changes before updating the live site(s).
Sorry for the delay. The addon will not function in the "blocks" directory because it utilizes other files outside of the block itself to make the editing interface work. Is the reason you want to "fork" it just so that it won't trigger automatic updates? If so, your best bet is probably to just edit the package's controller.php file and change the version number to something really high, like 9.0 -- that way it will always think it's a higher version than what's actually available on the marketplace. (And in the future if you decide you want to get back on the update train, just revert the version back down to its original number).
All that being said, here is what you can do to load a modified version of fancybox in your theme header (and this will work even if you upgrade Deluxe Image Gallery in the future -- because you're changing the theme itself, not the package):
1. Add the fancybox files to your theme directory. The code below assumes you have a subdirectory called "js" in your theme directory, and then inside that another subdirectory called "fancybox" that all the fancybox files are in. It also assumes you're using the latest version free of fancybox (1.3.4).
2. Modify the <head> of your theme (probably in elements/header.php, but could be different depending on how your theme was built), and somewhere *before* the Loader::element('header_required') line, add this:
Now, as long as you have that code before the Loader::element('header_required') line, it will load your own fancybox and *not* load deluxe image gallery's.
Let me know if you run into any problems with this.
-Jordan
All that being said, here is what you can do to load a modified version of fancybox in your theme header (and this will work even if you upgrade Deluxe Image Gallery in the future -- because you're changing the theme itself, not the package):
1. Add the fancybox files to your theme directory. The code below assumes you have a subdirectory called "js" in your theme directory, and then inside that another subdirectory called "fancybox" that all the fancybox files are in. It also assumes you're using the latest version free of fancybox (1.3.4).
2. Modify the <head> of your theme (probably in elements/header.php, but could be different depending on how your theme was built), and somewhere *before* the Loader::element('header_required') line, add this:
$html = Loader::helper('html'); $this->addHeaderItem($html->javascript($this->getThemePath() . '/js/fancybox/jquery.fancybox-1.3.4.pack.js', null, array('handle' => 'jquery.fancybox', 'version' => '1.3.4'))); $this->addHeaderItem($html->css($this->getThemePath() . '/js/fancybox/jquery.fancybox-1.3.4.css', null, array('handle' => 'jquery.fancybox', 'version' => '1.3.4')));
Now, as long as you have that code before the Loader::element('header_required') line, it will load your own fancybox and *not* load deluxe image gallery's.
Let me know if you run into any problems with this.
-Jordan
Dear Jordan
Thank you for the directions and code. I won't have time to work with it until next week, but as soon as I have tried it out I will let you know.
best regards
Arlene
Thank you for the directions and code. I won't have time to work with it until next week, but as soon as I have tried it out I will let you know.
best regards
Arlene
Hi Jordan
Finally got to working with your suggestions. Unfortunately, "my" fancybox is not loading. FYI I am using a modified version of the "Greek Yogurt" theme from C5
I was wondering if the path in the code is correct - tried adding one "." then two ".." in front of "/js/fancybox/..." because "header.php" is in "elements", and "fancybox" is in "js". Here is how my "header.php" looks now:
I was able to change the background (overlay?) color through the custom template, but the rest of
my changes (matching caption text area color and negative beige text in google font) can't be done without altering the fancybox.css file.
I am perfectly willing to keep experimenting if you have any further suggestions.
Otherwise I will set the version number higher. Thanks for all your help so far...
Finally got to working with your suggestions. Unfortunately, "my" fancybox is not loading. FYI I am using a modified version of the "Greek Yogurt" theme from C5
I was wondering if the path in the code is correct - tried adding one "." then two ".." in front of "/js/fancybox/..." because "header.php" is in "elements", and "fancybox" is in "js". Here is how my "header.php" looks now:
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <!DOCTYPE html> <html lang="<?php echo LANGUAGE?>"> <head> <?php $html = Loader::helper('html'); $this->addHeaderItem($html->javascript($this->getThemePath() . '/js/fancybox/jquery.fancybox-1.3.4.pack.js', null, array('handle' => 'jquery.fancybox', 'version' => '1.3.4'))); $this->addHeaderItem($html->css($this->getThemePath() . '/js/fancybox/jquery.fancybox-1.3.4.css', null, array('handle' => 'jquery.fancybox', 'version' => '1.3.4'))); Loader::element('header_required'); ?> <!-- Site Header Content //--> <link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/reset.css" /> <link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/text.css" /> <link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/css/960_24_col.css" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
Viewing 15 lines of 18 lines. View entire code block.
I was able to change the background (overlay?) color through the custom template, but the rest of
my changes (matching caption text area color and negative beige text in google font) can't be done without altering the fancybox.css file.
I am perfectly willing to keep experimenting if you have any further suggestions.
Otherwise I will set the version number higher. Thanks for all your help so far...
Okay Jordan - I think I was trying to get too elegant!
I think I solved the problem by appending my "main.css" file with the "fancybox.css" rules and /*NOTES*/, and added the fancybox images to my "images" folder. DUH.
Any reason why this is a bad idea? Thanks & Whew!
Arlene
I think I solved the problem by appending my "main.css" file with the "fancybox.css" rules and /*NOTES*/, and added the fancybox images to my "images" folder. DUH.
Any reason why this is a bad idea? Thanks & Whew!
Arlene
Nothing bad at all about that technique. I use it all the time myself actually, and I'm sorry I didn't think to recommend it in the first place!
Yes, there are unfortunately a lot of inconsistencies in how Concrete5 handles overrides (as you've discovered here), and using your theme CSS to override everything else is often the only sane solution.
Yes, there are unfortunately a lot of inconsistencies in how Concrete5 handles overrides (as you've discovered here), and using your theme CSS to override everything else is often the only sane solution.
Jordan has posted very helpful directions on how to customize the appearance of the fancybox over a year ago:
http://www.concrete5.org/marketplace/addons/sortable-fancybox-galle...
I just want to add, that this not only works with overlay color and opacity of the lightbox, but also with all other attributes (to be found at the last lines of the file jquery.fancybox-1.3.4.pack.js), such as
'showCloseButton': false,
'cyclic': true,
'padding': '6px',
etc.
Michael
http://www.concrete5.org/marketplace/addons/sortable-fancybox-galle...
I just want to add, that this not only works with overlay color and opacity of the lightbox, but also with all other attributes (to be found at the last lines of the file jquery.fancybox-1.3.4.pack.js), such as
'showCloseButton': false,
'cyclic': true,
'padding': '6px',
etc.
Michael
I'm sorry I can't provide a lot of support on how to customize the fancybox look itself (it is not something I know how to do, and not a feature that is part of this gallery addon).
But I think your best bet would be to create different versions of all the images that fancybox uses as part of its style, found here:
/packages/deluxe_image_gallery/blocks/deluxe_image_gallery/fancybox/images
...if you replace those images with new ones that are the same exact size and same exact name, but are colored differently, that should do the trick.
-Jordan
PS - if that works, hold on to copies of those images -- in case they get overwritten in a future update of Deluxe Image Gallery, you'll want to have them available to re-replace with.