Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Pangolin Popup box styling

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.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,916
Website

Re: Pangolin Popup box styling

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Re: Pangolin Popup box styling

Thanks Rod,
I'll experiment then.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Re: Pangolin Popup box styling

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.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

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

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,875
Website

Re: Pangolin Popup box styling

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Re: Pangolin Popup box styling

Thanks Matt


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,916
Website

Re: Pangolin Popup box styling

Hey Tom,

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Re: Pangolin Popup box styling

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.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

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

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 216
Website

Re: Pangolin Popup box styling

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.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

Board footer

Powered by FluxBB