Social Media Icons in Ajax Portfolio, and removing black overlay from portfolio « Support Forum | Kriesi.at

Support Forum » Choices

Social Media Icons in Ajax Portfolio, and removing black overlay from portfolio

6 posts from 3 voices

Started 6 months ago by flylanddesigns
Latest reply from Devin
This topic is resolved

Tags:

flylanddesigns
Member

Hi, great theme! I've already received quick help on a few issues, thank you!

Just two things (I've searched the forums for answers, and have tried a few things, but nothing seems to work).

My site is here: http://www.flylanddesigns.com

#1: I am using the Ajax portfolio. I need the social media icons to show up below the Meta data (Client, Medium, URL) on each portfolio item when a thumbnail is clicked and the Ajax portfolio opens up. I've tried several different plugins (using Sociable right now). None of the shortcodes work. I've tried pasting the php code, but I don't know what I'm doing, and couldn't figure out where to put it.

If I can just use another instance of the social media icons in the header, that would be even better.

#2: I can't figure out how to remove the black overlay when you rollover an image. I need to turn that off completely. Can you please let me know the css required to do this?

Thanks in advance!

Posted 6 months ago #
Nick
Moderator
Hi,

Nice illustrations!

Please update to the latest version of the theme, you are using 1.5 and 1.6 is out with lot of goodies. Unfortunately, that will also overwrite all your customizations unless you have been using a child theme. So just in case, please make a backup of both your current theme files via ftp, then delete the entire theme folder and upload the new theme via ftp. This will cause the minimal amount of disruptions. Afterwords create a child theme, and do all your template edits within the child theme. This way the original 'parent theme' is never altered.

After you've update this is what you should do:

1) Please make a backup then open functions-choices.php and the function avia_check_ajax_request() is the one that populates the portfolio items etc in the ajax version of the portfolio item page. So you would need to add the button code with an echo after the last echo in that function to make the buttons come out under the description on the right side.

Something like
```
echo '<div class="....">.the iframe code.</div>';
```
Sorry , you removed the iframe code from your page just as I was gonna copy it.

2. The overlay can be removed with this css, just add it to Quick CSS in the backend Choices > Theme Options > Styling on the bottom of the page
```
.image_overlay_effect, .image_overlay_effect_inside {
width: 0%;
height: 0%;
}
```
Thanks,

Nick
Posted 6 months ago #
flylanddesigns
Member

Thanks Nick -

I updated the theme, went fine, though I don't see any additional options. Is there a page that shows what's new in the update?

I created a child theme, though all my settings in the backend (portfolio items, logo) that I made on the Choices theme are, of course, gone. Is there a way to transfer those over to the child theme as well?

All of my css changes were done on the custom.css stylesheet, so there are no issues there.

For #1: I opened up the functions-choice.php, and I've tried pasting the shortcode, or the php code where you indicated, but nothing seems to work. I do not get php at all. These are the instructions from Sociable:

"you will have to use the shortcode[sociable/] or template tag ?php if( function_exists( do_sociable() ) ){ do_sociable(); }"

Anyway you could help me out if I email you my ftp and login details? Much appreciated.

For #2: That worked great - but it turns out that I think I need something to happen when you rollover the images. Is there anyway to turn that overlay down to say 10%, so the image gets just a little darker. I'm not understanding how this overlay works, because changing the color of the background through css doesn't have the right effect, and turning down the opacity with opacity: 0.1; actually turns down the opacity of the whole image, even when the pointer isn't hovering over it.

Thanks in advance,

Brian

Posted 6 months ago #
Devin
Moderator
Hey Brian,

I tend to disagree with Nick on child themes, they are great if you are doing a lot of customization to the theme files but if you are keeping everything in custom.css or the quick css I think its easier to stick to the actual theme :)

As far as I know, there is no way to transfer over your settings to the child theme so you would need to remake it.

For #1, in your functions-choices.php file search for:
```
echo "<div class='entry-content'>";
				$meta = avia_portfolio_meta($id);
				if($meta)
				{

					echo $meta;
					echo avia_advanced_hr(false, 'hr_small');
				}
```
That spits out the meta data and the next line spits out the_content of that portfolio item. So with your example, it would be:
```
echo "<div class='entry-content'>";
				$meta = avia_portfolio_meta($id);
				if($meta)
				{

					echo $meta;
					echo avia_advanced_hr(false, 'hr_small');
				}

				if( function_exists( do_sociable() ) ){ do_sociable(); }
```
2) Try this:
```
#top.page-id-665 .portfolio-sort-container .image_overlay_effect {
background-color: rgba(0,0,0,0.4);
}
```
Its specific to *that* page so it won't effect anything else on your site. The opacity is done with rgba so change that 0.4 to whatever you want the effect to be.

Regards,

Devin
Posted 6 months ago #
flylanddesigns
Member

YES! Both solutions worked like a charm.

Beer's on me if we ever cross paths.

For #2 - I ended up changing the code to just effect .image_overlay_effect, that way all images share the same effect.

Many thanks!

Posted 6 months ago #
Devin
Moderator

Great! I'm in Florida so it better be cold beer. Beautiful work by the way :)

Let us know if you have any other questions or issues.

Regards,

Devin

Posted 6 months ago #