Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, December 22, 2013

Show Post Title in Full in Magazine Blogger Dynamic View

Before
After
I've published tutorials on how post titles can be shown in full in Blogger's Flipcard and Timeslide Dynamic Views before, and Blog Reader Pierre Egault would like to know a similar trick for Magazine view - as Magazine view tends to truncate your title when a custom web font is used. This tweak should also help to reduce the gap in your post title's line height when a custom font is used. So, here's how:

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog
.magazine .item .title a{
line-height: 25px !important;
overflow: visible !important;
display: table !important;
}
.magazine #lead .item .title a{
line-height: 35px !important;
overflow: visible !important;
display: table !important;
}

22 comments:

  1. This perfectly works ! :)

    Thanks for your help once again ;)

    ReplyDelete
  2. Hello, I'm having a problem with a specific customization at the Dynamic Views template. There is a way to remove the footer with the message "Dynamic Views template. Powered by Blogger"?

    I know I have to put the credits, but I just want to make it at the end of a specific page, not at the homepage... Thnks for the help Yoga! Allways following the blog!

    ReplyDelete
    Replies
    1. Sounds do-able. Mind pointing me to the exact page you're working on, so that I can come up with an accurate fix?

      Delete
    2. It's in this page: http://www.receitasushi.com.br/
      At the bottom of the page...
      Thnks man!

      Delete
    3. See if this does the trick:

      .attribution{
      display: none !important;
      }

      Delete
    4. Worked for me. Thanks so much!

      Delete
  3. great Blog Bro
    All The Stuff on Your blog is Amazing
    Great work

    ReplyDelete
  4. Hi, yoga
    This is my blog http://gsrikar.blogspot.in/
    I added the above template in my CSS along with the templates of 'Show Full Post Title in Blogger Flipcard and TimeSlide' but I still can't see full post in any of these designs.
    The following link is an part of my CSS
    http://3.bp.blogspot.com/-MYMoqnTTPSU/UsgUEyp1iGI/AAAAAAAAB5A/fkGo8xf2m1k/s1600/CSS.JPG

    Can you tell me is there anything wrong.

    ReplyDelete
    Replies
    1. You have one insanely long word for a title. There isn't any code out there that could break your one word into two and put it into a new line I'm afraid. I don't imagine you going for long words each time you post, so you might wanna consider bringing your font title down for this time.

      Delete
  5. It's just one post. I'm pretty sure it happens rarely. Thanks for the support

    ReplyDelete
  6. Can I ask how to get the images on a post to show in the homepage. Google says something about not hotlinking the images and even though I uploaded it through Blogger image upload, it still doesnt show. Only the title of the post does. Can you help.

    ReplyDelete
  7. If you have a dynamic template your thumbnail should show on your homepage if you had them uploaded at Blogger. Mind if I take a look at your blog?

    ReplyDelete
  8. Hi!

    I am trying but it doesn't work. The title is still cut.

    If you want to take a look at my blog:

    http://flaviaroundtheworld.blogspot.de/

    Thanks

    ReplyDelete
    Replies
    1. I'm seeing the following in full:

      Better to see something once than to hear about it a thousand times -Proverbio asiático-

      Are there supposed to be more than this?

      Delete
  9. Hey Yog, thanx for replying. Is there any template on which i can use a drop down menu on blogger??

    ReplyDelete
    Replies
    1. Hello Tamkenat,

      Sorry for the late reply. You should be able to add a drop down menu to any xml-based templates, the non-dynamic ones. But you'll have to integrate them yourself (refer to some third party tutorials, there are plenty). There are also some third party templates that come with the menu built in, you might wanna give em a go.

      Delete
  10. thx it works.. www.patehinos.com

    ReplyDelete
  11. How can I fix my tittle which automatically mix together with the date when it posted on my blog? please see it on lisazhang88.blogspot.co.id ( The tittle "Yogjakarta Trip" mix together with the date when it posted )

    This is my css code :

    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-7ZoDd2IxPD0/VfQTI-xCxfI/AAAAAAAAAHA/bExqJTeHDzo/s380/Lisa%2BZhang.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    #header.header .title a h1, #header.header .title h3{
    display: none;
    }


    .blogger-gear, .overview-sspe {
    background-image: url('http://2.bp.blogspot.com/-KlpY5HF6kEw/VbcUhNXU0BI/AAAAAAAAADs/LDXIA8NcFVo/s1600/Lisa-Zhang-logo.gif') !important;
    height: 90px !important;
    width: 125px !important;


    }
    #header #pages:before{
    border-left: 0px !important;
    }
    #header .tabs li, .ss{
    margin-left: 0px !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
    border-left: 1px solid white;
    }

    #Classic.ss, #views ul li:first-child ,
    #Flipcard.ss, #views ul li:nth-child(2),
    #Magazine.ss, #views ul li:nth-child(3),
    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }


    #views{
    display: none !important;
    }

    #header #pages{
    width: 81% !important;
    }

    #header #pages.tabs ul{
    width: 100% !important;
    text-align: center !important;
    }


    #header .tabs li:last-child{
    padding-right:10px !important;
    border-right: 1px solid white;
    }





    .gadget-container:hover,
    .gadget-item.ss:hover,
    .gadget-item:hover .gadget-container,
    .gadget-selected
    .gadget-container {right: auto !important;}

    #gadget-dock {
    -o-transition: left 0.20s ease-in-out 0s;
    -moz-transition: left 0.20s ease-in-out 0s;
    left: -40px;
    -webkit-transition: left 0.20s ease-in-out 0s;
    -ms-transition: left 0.20s ease-in-out 0s;
    }
    #gadget-dock:hover,
    #gadget-dock.gadget-notifying,
    #gadget-dock.gadget-opening
    {
    left: 0.5px !important;
    }
    .gadget-container {
    -moz-transition: left 0.20s ease-in-out 0s, opacity 0.20s ease-in-out 0s !important;
    -webkit-transition: left 0.20s ease-in-out 0s, opacity 0.20s ease-in-out 0s !important;
    -ms-transition: left 0.20s ease-in-out 0s, opacity 0.20s ease-in-out 0s !important;
    -o-transition: left 0.20s ease-in-out 0s, opacity 0.20s ease-in-out 0s !important;
    left: 0px !important;
    right: -100px !important;
    margin-right: 100% !important;

    }


    /* Post Content - Size of Text */
    .article-content {
    font-size:140%;





    }



    .magazine .item .title a{
    line-height: 25px !important;
    overflow: visible !important;
    display: table !important;
    }
    .magazine #lead .item .title a{
    line-height: 35px !important;
    overflow: visible !important;
    display: table !important;
    }

    Please help me, thank you

    ReplyDelete
    Replies
    1. Sorry for the late reply. This was a bug in Blogger early on. I believe it has been fixed.

      Delete
  12. Hi Yoga,

    Thanks for your help... Great work.... i am using side bar in dynamic views.. your inputs are so much helping to change blog style..

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.