Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver and WordPress: Core Concepts

Adding Spry accordion panels


From:

Dreamweaver and WordPress: Core Concepts

with Joseph Lowery
Expand all | Collapse all
  1. 4m 7s
    1. Welcome
      58s
    2. Using the exercise files
      1m 54s
    3. A word about updates
      1m 15s
  2. 15m 28s
    1. Overview
      1m 51s
    2. Creating the database and the initial site
      3m 45s
    3. Configuring WordPress
      5m 54s
    4. Establishing a Dreamweaver site
      3m 58s
  3. 20m 18s
    1. Accessing dynamically related files
      4m 12s
    2. Filtering files
      4m 20s
    3. Following links
      4m 15s
    4. Employing Live Code
      2m 54s
    5. Enabling site-specific code hinting
      4m 37s
  4. 21m 8s
    1. Adding blog posts
      4m 55s
    2. Editing blog posts
      3m 20s
    3. Adding new pages
      2m 59s
    4. Including images
      6m 59s
    5. Adding videos to posts
      2m 55s
  5. 18m 12s
    1. Understanding WordPress structure
      3m 52s
    2. Activating a theme
      7m 21s
    3. Setting up a child theme
      6m 59s
  6. 1h 29m
    1. Updating the page structure and the background
      12m 53s
    2. Working with web fonts
      4m 3s
    3. Styling a header
      11m 48s
    4. Adding header functions
      7m 40s
    5. Setting up content columns
      10m 9s
    6. Changing the main content
      5m 17s
    7. Managing the content code
      4m 48s
    8. Customizing the sidebar
      10m 32s
    9. Styling search
      7m 8s
    10. Working with search text
      5m 49s
    11. Integrating the footer
      9m 40s
  7. 27m 18s
    1. Setting up media queries
      6m 12s
    2. Customizing for tablets
      12m 19s
    3. Building smartphone layouts
      8m 47s
  8. 23m 28s
    1. Working with categories and posts
      5m 31s
    2. Developing category-driven pages
      11m 22s
    3. Changing headers by category
      6m 35s
  9. 36m 32s
    1. Adding Spry accordion panels
      17m 44s
    2. Working with Spry form validation
      11m 56s
    3. Integrating jQuery functionality
      6m 52s
  10. 11m 7s
    1. Understanding WordPress plugins
      6m 20s
    2. Styling plugin output
      4m 47s
  11. 25m 44s
    1. Customizing the Dashboard
      6m 52s
    2. Working with WordPress functions
      8m 7s
    3. Including administration interactivity
      10m 45s
  12. 13m 10s
    1. Setting up the data in WordPress
      2m 17s
    2. Adding dynamic data from WordPress to your web pages
      10m 53s
  13. 11m 38s
    1. Modifying general settings
      4m 12s
    2. Setting up users
      3m 11s
    3. Restricting access to specific WordPress pages
      4m 15s
  14. 26m 38s
    1. Exporting and importing WordPress files
      7m 9s
    2. Backing up and restoring the database
      8m 10s
    3. Transferring files
      6m 3s
    4. Testing and fine-tuning
      5m 16s
  15. 18s
    1. Next steps
      18s

Video: Adding Spry accordion panels

Dreamweaver has a good number of layout power tools built right in, many of which rely on the Adobe fostered framework Spry. Putting them in a standard Dreamweaver page is pretty much point and click. Adding them to a WordPress page takes a bit more work, but it's definitely doable. In this lesson, I'll show you how to add a Spry Accordion panel to a WordPress page. But first, let's create a new page template to work with. To do that, I am going to copy the index.php page.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Dreamweaver and WordPress: Core Concepts
5h 44m Intermediate May 27, 2010 Updated Oct 23, 2012

Viewers: in countries Watching now:

In this course, author Joseph Lowery shows how to combine the utility of WordPress and the power of Adobe Dreamweaver to transition existing websites to the WordPress platform. The course demonstrates how to create new blog posts and pages, customize WordPress themes, and extend WordPress editable pages from within Dreamweaver. It also covers how to add Spry elements, add and customize plugins, and enhance WordPress-stored content with Dreamweaver's dynamic pages. Plus, a chapter on responsive design shows how you can adapt your layouts for tablets and mobile devices.

Topics include:
  • Using the Dynamically-Related Files feature in Dreamweaver to design WordPress pages
  • Applying WordPress themes
  • Customizing themes
  • Adding Spry widgets
  • Adding WordPress dynamic data
  • Populating the WordPress database
  • Publishing a WordPress site
Subjects:
Web CMS Blogs Web Design
Software:
Dreamweaver WordPress
Author:
Joseph Lowery

