Need help? Check out our Support site, then


INSTAGRAM IN THE FOOTER

  1. 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.

  2. I believe I answered your question about centering your site content without sidebars here: http://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.

  3. 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!

  4. 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.

  5. 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;
    }
  6. 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!

  7. 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 ;)

  8. 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.

  9. 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!

  10. 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%;
    }
  11. 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!!!

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

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

    Thanks a lot again!!!

  14. 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!

  15. 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!

  16. 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.

  17. 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!!!!

  18. 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.

  19. 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!!!

  20. 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.

  21. Hi!

    Ok then is there any way i could just set one line of pics and anyway make the footer smaller, as in it will be just the images with not that much of dark area after??

    Also What would be the Css for changing the size and typeface from the posts title and body?

    Thank you!!!

  22. Also realized the footer doesn't go all the way to the right side of the web and it stops before, its like it doesn't occupied the whole weight of the blog, could we fix that?

    Thanks again!!!

  23. I think the problem is the width of the whole page is too big, i would like to reduce it but not sure how?

  24. I'm not sure it would be possible or advisable to narrow your entire blog width. I'm afraid I'm at the end of my skills for making it look more like what you're after.

    All I can suggest is that you play around with the widths and the column numbers in the widget and see if there's something you like well enough.

  25. Yes I understand that,

    What I meant is when I make me website bigger on the sides (as in the window in the computer) It feels like the header and the blog it self is not centered, same as if I do it smaller things on the farthest sides (as the social media buttons) move to a next line, what I would like is to make the whole content static so if I change the size of the window in my computer the whole web stays centered and not moving. So if i make it bigger the whole thing will center itself all the time or if I make it smaller the content will disappear instead of move. Does it make sense??

    About the footer is there any way I can bring it to the very end so theres no such a space between it and the final "blog powered…." thing? I tried changing some values but can't move it down.

    Thanks a lot!!!!!

  26. Hi, turning a responsive width design such as Hemingway into a fixed width theme requires a lot of time and knowledge of CSS and I would suggest contacting Elto, one of our customization partners to get a quote on how much that might cost.

    To reduce the spacing between the footer credits and the instagram images in your footer, add a margin-bottom declaration to .widget-areas in your custom CSS and adjust the bottom margin (80px originally) as desired. Example:

    .widget-areas {
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1500px;
        width: 100%;
    }
  27. Thank you very much for your help!!

    Already asked for the quotation, cheers!!!

  28. I can not figure out the code to modify the posts, could you help me with the code for changing the size, color and align center my posts???

    Thanks!!!

  29. Hi, this will center virtually all "content" (post and page).

    .hentry, .site-info {
        text-align: center;
    }
    .site-footer {
        margin-left: auto;
        margin-right: auto;
    }
  30. Hello Again!!

    I just realized the links in my blog opened in the same window so I would like to know if theres a way to make the links on me posts and the instagram footer to open in a new tab or window?

    Thanks a lot!!!

»

You must log in to post.

About this Topic