Southern Listeners

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

Saturday, February 18, 2012

Center Title in Blogger Dynamic View


Here's a quick one. I've seen a couple of questions about this in the past - how to center blog's title in Blogger's Dynamic View. If you don't have a description set, your title will look isolated on the left, and there will be lots of empty space to the right. Here's how you can bring your blog's title to the center.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
#header.header .header-bar span.title{
width: 100% !important;
text-align: center !important;
}

129 comments:

  1. Do you know how to adjust it even further?

    I'm thinkin' a left-center would look best on my blog, and I'm sure they're other who would like to try out more than l, c, and right.

    Much thanks.

    ReplyDelete
    Replies
    1. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .title h1{
      position: relative;
      left: 90px;
      }

      Adjust the value 90 accordingly. Cheers :)

      Delete
  2. Hi,
    I have question, how i can make the text in header vanish? I have a header image in the way how was in your post, but blog header text is still there.

    Thanks for all those tutorials :)

    ReplyDelete
    Replies
    1. Hi Arturs,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .title h1{
      display: none !important;
      }

      Cheers :)

      Delete
  3. Hi Yoboy,

    First of all, huge thanks for your dedication, it's a pleasure to see you operate.

    My question:

    How can we center the pages links in the headbar?

    Thanks.

    ReplyDelete
    Replies
    1. Hi Vermine,

      I couldnt find an automatic way center the pages links. You can do it manually though. Add the following code to your CSS, and adjust the value 40% accordingly.

      #pages{
      margin-left: 40% !important;
      }

      Cheers :)

      Delete
    2. Rxcellent, it will do the trick! Thanks a lot Yoboy.

      Delete
    3. Hi Vermine,

      Replace the previous code with the one below. This one is more flexible and dynamic. You'll notice the difference when you view it in a small-screened laptop.

      .tabs, .ss{
      width: 100% !important;
      text-align: center !important;
      }

      OR (whichever works)

      .tabs, .ss{
      width: 88% !important;
      text-align: center !important;
      }

      Cheers.

      Delete
    4. Hi Yoga,

      First, sorry to reply late I worked all night.

      Secondly, huge thanks, this is awesome!

      The second option is the best I think, more versatile, since it only switches to a drop down menu when the width gets too small, as opposed to first code which turns the links into a drop down even at full width.

      Anyway, thank you again for having kept your clever mind on my little request, I appreciate it a lot Yoga.

      Cheers to you.

      Delete
  4. Hiya,

    Do you paste this,

    1
    2
    3
    4

    #header.header .header-bar span.title{
    width: 100% !important;
    text-align: center !important;
    }


    OR this? -->

    #header.header .header-bar span.title{
    width: 100% !important;
    text-align: center !important;
    }


    I have done both but (afraid I'll screw up my template, I have not pressed 'update' yet) it's not showing on my preview pane?


    PS: Thanks for your works. Great job !

    ReplyDelete
    Replies
    1. Hi JK,

      Leave out the numbers. Should be just this:

      #header.header .header-bar span.title{
      width: 100% !important;
      text-align: center !important;
      }

      And the Live Preview box seems to be having some issues for now. If you don't see any changes after inserting the code, just proceed by hitting on 'Apply to Blog', and see if there's any changes when you actually load your blog (not via Template Designer).

      Delete
  5. Hi,

    This website is superb!

    How can you remove the shadow from the title? I did try so many options...

    Thanks

    ReplyDelete
    Replies
    1. I don't see any shadows in my title. Mind if I look at your blog?

      Delete
  6. hi, i want to display an image in the header instead of blog title.
    my blog is http://scoutingeverywhere.blogspot.com/ i think you can help me.

    ReplyDelete
  7. Wow thank you SO much. I finally got my blog looking how I want it, thanks to your helpful tutorial!

    ~Ciao!

    ReplyDelete
    Replies
    1. You're most welcome Michelle :)

      Cheers..

      Delete
  8. Hi Y.,

    Thanks for all your great advice, much more useful than the crappy Blogger help!

    Here's my blog :
    http://nylucie.blogspot.com/

    I followed your instructions to center the title, but for some reason the post titles and the blog titles are not aligned! I also tried fixing the position of the title but it looks weird when i change the width of the browser... Any idea?

    Thx!

    ReplyDelete
    Replies
    1. Hi Lucie,

      Good question. Try this code instead:

      #header.header .header-bar span.title {
      text-align: center !important;
      width: 95% !important;
      }

      :)

      Delete
    2. Hi Yoga,

      Thanks for this excellent resource! Quick question, related to the above. I'm using Dynamic Views and I've noticed the standard position for the post title is slightly off-centre. I haven't centred the main blog title, but the slightly off-centre post title is noticeable (and looks odd) when the contents of the post are centred below it (they don't align). I think I saw you addressing this somewhere, but I can't seem to find it now.

      My blog: www.tomfahy.com

      Any idea how I can fix this? Many thanks. Tom

      Delete
    3. Decided to hide post titles instead using this...

      h1.title a{
      display: none !important;
      }

      Cheers!

      Delete
  9. Hello, I'm wondering if it is possible to move the title down a bit. I was able to center it but it's too high. Thanks for all your help!

    ReplyDelete
    Replies
    1. Hi there,

      Yes it is possible. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .header-bar span.title a h1{
      bottom: -10px !important;
      }

      Cheers..

      Delete
    2. Hi! how do you align the title on the header bar? i've tried that code above but it seems to go behind the headerbar instead of on it.

      Delete
    3. Hi Jonnie,

      This is what you need. Remove your previous code for header image, and use this instead:

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

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

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

      #header-container {
      height: 190px;
      }

      .viewitem-panel .viewitem-inner {
      top: 85px;
      padding-bottom: 105px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/--4n7iL4dYe8/T7X79FjNtNI/AAAAAAAAADg/qTdP4e20KXs/s1000/bluejn.png)
      no-repeat center;
      background-position: top;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 150px;
      }


      #header.header .header-bar span.title{
      width: 100% !important;
      text-align: center !important;

      }

      #header.header .header-bar span.title a h1{
      top: 90px;
      position: relative;
      }

      Cheers!

      Delete
  10. I've put the code in but it doesn't appear to work on my blog :/

    ReplyDelete
    Replies
    1. Hi Sophie,

      You arent using a Dynamic Views template, whereas the tutorial in this page was meant for Dynamic Views templates alone. In your case, refer to the link below:

      http://www.southernspeakers.net/2010/12/repositioning-blogger-title-and.html

      Cheers!

      Delete
  11. Hi there, do you happen to know how to center align the post titles? :/

    ReplyDelete
    Replies
    1. Hi Alexis,

      Looks like your post titles are already center-aligned. Have you got it figured?

      Delete
  12. Hi, would you know if there's a way to left align the post titles?

    Also, all of your tutorials are great, thanks for the help!

    ReplyDelete
    Replies
    1. It depends.. What view are you referring to? Can I have a look at your blog?

      Delete
  13. Hi! Your blog is amazing! Well, do you how can I change the description position to under the blog tittle?

    Thanks anyway.

    ReplyDelete
    Replies
    1. Hi Felipe,

      Yes I happen to know a way. Add this to your CSS:

      .header-bar span.title a h1{
      top: -16px;
      }
      .header-bar span.title h3{
      top: 12px;
      left: -130px;
      }

      Cheers :)

      Delete
    2. Hi! I just used this trick to put my description below the title. I move it to the left a bit but now the description (which is kind of long) is being truncated. Is there some way to widen the description field?

      Delete
    3. Hi Bunthorne,

      I'm seeing 'A Fun and Eclectic Mix of Proper Nouns' as your description, and it looks this is the whole of it. What am I missing?

      Delete
  14. Great Site! Just a couple of questions on numberu.blogspot.

    1. I only want Classic View available for viewers, but sometimes display slips back to other views and sets "stuck" in timeslide. I have used the following code.

    #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, #header #pages:before{
    border-left: 0px !important;
    }

    2. On Classic view I can't get the post title to center on page. There seems to be a padding-right: 40 px set for .article .article-header .title { Just don't know how to make it behave. :)

    Thanks so much!

    ReplyDelete
    Replies
    1. Hi Dreg,

      Looks like Timeslide is set as your default view, regardless of the options you have hid from your viewers. To change the default view, first, go to Template Designer - Advanced - Add CSS and backup everything that you have in there, because you're about to lose them. Next, go to Templates under Template Designer, and choose the first option under Dynamic Views - Apply to Blog. That should set Classic view as your default view.

      2) Your post title looks centered to me. Have you got it sorted?

      Cheers! :)

      Delete
  15. Yoga, seems I finally figured out how to get the title to center! Still can't get Classic to be only view and STAY. Also one more curiosity, when you write the css code, what does the !important mean? And how do you know when to use it?

    ReplyDelete
    Replies
    1. Hi Dreg,

      Sorry I didn't see this earlier. And kudos to you for figuring it out!

      As for the 'important' tag, in a nutshell, it is used to set the priority. And here's the longer version: in Dynamic View, we're do not replace the original CSS code.. The original code is very much there. We're just overwriting the original code, as we do not have access to delete them.. In other words, when you add a CSS definition to your 'Add CSS' box, a browser will see two different definition for a particular element when a page loads - the original one, and the one that you defined.. To make sure the tweaked version gets chosen by the browser, we use the 'important' tag.. If you're defining a new CSS code for an element that has no previous definition, you don't have to include the 'important' tag, but it doesn't hurt to include it anyway..

      Delete
  16. Hi Yoga, Thanks so much for the "!important" explanation :) I am still wondering how to get my classic view to stick? DH

    ReplyDelete
  17. Yoga - sorry disregard last post. I didn't see that you already answered my question above.

    ReplyDelete
    Replies
    1. Hi Dreg,

      I see your default view has changed to Classic now. Glad you got it sorted :)

      Cheers..

      Delete
  18. Hello and congratulations for the blog. I want to remove the title of the blog because I want to put in place an image. how can I do? Thank you and sorry for the bad english.

    ReplyDelete
  19. I'm sorry. My other problem is to increase the height of the header. What to do? thanks

    ReplyDelete
    Replies
    1. Hi Francesco,

      Sorry for the late reply. I've published a post, in which you'll find all your answers.

      1) It'll show you how you can add an image to your header.

      2) Your header size will be increased.

      3) And under the 'Extras' section, there's a code that'll allow you to remove your title.

      Here's the tutorial that I'm referring to:
      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      All the best :)

      Delete
  20. was able to remove the title of the blog. Thank you!
    Now I have to increase the height of the header ... I'm here http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html
    Surely I need help ...
    thanks

    ReplyDelete
    Replies
    1. You'll be fine. Nudge me if you require any assistance :)

      Delete
  21. You are very kind, thank you!

    Allow me an off topic?
    Why did not appear on the horizontal bar "quick edit" and "Home"? thanks again
    www.interclubacquaviva.blogspot.com

    ReplyDelete
    Replies
    1. Only the author of the blog will be able to see those icons, and you need to be logged-in while viewing your blog in order for those icons to be visible. If you're the author of the blog that you're viewing, and you're signed-in, try pressing CTRL+F5 on your keyboard to force a hard-refresh, or try clearing your browser's cache/cookies.

      You could also try with a different browser just to make sure your blog's account is okay.

      Cheers :)

      Delete
  22. Done but no solution! In a blog test instead is fully functional ...

    Thank you :)

    ReplyDelete
    Replies
    1. Is it not working on your primary blog? What's your blog's address?

      Delete
  23. www.interclubacquaviva.blogspot.com


    Thank you :)

    ReplyDelete
    Replies
    1. You've disabled your blog title, and there isn't a title in your blog to be centered at the moment. The text that says 'Quelli che I'Inter...' isn't your title, as this text is part of your header image.

      Cheers :)

      Delete
  24. OK!
    But my problem is that I do not appear on the horizontal bar "quick edit" and "Home" even when I enter with my password.

    Thanks and sorry :)

    ReplyDelete
    Replies
    1. Right.. Hmm.. Try this..

      1) Go to Dashboard - Template - Backup/Restore - Download Full Template.
      2) Then go to Dashboard - Template - Edit HTML - Revert Widget Templates to Default.

      Let me know how it goes :)

      Delete
    2. Dynamic View only supports CSS customisations, and clicking on the link will not remove CSS customisations. So you're good. But just to be on the safe side, you could backup your customisations and restore it in case it goes away.

      Cheers :)

      Delete
    3. I did what you told me, but I have not solved the problem ... Thanks for your patience :)

      Delete
    4. What is weird. It might not be a problem with your blog. Sometimes, your browser could be acting weird. What browser are you using? Have you tried using a different browser?

      Delete
    5. Use chrome, firefox and Midori. Same problem. The blog in question, www.interclubacquaviva.blogspot.com, if you can help, and recently switched to dynamic views, before everything worked perfectly ...: (
      Thank you very much;)

      Delete
    6. Could you take some screenshots (and upload it to your post or something), and send its link to me so that I can see what you're seeing?

      Delete
    7. Simple, I do not see the icons on the right of maintenance of the header bar, even if as an administrator within ...

      Delete
    8. Screenshots could really help to tell things that aren't obvious to our eyes :)

      Delete
    9. Here is link Screenshots:
      http://imageshack.us/photo/my-images/853/inter105017.png/

      thanks;)

      Delete
    10. Right.. Try adding this to your CSS:

      .blog-admin, .item-control {
      display: block !important;
      }

      Cheers :)

      Delete
    11. Perfect! You are brilliant!
      Thank you, thank you, thank you ...;)

      Delete
    12. I saw that the care symbols are now always available for guests ...!
      thanks;)

      Delete
    13. I'm afraid there isn't anything much left for me to suggest, with the limited resources that I have from my end to inspect the matter. I'd suggest you to open a new question at the Blogger Help Forum, and see if you can get a reply.

      http://productforums.google.com/forum/#!forum/blogger-it

      Cheers :)

      Delete
  25. Another curiosity, I'm sorry if I take advantage: you can highlight the comment text Administrator with a different color?
    Thank you, thank you, thank you ...

    ReplyDelete
    Replies
    1. Hi Francesco,

      Unfortunately, we can't differentiate author comments from other comments in Dynamic View. So we can't specifically make changes to author comments alone.

      Cheers :)

      Delete
  26. Hi Yoga,
    I am trying to align my Page Titles in the centre but everything I've tried has not worked. Please also note that I mean the Page titles not the blog title or the post titles. I have made pages such as Contact me, etc. for which the text is centre aligned but I can't align the page title so it ends up looking lopsided. I am using the Dynamic Views Template that is shown above in this post. Could you please suggest a way to do this ?? Any help would be greatly appreciated.

    ReplyDelete
    Replies
    1. Hi Gautam,

      Let's have a look at your blog. What's your blog's address?

      Delete
  27. Hi Yoga,

    I would like my Dynamic blog's post title to be a different font and color, and if possible the whole post title bar to be clickable as a block eg. .header .title {display: block;}.

    I could'nt figure out for all my images in the post to be of same 450px width.

    Would you mind to help me also to add facebook like button in the center of "overview-header" div.

    Thanks for the help in advance.
    Jobinsin

    ReplyDelete
    Replies
    1. Hi Jobinsin,

      What's your blog's address?

      Cheers..

      Delete
    2. Hi
      Thank you Yoga for the prompt reply,

      Please note my test blogs name http://livemoves.blogspot.com

      I also noticed that after doing something, my color customisations are disappeared and even aften re-customising the blog appears in basic format. Any clue ?

      Thanks & regds.
      Jobinsin.

      Delete
    3. Hi Jobinsin,

      Let's handle one thing at a time, to avoid confusion. First of all, there's a bug lurking around that isn't letting users to apply theirs changes. But some users have reported success with IE. Could you try again with either IE8 or IE10? You should be able to change your post title font if you can your changes to save (Template Designer - Advanced - Post title)

      Delete
    4. Thank you Yoga verymuch indeed.

      That did the work, through IE9 I could do it. I re-applied the customisations.

      What had happened earlier was, I have been trying to change manythings and nothing seemed to be working because the changes were not getting saved. I tried both in firefox and chrome.

      Now only thing remaining is to add a facebook like button in the center of "overview-header" div (navigation bar).

      Thank you once again.

      Regards,
      Jobinsin

      Delete
    5. Hi Jobinsin,

      This might help:
      http://bloggercode-blogconnexion.blogspot.de/2011/09/facebook-like-box.html

      Cheers :)

      Delete
    6. Thank you very much Yoga,

      Thanks once again for your kind heart to help others.

      Regards,
      Jobinsin.

      Delete
  28. First of all, I found some really helpful tips from here. So huge thanks for helping the community!

    But... after trying to search here and Google, I don't seem to be able to find solution, how to center images in my posts.

    I have already managed to even the width of my text to compensate the images that have 640px width and it looks good. But I also have images with 480px width and I think those would look better if they were centered.

    In my case as you can see, you can just center ALL IMAGES because the ones I used are fixed-width already.

    My blog's address is indiemode.blogspot.fi

    ReplyDelete
    Replies
    1. Hi Joonas,

      Could you gimme the link of one your posts that has a 480px-sized image?

      Cheers..

      Delete
    2. For example this one. The 480px-sized ones are in the end.

      http://indiemode.blogspot.fi/2013/01/tiikerin-elamaa.html

      Delete
    3. Right.. Here, use this. Add the following to your 'Add CSS' box:

      .article .article-content img{
      text-align: center !important;
      display: block !important;
      }

      Cheers :)

      Delete
  29. Hi Yoga,
    Firstly a huge thank you, I've found your site massively useful when switching to Dynamic Views but I'm having a problem with centering content on my blog that is driving me crazy. At first I thought it was that my post and page titles were off-center, but now I'm not sure if it's the content background, either way it's making everything look out of line. Have you got any idea what could be going wrong? Here's a page link: http://www.clairemassey.co.uk/p/writing.html and a post link: http://www.clairemassey.co.uk/p/writing.html Many, many thanks in advance.
    Claire

    ReplyDelete
    Replies
    1. Hi Claire,

      This is what I'm seeing:
      http://img28.imageshack.us/img28/1193/20130402142212capture.png

      Your content appears centered to me. What am I missing?

      Delete
    2. Hi Yoga,
      Thanks so much for your reply. To me the title 'Writing' looks like it has more white space to the right than the left of it, which makes it appear slightly off-center. Maybe I'm being too pernickety though! :-) Thanks very much for looking into it.
      Claire

      Delete
    3. Hi Yoga, Sorry to bother you again. It's a bit clearer on this page http://www.clairemassey.co.uk/p/about.html where the photograph is inserted as centered, so if the page title was centered it shouldn't look off-center in relation to the image, which it does. I've tested it in different browsers and the same thing happens. Thanks again. Claire

      Delete
    4. Hi Claire,

      Try adding this to your CSS:

      .article .article-header .title{
      padding-right: 0px !important;
      }

      Cheers.

      Delete
    5. Hi Yoga,
      It worked!! Thank you so much. And thanks again for all the tutorials you've put up here.
      Claire

      Delete
    6. Hi Claire,

      Thanks a lot for the tips! Pizza tonight :D

      Thanks again :)

      Delete
  30. Hi,

    I've been using a lot of your CSS tips to customise my new dynamic views blog funny-joke-pictures.com. They worked fine, but then I noticed that about half the time the CSS is not being loaded properly (in both Chrome and IE). Ctrl F5 would usually fix it, but not always. I tried clearing browser caches etc, but that didn't fix the problem. Then I tried clearing out all the custom CSS and it works fine now. I've trimmed the CSS right back to just customising the view menu and removing the publish info. Just to let you know.

    Robert

    ReplyDelete
    Replies
    1. Hi Robert,

      We call this the ghost template effect. We're not exactly sure why this is happening, but the people over at Blogger thinks it is because the amount of contents that needs to be loaded are too large (after modifications), resulting in custom tweaks being disregarded. This claim, however, is not proven true, as the ghost template strikes even when there's no modification involved sometimes.

      Cheers.

      Delete
  31. Hey.
    I don't know why, but when i paste this link:
    #header.header .header-bar span.title{
    width: 100% !important;
    text-align: center !important;
    }
    into my css, my title just gets a link instead of moving to the center... Why? and what can i do about it?

    ReplyDelete
    Replies
    1. I can't find a Dynamic View blog in your blog list. What's your blog's address?

      Delete
  32. Replies
    1. Two reasons:

      1) You're not using a Dynamic View template (the tweak above is for DV templates only)
      2) You don't have a title set up.

      What you have is an image of a title. You need to alter this image and re-upload it as your new header.

      Delete
  33. This site rocks. It worked properly fine! Thanks a bunch!

    ReplyDelete
  34. Hey there. I'd like to display the name of the page I'm currently on in the title. Either it could be part of the title, or the description. The challenge is to update it whenever a page is selected. Any ideas how to do that?

    ReplyDelete
    Replies
    1. By title, did you mean your blog's title (as opposed to post title)? If yes, this will be extremely tricky and time-taking. Unfortunately, I have been quite busy and I don't have the free time I would like to devote to this tweak.

      Delete
  35. Your blog is simply amazing. You have helped with so many things that even web developers that I hired were not able to do. Thank you!!!!

    ReplyDelete
  36. Wonderful post! Love it.
    One question pls. How can I center the post title on 'home page'? If you take a look at my blog prettygloss.blogspot.com on the 'home page' the post title is right aligned. How can I center them?

    Sarah

    ReplyDelete
    Replies
    1. Hi Sarah,

      See if this is what you're looking for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #lead .title{
      text-align: center !important;
      }

      Cheers :)

      Delete
    2. That look great!!
      Thanks!!

      2 questions pls:

      i) How can I do the same for all posts below (center all post titles on home page?

      ii) You gave me a CSS that extended the post summary to the maximum (towards the right) on the home page. How can I do the same for all the posts below? As you can see the posts below are only half way on the page and do not extend towards the right.

      Sarah
      www.prettygloss.blogspot.com

      Delete
    3. Hi Sarah,

      1) This one should do:

      #lead .title, #fold .title, #feature .title{
      text-align: center !important;
      }

      2) See if this works (please test the effect across multiple devices with different screen sizes):

      #fold .item{
      width: auto !important;
      }

      #fold .has-thumbnail .story{
      min-width: 600px !important;
      }

      Cheers! :D

      Delete
    4. Great! Thanks!

      Both work amazingly!

      Regards,
      Sarah

      Delete
    5. Hi Yoga, I have a problem. For some reason (i) my post text is being chopped off at the end of each line and (ii) the posts are 'justified' though I havent applied that setting.

      HELP!! :(

      Sarah

      Delete
    6. This should have been resolved by now. Are you still seeing the problem?

      Delete
  37. Why can not embed the widget on a page of contact in dynamic views? thanks;)

    ReplyDelete
    Replies
    1. Hi Francesco,

      What kind of widget are you trying to embed in your page? If you're trying to insert a contact form, the contact forms from www.123contactform.com works just nice with dynamic views :)

      Delete
  38. You do some amazing work.
    I hope you realize how much of a help you are to the blogging community, especially us newer ones : )
    Highly appreciate it

    ReplyDelete
  39. Hi Yoga, I have come up with another problem.

    On my blog homepage (www.prettygloss.blogspot.com) whenever I put up a photo which is horizontally wider than vertically longer the post summary moves beneath the photo. You can check it out with my latest post. I tried changing the photo size, I tried changing the page width but its not working.

    Pls help.

    Sarah

    ReplyDelete
    Replies
    1. I believe this is the effect of trying to fix the width of your posts (I think I gave you the code in your previous code or something). Now I cannot tell for sure, but you can. Save all your code (from your 'Add CSS' box), and remove the codes that you've entered one by one, from the most recent, and see which one fixes it. That must be the culprit.

      Delete
  40. Hey! It would be great if you could tell me a way to center my post title, as in is there a way to do it? I have been reading your blog for a while now and love it so much! :D :) Here's a link to my blog - http://wingsofharmony.blogspot.in/

    ReplyDelete
    Replies
    1. Hey there,

      This should work good:

      .post-title.entry-title{
      text-align: center !important;
      }

      Cheers :)

      Delete
  41. Hey- your tutorials are amazing! I have no idea about this stuff and it's really helped me customize my blog... thanks so much!

    Currently, my (Dynamic Views) blog title and description are left-justified. I've been trying to use this tutorial and others on your site to figure out a way to: center the title, place the description below the title, and also center the description. I'd also like to move them a little further down, so there is a little more buffer/space at the top of the page. It's a little tight up there.

    So far it's not doing what I want it to. The blog is http://boundtogetherforchrist.blogspot.com. Any advice?

    ReplyDelete
    Replies
    1. Hello Ann,

      1) This should force your Description to go to a new line:

      #header.header div.header-bar span.title h3{
      display: block !important;
      }
      #header .header-bar .title{
      padding-top: 14px;
      line-height: 30px !important;
      margin-right: 0px !important;
      }
      #header.header div.header-bar span.title h3{
      white-space: normal !important;
      }

      2) This should allow you to adjust the vertical position of your title field from top (also included the code to center it):

      #header .header-bar .title{
      padding-top: 20px !important;
      text-align: center;
      }

      3) This should answer your next question. You'd have to increase the height of your header to accommodate the above. See Step 1 in the link below to get this done:

      http://www.southernspeakers.net/2014/01/show-description-text-in-full-in.html

      Delete
  42. I am using the Magazine dynamic view. To hide the others I used the following code:

    #header #views {
    display: none;
    }

    #header #pages:before {
    border-left: 0px;
    }

    #header #pages {
    margin-left: 14px;
    }#ContactForm1
    {
    display: none ! important;
    }
    .contact-form-name, .contact-form-email {
    max-width: 200px;
    width: 100%;
    }
    .contact-form-email-message {
    max-width: 400px;
    width: 100%;
    height: 150px;
    }
    }

    Its just something I picked off the internet. But now I also want to make the title center aligned. If I mess with the above code, the other dynamic views also show up. can you please suggest a way by which I can keep only the magazine view and make the title of my blog center aligned? the link for my blog is http://politicsmediasociety.blogspot.in/

    ReplyDelete
  43. I got to work it somehow using your codes. But I cannot increase the font size. Please help me in this regard.

    ReplyDelete
    Replies
    1. I can no longer view your blog. Have you changed your URL?

      Delete

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