Adding Spry accordion panels

Dreamweaver has a good number of layout power tools built right in, many of which rely on the Adobe fostered framework Spry. Putting them in a standard Dreamweaver page is pretty much point and click. Adding them to a WordPress page takes a bit more work, but it's definitely doable. In this lesson, I'll show you how to add a Spry Accordion panel to a WordPress page. But first, let's create a new page template to work with. To do that, I am going to copy the index.php page.

So let me expand my Files panel, and in the roux folder, I'll select index.php, and then press Command+D for duplicate. Once that's done, I'll select the index - Copy.php and rename it, and I am going to name it events. Now, let's open it up. I'll collapse the Files panel and go into Code view. Now, I need to add my template declaration header up top here. So, I'll do that starting with a PHP code block, and then my comment frame, and inside of there, Template Name: Events.

So now, I'll save that page, and let's create a new page in WordPress that uses our Events template. So I'll go to Pages > Add New. I'll put in a title for this one, Homecoming is coming! And just some sample placeholder text for now, Text for homecoming event. Let's switch the Template to Events and Publish. Okay.

We'll view the page, and there is our Roux Academy Blog, Homecoming is coming! Now, let's customize this a little bit more. We'll go back to Dreamweaver, and change Roux Academy Blog to Roux Academy Events. I'll save that. Once I go back to my browser and click Refresh, that update will take place immediately. You can easily go back and forth between Dreamweaver and WordPress, making changes as needed. So now we're ready to add in our Accordion panel.

I am going to go into Split view here, and you'll notice that I have Invisible Elements turned on. Now, that's found under the view options, and it's very handy sometimes for quickly isolating certain code blocks, especially when you've got lots of PHP code, and you're not quite sure what is what. Rather than staring at the code, sometimes I'll go into Split view, and if I know about where the code block takes place, I can find it more easily. So, what I want to do is select the PHP code block right after Not Found.

That PHP code block ends the loop within WordPress. So, we're going to go just outside that. So I am going to click my right arrow once, and move, as you can see, in Code view just to the right of the code block. And now we're ready to insert our Spry Accordion panel. So, let me double-click on the Insert Tab here. Then I will switch to Spry. You could also go to Layout if you wanted to, but sometimes Spry is easier. And I'll scroll down 'til I see Spry Accordion, and click it once to insert it.

Now, let me open up my Property Inspector. It's very handy when working with Spry, especially when you're working in Split or Design view, you can really take advantage of Spry's tight integration and use the Property Inspector for a lot of different kinds of manipulation. For example, now that I have the Spry Accordion Tab selected, that will give me my custom Property Inspector. And if I want to add a third panel here, I'll just select Label 2, that's the second panel, and click the Add button. That will put a third panel right after my selection.

Now, let's go ahead and change the headings. I am going to go ahead and just select the first one to open it up. I'm going to make the first heading Transportation. This Accordion panel will contain some standard content that I want to appear on every events page. So, we'll have some information about Transportation. We'll also cover Restaurants, and I'll put that label in Label 2, and Label 3 will become our Lodging category. All right. Let me save the file.

When you save any file with a Spry component, Dreamweaver lets you know that it needs to copy some files to the site root. So, let's okay that. Now, I am going to go back into my Files panel, expanding that, and show you what just took place. Here is a folder just added. Let me collapse blog, so we can see better what's going on for SpryAssets. If I expand that, we'll find two files, one for the CSS and one for the JavaScript. I want to copy both of these files.

So I've selected them now, and I'll press Command+C to copy them, and I am going to put them in the roux folder. Let me just scroll down. I believe it's already opened up, and there it is. I am going to go ahead and just put it in a similar folder that I'll create now by right-clicking on roux, and name it the same, SpryAssets. And with that selected, press Command+V to paste in my files. Now what we're going to do is go back to our code, where if we scroll to the top, you'll see that a script and a link tag were added, pointing to where the files were initially saved in the site root.

We're going to change this path so that it points to the roux folder, SpryAssets folder. And for that, I'll use a WordPress function called bloginfo to find the stylesheet directory. So, it's a PHP code block. And within that is the function bloginfo with the parentheses and followed by a semicolon. Within the parentheses, we'll use double quotes and the key term stylesheet_directory.

This will point to whatever folder is using the current theme's stylesheet which works really well when you're working with child themes as we are. Okay, I've retained a trailing slash after that. That's good. So now I can just copy this PHP code and use it to replace most of the initial path for my link tag. So, let's save that. Now, let's take a look at that in the browser. So, I am going to head back to the browser page that I had opened with Roux Academy Benefits.

