INSTAGRAM IN THE FOOTER

  • Author
    Posts
  • #1955213

    bereichel
    Member

    Hi I would like how to set my Instagram widget in the footer so all the footer shows my instagram.
    Here is an example:
    http://garypeppergirl.com

    I would like to change the weight of my content so all my posts appear aligned in the centre with no side bars.

    Thanks!

    The blog I need help with is whatidolike.wordpress.com.

    #1955335

    lizthefair
    Staff

    I believe I answered your question about centering your site content without sidebars here: https://en.forums.wordpress.com/topic/changing-menu-appearance-1?replies=2#post-1952617

    Did that not work for you?

    This code should stack the widget areas in the footer*:

    .widget-areas .widget-area:nth-child(1):nth-last-child(3), .widget-areas .widget-area:nth-child(2):nth-last-child(2), .widget-areas .widget-area:nth-child(3):nth-last-child(1) {
     width: 100%;
    }

    That does make the Instagram widget span the full page, The problem is, the Instagram widget only allows up to 3 columns of photos so when you do this you end up with three large photos across the bottom not the many smaller photos that you are looking for. If it’s possible to change the number of columns in the widget with CSS, I’m afraid I don’t know how to do it.

    *I don’t think this is the most efficient way to achieve the goal, but it does work.

    #1955355

    bereichel
    Member

    Thank you so much thats great!!

    As we don´t know how to put instagram as the example i gave, i would like to know how to change the size of my footer so it doesn´t become all bigger.

    Also is there any way to put the social media buttons (i deleted them now) not in a widget bar on the side but in the bar menu??

    Thanks again!

    #1955356

    bereichel
    Member

    Forgot!!

    Also would like to make the header of the blog not static so it disappears when u scroll no like now that it get covered by the rest of the content when u scroll.

    #1955379

    lizthefair
    Staff

    I’m not sure this is exactly what you are after, but it might meet your needs.

    Try removing this bit of code:

    .widget-areas .widget-area:nth-child(1):nth-last-child(3), .widget-areas .widget-area:nth-child(2):nth-last-child(2), .widget-areas .widget-area:nth-child(3):nth-last-child(1) {
     width: 100%;
    }

    That will put the footer back the way we had it before, so the Instagram images will be the right size and stay on the left third of the page.

    Then, add your social media buttons (just use the widget you used to have in your sidebar) to footer 3. That should balance out the page and let you have all your main content where you want it.

    to keep the header in line with the rest of the content when you scroll, try this:

    .site-header-image {
    	position: static;
    }

    #1955473

    bereichel
    Member

    Thank you!!

    The header works out perfectly but the footer became bigger…not sure why or how to fix any help there?

    About the social media can I put them in the menu bar or is it impossible?

    Thanks!

    #1955474

    lizthefair
    Staff

    I think the problem might be that you have two copies of the Instagram widget in the first footer widget area. If you remove the one on top you should be in good shape.

    I’m not sure that putting the social media icons in the menu is impossible, but I don’t know how to do it ;)

    #1955480

    Hi @bereichel, yes, we can help you put social links and icons into your menu. Are you wanting to use the ones that currently show in the footer, or are you wanting to use your own icons?

    The first step would be to add the links to your menu using the Custom Link feature in Custom Menus. I see that you already have a custom menu, so you can add the links there.

    If you want to use your own icons, I would suggest icons no larger than 32px tall so that they will fit nicely with the existing menu items. Upload those to your media library and then let me know and I can get to work on the code for you.

    If you wish to use the icons in the footer for the menu also, let me know that too, and I can work on the code after you get the links into the menu.

    #1955491

    bereichel
    Member

    Hi!!

    Thank you so much for the help!!

    Im working on diff social media icons and asa I have them in my media library will let you know.

    In the meantime, could you help me if is there anyway I could occupy all my footer with my Instagram images? as i.e:
    http://garypeppergirl.com

    Thanks a lot!

    #1955494

    Hi, the site you reference as an example is a self-hosted version of WordPress so it is using a different widget (plugin) to produce that grid of images. There are a number of settings in the Instagram widget here (columns, number of images) that you can set to customize the look of things. You can add the following to get an idea of how things will look. I would also suggest you change the number of images and the number of columns in the widget (and add more images at Instagram if necessary) to see how it all works.

    .widget-areas .widget-area:nth-child(2):nth-last-child(1) {
        margin-top: 50px;
    }
    .widget-areas .widget-area:nth-child(1):nth-last-child(2), .widget-areas .widget-area:nth-child(2):nth-last-child(1) {
        width: 100%;
        margin-right: 0;
    }
    #text-2 {
        margin-left: auto;
        margin-right: auto;
        width: 24%;
    }
    #1955507

    bereichel
    Member

    Hi!!!
    I did save the social media buttons on the media library already so maybe you could help me to place them on my menu bar??

    Also I have tried adding up to 20 images on instagram and the CSS you told me and looks kinda similar but the size of the images is quite big and still can’t chose to show more than 3 columns to fill the whole footer?

    Thanks a lot!!!

    #1955509

    Great, can you go ahead and add the Custom Links to your custom menu and then we can get the images placed for you.

    #1955516

    bereichel
    Member

    I added the Custom Links to the menu already and the final images to the media library.

    Thanks a lot again!!!

    #1955525

    eurello
    Staff

    Hi there,

    Try the following CSS to replace your social media links with your icons:

    #menu-item-108 a {
    	font-size: 0;
    	padding-left: 5px;
    }
    
    #menu-item-108> a::before {
    	content: url('//whatidolike.files.wordpress.com/2014/08/tumbler.jpg');
    	position: relative;
    	top: 10px;
    }
    
    #menu-item-109 a {
    	font-size: 0;
    	padding-left: 5px;
    }
    
    #menu-item-109> a::before {
    	content: url('//whatidolike.files.wordpress.com/2014/08/pinterest1.jpg');
    	position: relative;
    	top: 10px;
    }
    
    #menu-item-110 a {
    	font-size: 0;
    	padding-left: 5px;
    }
    
    #menu-item-110> a::before {
    	content: url('//whatidolike.files.wordpress.com/2014/08/instagram.jpg');
    	position: relative;
    	top: 10px;
    }
    
    #menu-item-111 a {
    	font-size: 0;
            padding-left: 5px;
    }
    
    #menu-item-111> a::before {
    	content: url('//whatidolike.files.wordpress.com/2014/08/blogloving.jpg');
    	position: relative;
    	top: 10px;
    }

    Let me know how that works!

    #1955527

    bereichel
    Member

    It does work!!!Thank you!!!

    But I would like them without the dividing lines between them, is it possible? And I would like the whole menu centered and then the social media buttons on the right side. Could you help me?

    Also how could I make the Instagram images on the footer smaller so you can see a footer like this one or similar:
    http://garypeppergirl.com

    Thank you very much!

    #1955528

    eurello
    Staff

    Hi there,

    But I would like them without the dividing lines between them, is it possible?

    You can remove the dividing lines altogether with this:

    .main-navigation li:before {
    content: none;
    }

    Also, note that you are currently using the mobile theme, so these changes don’t apply on smaller screens. However, if you decide to turn the mobile theme off (since your theme is responsive), you’ll need to test that your menu looks ok on smaller screens. You can read more about this here:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    And I would like the whole menu centered and then the social media buttons on the right side.

    Your menu is centered. You could remove the padding from each of those padding-left: 5px; in my code above — make it 0px instead. You’ll note that the icons still aren’t right up against each other, though, because your image files themselves are larger than the little icons – they are box-shaped with some white around them.

    You could replace those images with narrower icons and then replace the image URLs in the CSS.

    Also how could I make the Instagram images on the footer smaller so you can see a footer like this one or similar:

    Try something like:

    .wpcom-instagram-columns-3 img {
    	margin-left: 0;
    	margin-right: 0;
    	width: 100px;
    	height: 100px;
    }

    That pushes all the images together with no margins, and reduces their size (which also makes them display all the way across). You can change those 100 values bigger or smaller to play with how it looks.

    #1955529

    bereichel
    Member

    Hi!
    Thank you very much!!!
    I just have few things going on:

    The social media are working now but can’t get the first “heart” button at the same level and would like to get the other menu centered and then the social media icons a bit more on the right side but its like the whole menu space is smaller and doesn’t allow me.

    Also the footer is perfect but is there any way i could make the actual footer smaller as in just fitting the pictures with no paddings??

    Thank you!!!!

    #1955530

    eurello
    Staff

    Hi there,

    can’t get the first “heart” button at the same level

    This is because if you look at the CSS for that icon:

    #menu-item-111> a::before {
    	content: url('//whatidolike.files.wordpress.com/2014/08/blogloving.jpg');
    	top: 0;
    	position: relative;
    }

    That top bit needs to be the same as the other four:

    top: 10px;

    would like to get the other menu centered and then the social media icons a bit more on the right side but its like the whole menu space is smaller and doesn’t allow me.

    This is because the icons are part of the menu. You’ve just used the images to replace the menu titles for those four menu items. You could try bumping the entire menu to the right:

    .main-navigation {
    margin-left: 100px;
    }

    Again, though, if you switch from using the mobile theme, this will likely make your menu disappear on smaller screens, and you’ll need to use a media query:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Also the footer is perfect but is there any way i could make the actual footer smaller as in just fitting the pictures with no paddings??

    You can remove the padding from the top with this:

    .site-footer {
    padding: 0px;
    }

    As far as to the sides, the widget is currently the full width of your theme’s content area. You could try:

    .widget-areas {
    width: 100%;
    max-width: 100%;
    }

    But I don’t think that’s looking very good. It might look better if you upped the number of images and/or columns in the widget settings, though.

    #1955533

    bereichel
    Member

    Hi!!!

    Thank you very much!!!!

    That is perfect but when i go to the instagram options in the widgets i can´t chose more than 3 columns and 20 images. Is there any way I can update these numbers to make the footer look like I want?

    Thanks!!!

    #1955534

    eurello
    Staff

    Hi there,

    Oh, I see – sorry, I should have checked that. I’m afraid if that’s the max for the settings, that’s the max you can show. CSS only lets you style what is already there; you can’t use it to change functionality.

    So it looks like your option is what you have now, or a more centered two lines with margins to either side.

The topic ‘INSTAGRAM IN THE FOOTER’ is closed to new replies.