How do I change the colour & opacity on arrows and x in magnific popup

charles_i · 2014-10-30 01:38:53

I tried .mfp-arrow and .mfp-arrow-left in the custom_thumbnail css but it doesn't work.

Thanks
Charles

Last edited by charles_i (2014-10-30 05:30:17)

rod barbee · 2014-10-30 01:48:21

try
.mfp-gallery .mfp-arrow-left:before, .mfp-gallery .mfp-arrow-right:before {
color: red;
}

charles_i · 2014-10-30 05:28:58

Thanks, that worked. I also made the opacity 100% and removed the shadow using this:

.mfp-gallery .mfp-arrow {
opacity: 1;
filter: alpha(opacity=100);
text-shadow: none;
}

One other related question, how do I do the same (100% and remove shading) on the close "x" button? (I added this to the question for further searches - hope that's OK.)

Last edited by charles_i (2014-10-30 05:30:45)

rod barbee · 2014-10-30 06:25:24

look at it with the inspector. You'll see the selectors:

<button class= "img-close">
    <i class="fa fa-fw fa-times"></i>
</button>

charles_i · 2014-10-31 03:56:04

I got it, thanks. I didn't need all the CSS in the arrow code so the complete final CSS is:

/* arrow colours */
.mfp-gallery .mfp-arrow-left:before, .mfp-gallery .mfp-arrow-right:before  {
    color:#647a53;
}

/* arrow shading none */
.mfp-gallery .mfp-arrow {
    opacity: 1; 
    text-shadow: none;
}

/* x window close colour */
ul li .img-close {
    color:#647a53;    
}

/*  x window close shadow none */
.img-close {
    text-shadow: none !important;
}

It's difficult to figure out that page code. I was trying to use source code but it shows the thumbnail page with the js code for the popup. The inspector is a big help but it doesn't stay focused on the page because it's a popup window.

Thanks for your help.

Last edited by charles_i (2014-11-01 01:33:00)

rod barbee · 2014-10-31 05:10:08

which inspector are you using? I use the one build into Firefox and it stays at the bottom of the same page it's inspecting.

charles_i · 2014-11-01 01:20:55

I use Firefox as well. The difference I found with the popup page is that unlike the thumbnail page if you run the cursor over the actual page it only partially works (it seems to work on the first try but as soon as you change focus to the code it stops working if you go back to the actual page) - perhaps it's because the cursor is a magnifier. I just discovered it does work in the code portion but you have to find the element you're looking for in there instead of being able to find it on the page with the cursor.

Another odd thing, yesterday the text-shadow:none worked on .image-close - but it didn't work today when I went back to it so I added !important. I noticed doing this that sometimes I get odd results like that even when I've cleared the cache.

Last edited by charles_i (2014-11-01 01:32:33)

Community @ The Turning Gate

#1 2014-10-30 01:38:53

How do I change the colour & opacity on arrows and x in magnific popup

#2 2014-10-30 01:48:21

Re: How do I change the colour & opacity on arrows and x in magnific popup

#3 2014-10-30 05:28:58

Re: How do I change the colour & opacity on arrows and x in magnific popup

#4 2014-10-30 06:25:24

Re: How do I change the colour & opacity on arrows and x in magnific popup

#5 2014-10-31 03:56:04

Re: How do I change the colour & opacity on arrows and x in magnific popup

#6 2014-10-31 05:10:08

Re: How do I change the colour & opacity on arrows and x in magnific popup

#7 2014-11-01 01:20:55

Re: How do I change the colour & opacity on arrows and x in magnific popup

Board footer