And if I refresh the page, I'll now see my Accordion panel has been added to the page after the text that I put in. So, I can click on Restaurants, Lodging, go back to Transportation. All seems to be working very well. Obviously, we'll need some styling. But before we get to that, let's add in some content. So I'll go back to Dreamweaver, and I have some content already prepared. It's stored within our exercise files. So I go to File > Open, go to Desktop/Exercise Files/ Chapter 8/08_01/accordion panel copy.htm.

Open that up. I'll go into Split view so you can get a better sense of it. And here you can see it's divided into certain areas. The last one, Lodging, even has a few images there. So, I'll just copy this initial text here for Transportation, go to my Events page. And because I copied it from Design view, I am going to paste it in Design view. So let me highlight my Spry Accordion here. I am already in Content 1. So I can select that bit of placeholder text and paste it in my code there.

Now, let's go back, and let's get the next one which is under Restaurants. This time just to do a little variety of things, I am going to go ahead and copy the text in Code view, and following my basic rule of pasting in wherever you copied from. Here is Content 2, the Restaurants, so let's paste that in. Now, I notice that when I copied in my text from above, it didn't bring in a paragraph tag.

So I can quickly adjust that. I'll put my cursor right after the end here and just hit Enter once. That not only creates a new paragraph line with a non-breaking space, but it also wraps the previous text in a paragraph line. So, that's a quick little shortcut. Let me hit my Delete key to go back and get rid of that unneeded P tag. All right. Let's go ahead and get the final option which is Lodging. So, I'm going to just select the first image there to go right down to the code.

Now you want to be sure to get the div that's above that image, and the h3 tags, and then scroll all the way down to the bottom here, and get the closing div as well. There is a couple of divs that are being used here to provide some in-line styles, specifically a margin bottom to separate these two. Obviously, for the final product, you would want to incorporate that into your CSS stylesheet, and not use the in-line styles, but for our purposes, it works. So, I am going to copy that, head over to events.php, and let's scroll down to where Content 3 is.

I am going to click the Delete key to remove it, and now I'll paste in my other content. Now, if we take a look at this in Split view, you will notice that the paths are not coming in correctly. In fact, we need to adjust the paths so that they point to the Roux theme directory. And for that, I am going to go up and since we already have used this code block once, I am going to grab that same PHP bloginfo stylesheet_directory code block.

Copy that, head back down to where the images are, and put it right in front of the first source value, paste that in. Now, we're not quite done, so the bloginfo stylesheet_directory will take us to the roux folder. Now we want to go into the _images folder. So I'll add that to my path and put another trailing slash. Now, this entire bit of code here is really the path that we want in front of the other image as well. So I am going to copy that, go down to fancy_hotel.png, and paste that in. All right.

Let's save that page, and head on over to our browser, where if we refresh the page, we'll see some content added. There is my Restaurant list, and let's check out the Lodging, and there is our hotels. All right. All the content is in place, we definitely need some styling now. Let's go back to Dreamweaver, and I am going to close my Accordion panel copy file. We don't need that anymore. Now, let me go over and reduce both the Insert panel and the Files panel so we can give full focus to our CSS Styles panel.

Now, one thing that I've noticed when working with Spry components, I find that it's actually easier to use the All mode of the CSS Styles panel rather than the more frequently used Current mode. Now, you'll notice right here in the events.php file, if I switch to the All mode, I have a listing for SpryAccordion.css but no style rules. That's because you cannot make modifications to just the events page. You have to go to the index.php page with all of its dynamically related files.

So let's switch to that. And I don't have a events page linked from the navigation anywhere. So when you're working with your pages, the easiest way to handle it is to go back to the browser for just a second, select and copy the URL for the page you want to work with, and then head back to Dreamweaver, and insert it into the location bar and press Return or Enter. So now, I'm working with my Accordion panel right within Dreamweaver, and I have my stylesheet in All mode, and I can expand that. Let's bring the Properties down just a little bit so we can see some of the various properties there.

And we're ready to crawl down the SpryAccordion.css sheet. So, the first thing I'm going to change is the color of the tab that we see here, so the AccordionPanelTab. What I want to do is instead of using this light gray background color, I am going to sample the purple that we see here. So I'll sample that. Now, notice that two of them changed, but we'll get to the one that did not change in just a second. I also want to make sure that the color is white rather than this default black.

So, let's add a color property here, and I'll just type in white. Next up is the one right below that which is the AccordionPanelContent. And as you can see, the content here under the Transportation tab that's open kind of goes right up to the edge of the screen. So, that's because there is 0 padding by default. Let's make that 10 instead of 0. Next up is the next rule which handles the properties for the Accordion panel tab when the panel is actually open, and I am going to just keep it consistent.

