How can I change the height of my Pinterest window?

  • Author
    Posts
  • #1373795

    simonacellar
    Member

    http://anomisbysimona.wordpress.com/pinspiration/

    I would like for people to see more of my pinterest images. Therefore just want to change the height of the visibility.

    I need a way to disable the link when adding the height in css. But I have no clue how. :-(

    I’d appreciate any suggestions, thanx. :-)

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

    #1373911

    mrdirby
    Member

    It looks like there is an inline style in a span tag on the content box that looks like this:

    <span class="PIN_1375367182855_embed_board_bd" style="height: 175px; width: 562px;" >

    Change that height to whatever you want.

    It looks like you embed this Pinterest board so you should be able to see the code in the body of the embed tag.

    I don’t follow your second question about disabling a link. Could you give some more information?

    #1373943

    simonacellar
    Member

    Hi there,

    Thats exactly what i did. But then the pinterest box disappears and instead the link is shown. So i need to disable somehow the link. Do u know how to do that?

    Thanks
    Simona

    #1373954

    mrdirby
    Member

    Can you share your embed code?

    #1374036

    Simona, since you have the Custom Design upgrade, you can increase the height of the pinterest embed with CSS. Add the following to your custom CSS and see what you think. You can play with the height value, but one of the image columns runs out of images at about 310px (4th from left). 490px in height is where the far left column of images runs out.

    span.PIN_1375391006487_embed_board span.PIN_1375391006487_embed_board_bd {
    height: 310px !important;
    }
    #1374037

    simonacellar
    Member

    Thanks guys, for taking the time to help me. I get the whole css thing. But as soon as I add the class to “http://pinterest.com/ssimonaa/moments-of-joy/”, instead of the pinterest box with my images, the link itself is shown.

    The way I have it in now, is “http://pinterest.com/ssimonaa/moments-of-joy/”, and the link is not a link, which is apparently important.

    This is my html:

    http://pinterest.com/ssimonaa/moments-of-joy/ (This shows correctly, but with the wrong height)

    <span class=”PIN_1375367182855_embed_board_bd” style=”height:400px;width:562px;”>http://pinterest.com/ssimonaa/moments-of-joy/</span&gt;

    (This would have the right height, but this simply shows up as active link)

    :-( What am I not getting? :-(

    #1374038

    mrdirby
    Member

    You don’t need to add anything to your embed code, use what you started with. That span with the class we are referring to is already there. Just add the code thesacredpath shared to your custom stylesheet.

    #1374047

    simonacellar
    Member

    Hey Guys,

    I have tried and tried, this time in my css stylesheet, but it still won’t work.

    Somehow I just can’t find the thread, that works. I also tried this:

    span .PIN_1375421463030_embed_board_bd element. style {
    height: 300px !important; }

    But that didnt work either. Maybe it helps, if you guys look at my html? This is some of it:

    <div class=”entry-content”>
    <p>
    <span class=”PIN_1375421463030_embed_board PIN_1375421463030_fancy”>
    <span class=”PIN_1375421463030_embed_board_hd”>
    <span class=”PIN_1375421463030_embed_board_bd” style=”width: 562px; height: 600px;”>

    </span>
    </p>
    .
    .
    .

    :-(

    #1374054

    mrdirby
    Member

    I’m not sure why that wouldn’t work. Try this.

    .PIN_1375391006487_embed_board_bd {
    height: 310px !important;
    }

    Just to make sure you are posting the code in the right place. Are you going into your dashboard and clicking Appearance > Custom Design and then CSS tab?

    #1374065

    I researched this a bit, and I don’t think it’s possible to adjust the dimensions of an embedded Pinterest board on a WordPress.com blog at this time because of how the JavaScript that powers the embed was setup. It’s a simple implementation without any size options, and it looks to me like you would need to change size settings in the code and not with CSS in order to get it to work. Sorry I don’t have a better answer for you!

    #1374066

    mrdirby
    Member

    @simonacellar where did you get you pinterest embed code from in the first place? I just went to look on pinterest and didn’t see where you could grab an embed code?

    I found this embed page but it doesn’t work on wordpress.com.
    http://business.pinterest.com/widget-builder/#do_embed_board

    #1374067

    @mrdirby, take a look at this support document on doing a pinterest embed. All you need is the URLs. WordPress will then create the embed code for you. What @simonacellar has in her page in the editor is just the URL. What you see when you look at the source code for the page in your browser is the WordPress.com generated embed.

    #1374070

    mrdirby
    Member

    @thesacredpath ok thanks. I knew I was missing something. Also explains why my approach wasn’t working at all.

    #1374072

    simonacellar
    Member

    Hello guys,

    Thanks for looking into it. So did I understand this right? It’s not possible then to change the dimensions?

    Thanks again

    #1374080

    @simonacellar, that’s correct, because of how the Pinterest board embed code works on WordPress.com, you cannot adjust the dimensions. Also, they would need to be added in a setting and not by using CSS. Embedded content can be tricky like that sometimes! Sorry we don’t have a better answer for you!

    I wonder if you might like embedding various pins on the page you’re working on to add interest? The pins would be easy to insert and edit and they would appear bigger than the board. You could have both though, and maybe it would result in a nice hybrid solution.

The topic ‘How can I change the height of my Pinterest window?’ is closed to new replies.