Monitor Reply

Support

Single Gallery Arrows

Permalink Browser Info Environment April 08, 2016 at 6:42 PM

Hey - Best practice to customize the arrows in the single galleries?

Type:	Discussion
Status:	Resolved

emirii replied on Apr 8, 2016 at 7:01 pm Permalink Reply

Hello! You can customize the arrows on the sliders, assuming you are using the Flexslider option you can add a CSS override to your main theme CSS like so:

/* previous arrow */
.flex-direction-nav a:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-left.png') no-repeat;
    width: 40px;
    height: 40px;
}
/* next arrow */
.flex-direction-nav a.flex-next:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-right.png') no-repeat;
    width: 40px;
    height: 40px;

Viewing 15 lines of 16 lines. View entire code block.

 
/* previous arrow */
.flex-direction-nav a:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-left.png') no-repeat;
    width: 40px;
    height: 40px;
}
/* next arrow */
.flex-direction-nav a.flex-next:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-right.png') no-repeat;
    width: 40px;
    height: 40px;
}

That is if you want image arrows, of course you can do the same with font arrows using font CSS & the content property.

If you want to keep the font arrows but want to change the color, etc:

/*if you want to keep font, you can customize the color and size here as well*/
.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 40px;
    height: 50px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);

Viewing 15 lines of 21 lines. View entire code block.

 
/*if you want to keep font, you can customize the color and size here as well*/
.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 40px;
    height: 50px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

or if you don't want any transition:

.flex-direction-nav a {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none
    -o-transition: none;
    transition: none;
}

Let me know if you had something different in mind, hope it helps, thanks!

juddc replied on Apr 8, 2016 at 7:40 pm Permalink Reply

I've got a button with the classes "mfp-arrow mfp-arrow-right mfp-prevent-close".

Maybe best I just try and overwrite them in my own css?

emirii replied on Apr 8, 2016 at 11:08 pm Permalink Reply

Oh! The lightbox. Yes, you can override the arrows in the light box using css:

For example if you want a solid white color arrow:

.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 12px solid #fff;
    left: 3px;
}
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 12px solid #fff;
    left: 5px;
}
.mfp-arrow {
    opacity: 1;
}

Or if you want an image background:

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: none;
    background-image: url('http://gallery57.ificouldfly.net/application/files/gallery/watermark/10/7419272424_48db0dba7c_b.jpg');
}
.mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 0px;
    border-bottom-width: 0px;
}
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    width: 50px;
    height: 50px;
    margin-top: 0px; 
    margin-left: 0px; 
}

The arrows are buttons, so you can put border/background color (or image) or whatever CSS allows on a button. You just have to override what's already there.

Hope that helps!

juddc replied on Apr 9, 2016 at 3:10 pm Permalink Reply

That worked - thanks. Important to note that if I had it in the
.ccm-page wrapper it did not work. But outside the wrapper it worked fine.

Thank you!

On 2016-04-08 8:08 PM, concrete5 Community wrote:

GalleryES

Support

Single Gallery Arrows

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post