Let's make our background color the same, sample purple there, and let's go ahead and add a color: white just to be sure. Next, let's do AccordionPanelTabHover, and I am going to scroll up the page just a little bit, so I can pick up the orange here that's in the R. So I'll click into the color swatch and go over and sample that color. So, let's scroll down all the way to the ones that are close, and you can see the orange appearing there. Now, we have to do the same thing for the Open panel. So we'll scroll back up and sample that orange. All right.

We are almost done, we have two more rules to do here, and that is the AccordionFocused section. So, if you notice that when I roll over and if I click on anything, once the Accordion panel has focused, it has a whole other set of colors. And we want to of course make that conform to what we've been using. So here I have my background color. I'll sample again the purple. Let's add the color property, and set that to white, and we're just going to duplicate that exact same thing for the next rule, color: white.

Okay, so let's take a look. There is all the various panels seem to be working correctly and they definitely are fitting within our style. Now, there is one last style issue to address that's not related to the Spry components. If you expand the Restaurants panel as I have here, you can see the list of Restaurants is pretty bland, and honestly, it's not terribly readable. If we take a look at the code on the events.php page for that section, we can see that definition lists are used.

Rather than just generically style all definition lists for the site, let me show you how to target a specific template page. So, I am going to go back to my index.php file, and let's enter into Live code. And I am going to go up to the body tag. Let me just choose on the tag selector here so it will go right below that. Now, you'll notice there are number of classes that are dynamically added by WordPress, there is page, there is page-id-55, there is page-template, and there is also a page-template-events-php.

That's the exact class that we need in order to target our definition list CSS rules. So, with that selected, I'll copy it, drop out of Live code, go back to our style sheet, and I am going to add about three rules. I am going to put them down towards the bottom here. Let's put them in between the footer and the video container. So first, I'll put in a dot for the class and then paste in my selector, and we want to first style the definition list itself. And all we need to do here is just add a margin-left of 20 pixels.

Next, we'll target the definition term which is the first phrase in the definition list, and let's make those stand out a bit with a font-weight of bold. Now, let's do the definition data with our same selector and set that padding so that there's some separation on the bottom and on the left. So, padding: 0 0. Let's do 15 pixels for bottom and 20 pixels for the left. Okay.

I'll save all of our files. Let's go up to File > Save All Related Files to make sure we've got everything, and I'll click on Design view. And now you can see the results of our little bit of styling. Well, that looks pretty good. Now, let's head back to the Dashboard and make it easy for us to access our page by adding the homecoming page to our sidebar menu. So go to Appearance > Menus, and here is Homecoming is coming! I'll just add that to the current menu and save the menu. So now when we take a look at the page, we'll see that there, and I can click on it, and there's my Accordion panel looking pretty good.

All of the techniques we used in this lesson can also be applied to Dreamweaver's other Spry layout tools, including tabbed and collapsible panels.

Find answers to the most frequently asked questions about Dreamweaver and WordPress: Core Concepts.


Expand all | Collapse all
Please wait...
Q: While trying to set up a Dreamweaver site, an error occurs that says Dreamweaver cannot resolve the dynamic files because the site definition is incorrect. What is causing this? This is using WAMP on a Windows 7 computer.
A: When setting up the site in Dreamweaver and creating a local testing server, make sure to point it to the folder in c:/wamp/www/ that is being used for the site. If using the same naming convention as shown in the videos, the server folder should be pointing to C:\wamp\www\explore_ca\ and the Web URL field should read http://localhost/explore_ca/, like the picture here:

Q: How do I set the password for WAMP Server 2?
A: The WAMP server does not include a password for MySQL when first installed. You’ll need to add a password by modifying a configuration text file and set up a password in the MySQL server.
Setting a password on the MySQL server:

  1. From the Start menu, enter CMD to open the command line interface.
  2. Switch to the bin directory of your MySQL folder, installed by WAMP. For version 5.1.36 of MySQL, for example, enter cd c:\wamp\bin\mysql\mysql5.1.36\bin
    Navigate within the WAMP folder installed on your system to find the proper path.
  3.  Enter the following: mysql -u root
  4. The command line for MySQL will open with a mysql prompt like this: mysql>
  5. Enter the following:
    SET PASSWORD for 'root'@'localhost' = PASSWORD('yourPassword');
    - replace 'yourPassword' with the password you want to use. 
  6. Close the CMD window.
