Add a custom hover shadow

  • marco
  • Topic Author
  • Administrator
  • Administrator
More
2 months 6 days ago - 1 month 3 weeks ago #2 by marco
Add a custom hover shadow was created by marco
How is it possible to add a custom hover shadow for tiles and / or thumbnails?
Last edit: 1 month 3 weeks ago by marco.
The topic has been locked.
  • marco
  • Topic Author
  • Administrator
  • Administrator
More
1 month 3 weeks ago #3 by marco
Replied by marco on topic Add a custom hover shadow
First thing you have to do is come up with a name for a new class. Let's say "custom-shadow".
Next you have to enter this class in the module settings for the thumbnails or for the tiles:
For tiles:
In the tab "Albums overview" in the section "Tiles Configuration" you will find the option "Additional Tile Classes" in this field we now write the name of our new class.

For thumbnails:
In the tab "Image & Lightbox" you will find the option "Add. CSS Classes for Thumbnails" - Here you can also enter our class custom-shadow as well.


Now you have to come to the CSS code for a shadow effect. For this you can use the CSSmatic service:
www.cssmatic.com/box-shadow

Create the shadow you want with the generator and copy the generated CSS code on the right side:
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
So that we can use the whole thing as a style statement we have to modify something now:
.custom-shadow{
    transition: all 0.2s ease-in-out;
}

.custom-shadow:hover{
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    transition: all 0.2s ease-in-out;
}

The transition instructions ensure that soft transitions are created.

But now you have to add these CSS instructions somewhere. The provider of your template has given you a manual with the template - this contains where / how you can add your own CSS parameters in the template. Many templates use a template.css or a custom.css file for such instructions. With Joomla! own templates you can find the Template.css under : Extensions--> Templates --> Templates --> <YOUR TEMPLATE> Details and Files --> Folder "CSS" on the left --> template.css

Here you see an editor in which you can enter the CSS parameters. Best-Practice is to add your custom content at the end of the file (at the bottom) with a preceding comment like
/* My Custom CSS rules */
.
The topic has been locked.
Powered by Kunena Forum