Pangolin Popup box styling

tomowensphoto · 2017-07-16 02:15:14

Hi Rod,
I used your tip for a Pangolin type popup box from the Tips area.
It works. However, when we had Magnifc the box would be styled with a header bar that fitted the look and feel of everything else.
I can see by the Localization page that the majority of styling and content is geared towards images being displayed and sold etc.
If you look at my Exhibitions page on the link under my signature you will see a button about Future Exhibitions that opens a new Pangolin type popup box.
How do I make that neater to follow the look and feel of other aspects of the site?
Do you know of any examples of code I can look at as I have not been able to fathom out the Fancybox stuff that comes up on the web as it all seems to be geared towards images.
Virtually everything I do is more or less straight out of the box. I take the view that Matt & Ben have done all the hard graft here to save me aggro.
I'm working on 1.2.2 Beta at present.
Thanks.

rod barbee · 2017-07-16 03:11:28

The pop up is just a div with the ID of "popup". Inside that div there a currently just p tags.
I imagine you can put any HTML structure you like inside the div and style it to your liking.

I can imagine starting with a heading tag and giving it a custom class:

<h2 class="my-popup">Popup Heading</h2>

And follow that with paragraphs.

In your custom CSS create the .my-popup class and give it styling. If you want it to look like a bar, make the background-color dark and the text light. You could add padding to make the bar more substantial.
And instead of a solid background-color you could make it a gradient to give it a more 3D look.

If you want a different backgroundground-color for the popup, use the popup ID to target the div.
Different font for paragraph text, target #popup p

Lots of possibilities.

tomowensphoto · 2017-07-16 03:18:43

Thanks Rod,
I'll experiment then.

tomowensphoto · 2017-07-18 16:23:28

OK,
I had had a go and obviously I can style the content of the popup. Where I am struggling at for the moment is how do I replicate the feature we had here as in Matt's Magnific popup
<div id="the__popup" class="mfp-popup mfp-hide">
<p class="page__ui mfp-title">Popup Title</p>
<div class="content clearfix">

The page__ui mfp-title looks like it controlled the display of the popup and picked up the site site styling for the titlebar.
I suppose my real question is how do I make the popup look like what Magnific generated? Is this a phplugins thing and if it is how do I not screw up all the other Fancybox dependencies?
Thanks.

Matthew · 2017-07-18 17:02:39

Just put whatever markup you like into the popup for your title, then providing styling for it. Adding to Rod's existing example, something like this:

<button data-fancybox data-src="#popup">Button</button>
<div id="popup" style="display:none;">
<h2 class="popup-title">Title</h2>
<p> Stuff and things ... </p><p>Sed maximus enim felis, et interdum risus vehicula vel. Mauris vitae ligula vulputate, facilisis odio eget, accumsan lacus. Pellentesque suscipit ante leo, sed consectetur magna aliquet at. Fusce	consectetur ullamcorper rhoncus. Fusce ac aliquam nisl. Vestibulum ac congue lorem.</p>
</div>

Then providing styling for .popup-title.

tomowensphoto · 2017-07-18 18:21:50

Thanks Matt

rod barbee · 2017-07-21 00:24:02

Hey Tom,

more on styling your popup boxes: http://ttg-tips-and-tricks.barbeephoto. … pup-boxes/

tomowensphoto · 2017-07-21 01:23:40

Many thanks Rod,
You have saved me hours of extra work. I had started doing some stuff but moving the bar up to the top is exactly what I was after. I'll get a proper chance to do something over the weekend but will try something on the fly tonight if I can as I'm travelling.

tomowensphoto · 2017-07-21 03:56:23

I've given it a quick go on the road and it works a treat Rod. I'll tidy things up a bit when I get back but thanks again. A very good tutorial for a numpty like me.

Community @ The Turning Gate

#1 2017-07-16 02:15:14

Pangolin Popup box styling

#2 2017-07-16 03:11:28

Re: Pangolin Popup box styling

#3 2017-07-16 03:18:43

Re: Pangolin Popup box styling

#4 2017-07-18 16:23:28

Re: Pangolin Popup box styling

#5 2017-07-18 17:02:39

Re: Pangolin Popup box styling

#6 2017-07-18 18:21:50

Re: Pangolin Popup box styling

#7 2017-07-21 00:24:02

Re: Pangolin Popup box styling

#8 2017-07-21 01:23:40

Re: Pangolin Popup box styling

#9 2017-07-21 03:56:23

Re: Pangolin Popup box styling

Board footer