Lightbox not working properly

[Melissa McWilliams]

Hi Bill,

I am working with the DB that was provided by you as a backbone for this site. I am running into an issue — I believe the issue started after an update. When you click on the (+) to have the lighbox pop out and scroll through the images the arrows for scrolling disappeared.

Perhaps it is a config issue? I am new to WP and usually use Drupal but wanted something like this for this particular project.

I really appreciate the help!

Thanks!

Melissa.

[Bill Robbins]

Hello Melissa,

So sorry for the trouble there. The arrows are set to auto-hide after a certain period of time. You can adjust it though. Here’s how:

1. Go to the Appearance section in your WordPress control panel and select Theme Options.
2. Click on the advanced tab and you’ll see a field for “Lightbox Navigation Delay.” You can use this field to set how long the bars will be visible before they hide. The time is in milliseconds. You could pick a long time (60000) which would be a minute.
3. Save your changes.

See if that doesn’t do the trick for you. Let me know if you have any trouble.

Thanks,
Bill

[Melissa McWilliams]

Hi Bill,

I made this change, however, this did not resolve the issue. The problem is occurring in Firefox (everything works/looks great in Safari and Chrome). Looks like it was a .svg issue. There are both .png and .svg files for icons in the images folder. Firefox for whatever reason is picking up the .svg file at http://katieplease.com/wp-content/themes/selfie/images/icons.svg. I’m a little unsure about this behavior. Any guidance would be much appreciated.

Thanks!

Melissa.

[Bill Robbins]

Hello Melissa,

I believe I understand now what you mean. Let’s do this. The theme uses an icon font for some of the elements (the plus icon and the three lines for the menu). We can use it for the previous/next and close buttons too. Here’s how:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose style.css
3. Scroll down to the very bottom and paste this:

   
   #swipebox-action #swipebox-prev, 
   #swipebox-action #swipebox-next,
   #swipebox-action #swipebox-close {
   	background-image: none;
   	font-family: 'ElegantIcons';
   	color: #fff;
   	font-weight: 700;
   	font-size: 35px;
   }
   
   #swipebox-action #swipebox-prev:before {
   	content: '\34';
   }
   
   #swipebox-action #swipebox-next:before {
   	content: '\35';
   }
   
   #swipebox-action #swipebox-close:before {
   	content: '\4d';
   }
   

4. Save your changes.

See if that doesn’t do the trick for you. Since the other icons are visible, we know that the icon font is loading. This should add those icons to your site.

If you have any trouble, let me know.

Thanks,
Bill

[Melissa McWilliams]

Bill!

You seriously rock! Thanks for getting back to me so quickly and with the exact change I needed. WordPress is a different beast than Drupal!

I have one more follow-up question — how can I remove author information? I am setting up the site in a blog style but we don’t want the author info and such just hanging out.

I really really appreciate the help.

Melissa.

[Bill Robbins]

Fantastic…I’m glad that worked for you. You can also hide the “post-meta” too. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   p.post-meta {
   	display: none;
   }
   

3. Update your settings.

That should take care of it for you. If you run into trouble, let me know.

Thanks again,
Bill

[Melissa McWilliams]

Hi Bill,

Worked like a charm! Thanks for your help!

Melissa.

[Bill Robbins]

Anytime Melissa. Have a great night.

[Author]

Posts