Setting the password in the phpMyAdmin config file:
After you change the MySQL password you will have to edit the config.inc.php file. Here's how:
  1. In Windows Explorer, navigate to C:\wamp\apps\phpmyadmin3.2.0.1 (version number may vary). 
  2. Open the file config.inc.php in Dreamweaver or another text editor.
  3. Locate the following line:
    $cfg['Servers'][$i]['password'] = '';
  4. Enter your password between the quotes; make sure the password is the same as the one you set in the MySQL server.
  5. Save the file.
  6. From the system tray icon for WAMP, choose Restart All Services.
  7. To test, choose phpMyAdmin from the WAMP system tray icon.

Q: After creating a template following the instructions in the Chapter 5 video “Creating a page template in Dreamweaver,” I am unable to select the template. In the video, the instructor’s page shows a heading of Template, with a dropdown menu, but my version shows only a dropdown labeled “Attributes,” and the newly created template does not appear. What is causing this issue?
A: This seems to be a bug in WordPress that occurs occasionally. Although a cause has yet to be determined, a possible workaround to get the Template option to appear is switch themes. Switching to the default theme and then back again to Explore_California should reveal the Template option.
Q: While following along with the instructions in the "Setting up a MySQL password for Windows," I encountered this error: MySQL said: "#1045 – Access denied for user ‘root’@’localhost’ (using password: NO)" What is causing this error?
A: This error occurs when trying to enter the MySQL monitor with a password for a user who has not set a password yet. In that case, removing the “-u root” part should resolve the problem.
Q: While following along to the chapter 2 movie "Using dynamically related files," I get an error message that reads: "Dynamically-related files could not be resolved because the site definition is not correct for this server." What is causing this error?
A: This is a known issue with Dreamweaver, and relates to the permalink settings in the WordPress installation. If the permalink setting is set to something other than the default, like “Month & Name,” for example, Dreamweaver is unable to resolve the dynamic files, and the described error will occur. Changing the permalink setting back to Default will clear the error.
Q: I am bit confused as to my need to use MAMP with a WordPress site in Dreamweaver. If I am going to use a separate commercial hosting site as my server, do I still need to use MAMP in my WordPress site?
A: MAMP is installed to provide an easy-to-use development server capable of handling MySQL and PHP on your local computer. It's also possible to set up MySQL and PHP servers separately, but it requires many more steps and is not as "user-friendly" as the described process. Your hosting server will have MySQL/PHP enabled on their servers for the remote live setup, but that doesn't have anything to do with developing and testing pages on your own computer.
Q: I can't find the file named commevents.php in the exercise files. I need it to set up an online database in the last chapter.
A: This is a file you create yourself when you first connect to a database. Refer to the "Adding WordPress dynamic data to pages" video in Chapter 7. commevents.php should appear in the Connections folder once you establish a connection.
Q:  In "Setting up a MySQL password for Windows", I'm getting the error "#1045 - Access denied for user 'root'@'localhost'" when testing the phpMyAdmin.

If I try and re-do the steps, I get the following error "ERROR 1044 (42000): Access denied for user ''@'localhost' to database mysql'" when I try to change the password.
A: This seems to be happening because of the combination of Windows 7 and a
new version of WampServer 2.1. Here's another approach that should work
for the new combination.

Follow these steps instead of the ones using the CMD prompt. (As a bonus, they're much easier!)
  1. Left-click on the WampServer icon tray.
  2. Choose phpMyAdmin.
  3. When the phpMyAdmin page opens in your browser, click the Privileges tab found after the Engines tab.
  4. Locate the line in the User table with "root - localhost - No..." (probably the last one).
  5. Click the Edit icon (the final item in the row).
  6. Scroll down to the Change Password section.
  7. Select Password and enter your password twice. (If you're following the exercises, enter root).
  8. Click Go in the lower-right corner.
Now follow the rest of the steps in "Setting up a MySQL password for Windows" video, starting at the 4:13 mark. This is where you use a text editor to make a change in the config.inc PHP file and restart all WampServer services when you're done.
Q:  I want to setup the practice files and site on my localhost, as described; however, I already have my current WordPress site (under development) running on my localhost. How do I run two WordPress sites on my localhost?
A:  You can easily do it by setting up another site in Dreamweaver. Just copy the WordPress files to that folder as described and establish a new database via phpMyAdmin. You can set up as many WordPress sites as you need to. The author has upwards of 80 on his system, all for different clients.
Q: This course was updated on 10/23/2012. What changed?
A: The course was thoroughly revised and uses the most current versions of both programs. We added chapters on responsive design and creating a custom administration panel in WordPress, new movies about concepts and taxonomies, and extended the Spry chapter to include jQuery, among other changes. New movies are indicated by the NEW tag next to the movie name.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver and WordPress: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked