Social bookmarks & Portfolio box size « Support Forum | Kriesi.at

Support Forum » Angular

Social bookmarks & Portfolio box size

4 posts from 2 voices

Started 5 months ago by rocked18
Latest reply from Devin
This topic is not a support question

Tags:

rocked18
Member

Hi,

two questions.

1. I would like to move the social links to the footer of the theme.
I have tried to follow this guide: http://www.kriesi.at/support/topic/social-media-links-in-footer#post-49405
But its not really working: http://www.tobymccoll.com/tgit/ (see my footer)

Any help on how to do this?

2. I would like to be able to set the size of the portfolio boxes on the home page. At the moment I only have need for two items but will be adding more down the line.
http://www.tobymccoll.com/tgit/

Thanks

Toby

Posted 5 months ago #

Devin
Moderator

Hi Toby,

1) The post you linked to is for Abundance which while similar in a lot of ways, does not have the same social icon set up. So what you'll need to do is copy everything that is in the ul class "social_bookmarks" and put it into the footer.php where you'd like it.

It looks like you've taken this step so far but perhaps not included the php open and closing tags. So in your footer.php where you want to include the social icons add:

<?php
echo '<ul class="social_bookmarks">';
							do_action('avia_add_social_icon','header');
							if($dribbble = avia_get_option('dribbble')) { $social ++; echo "<li class='dribbble'><a href='http://dribbble.com/".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a></li>"; }
							if($twitter  = avia_get_option('twitter'))  { $social ++; echo "<li class='twitter'><a href='http://twitter.com/".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a></li>"; }
							if($facebook = avia_get_option('facebook')) { $social ++; echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a></li>";	}
							if($gplus    = avia_get_option('gplus'))    { $social ++; echo "<li class='gplus'><a href='".$gplus."'>".__('Join me on Google Plus', 'avia_framework')."</a></li>"; }
							if($linkedin   = avia_get_option('linkedin'))    { $social ++; echo "<li class='linkedin'><a href='".$linkedin."'>".__('Add me on Linkedin', 'avia_framework')."</a></li>"; }

							/*
							//contact icon
							$contact_page_id = avia_get_option('email_page');
			                if (function_exists('icl_object_id')) $contact_page_id = icl_object_id($contact_page_id, 'page', true);  //wpml prepared
							if($contact_page_id) { $social ++; echo "<li class='mail'><a href='".get_permalink($contact_page_id)."'>".__('Send us Mail', 'avia_framework')."</a></li>"; }
							*/

							echo '	<li class="rss"><a href="'.avia_get_option('feedburner',get_bloginfo('rss2_url')).'">RSS</a></li>';
							echo '</ul>';
?>

From there, you'll need some additional css fixes depending on where you've added it but they should be fairly simple.

2) I'm not really sure what you mean by setting the size. When you set the number of items to be displayed it automatically sets the size needed. Manual control really isn't possible when adding a portfolio section.

Regards,

Devin

Posted 5 months ago #

rocked18
Member

Thanks for your reply.

1. All sorted.

2. Yea I would like the size of the two portfolio boxes to be a lot smaller http://www.tobymccoll.com/tgit/
I get that the design of the theme is making the two column portfolio layout fill the max-width but is there a way to...
- manually set the image size
- set the column width size
- set the table width size
- add padding or margin within the table in order for the images to appear smaller withing the boxes.
- any other ideas?

those were my ideas on doing that, any help would be much appreciated!

Thanks

Toby

Posted 5 months ago #
Devin
Moderator
Hi Toby,

You could attempt to modify the images directly with something like:
```
@media only screen and (min-width: 768px){

    #top.home .post-entry.post-entry-46.flex_column.all_sort.no_margin.celia_sort.ajax_portfolio.one_half.first.portfolio-entry-description.isotope-item {
    width: 240px;
    padding: 40px;
}
#top.home .post-entry.post-entry-44.flex_column.all_sort.no_margin.julienlaurence_sort.ajax_portfolio.one_half.portfolio-entry-description.isotope-item {
    width: 240px;
    padding: 40px;
}

}
```
Which will target those two items directly and only effect full screen sizes (so mobile will keep the proper re-sizing and doesn't get messed up from the padding).

Then you could try adjust the portfolio-sort-container to get things centered but again you'll need to make sure it doesn't cause issues cross browser and with the responsive layout.

Regards,

Devin
Posted 5 months ago #