Jonathan Berman

Not auto-sizing for smaller monitors?

Vote 0 Votes

A friend told me she cannot see my whole site on her small monitor, and that it should auto-resize and isn't? Is this a setting I am missing somewhere? My blog is www.kittysafe.net

Thanks!

Is it the additions on the left my picture / music player causing problems? I noticed it's pushed down the template somewhat, but I don't know how to add it without it effecting the movable type template....

Any help is greatly appreciated.

~JMB

Reported on Movable Type 4.0x

51 Replies

| Add a Reply
  • Hi Jonathan,

    The website width doesn't have anything to do with a setting from the blog admin.

    Your blog layout is 940 pixels in width. I am not sure if the has a problem with that or with the player you've added on the very left of the layout.

    That player is a bit problematic because it needs 200 pixels on the left column and it won't display properly on many screen resources.

    What I would recommend is to either place that inside one of your sidebars, together with reducing its width to 160 pixels so that it matches the sidebar allowance.

    Alternatively, you could change the layout from a 3-columns based one into a 2-columns based one, because that would give you a larger sidebar and there would be plenty of space for the player, without the need to reduce its current specifications.

    Kind Regards,
    Mihai Bocsaru

    ----------------------------------
    Daily Movable Type Consultant

    Web Development
    Movable Type Consulting
    Six Apart Partner

    http://www.pro-it-service.com/
    ----------------------------------

    Movable Type Demo
    http://www.movabletypedemo.org/
    ----------------------------------

    Open Melody Demo
    http://www.openmelodydemo.org/

  • Very interesting, thank you! I will try that.

  • How would I put this code at the top of the column, above the search or below it?

    <!-- Music Player Start -->
    <div align="center">
    <script language='JavaScript' src='musicplayer.js' type='text/javascript'></script>
    </div>
    <!-- Music Player End -->

  • I see you've changed your layout into a 2-columns based one.

    That is good, but not enough yet.

    When you choose the 2-columns layout, make sure that you pick:
    "2-Columns, Wide, Medium"

    As of now, you've picked:
    "2-Columns, Wide, Thin"

    Unfortunately the theme you are using doesn't support "2-Columns, Wide, Medium" so apart from picking another theme which supports it, you could patch the current one.

    In order to continue with this theme, but use the Wide, Medium layout, you should replace the following template variable inside your header template:

    <$mt:Var name="page_layout"$>

    with:

    "layout-wm" (without the quotes)

    As for your question above, on where to place the player coding. That is fully up to you if you put it above or below the search...

  • Where is the header template I don't see it listed under templates.

  • Follow it from your "Main Index" template. It should be a template module at the system overview level, not the blog level.

  • I so do not follow what you're saying at all.
    I'm looking at the Main Index template... I have no idea what you're saying.

  • Look at the sidebar and try to take this easy.

  • Under System Overview, is Global Templates, and there's no header template listed there.

    Comment throttle No
    Commenter Confirm No
    Commenter Notify No
    Entry Notify No
    New Comment No
    New Ping No
    Password Recovery No
    Subscribe Verify

  • Under System Overview, on the sidebar I see:

    Quickfilters

    Show All Templates
    Template Modules
    Email Templates
    System Templates

  • Inside the "Main Index" template do you see on its right a list of the linked modules from that template?

    Can you see one called "Header", "Head", "Banner" or similar?

    Or an even easier method...

    Go to:
    System Overview -> Global Templates

    And search for the variable I've mentioned to you above.

    Replace it with that I've advised and save.

    Then come back to your blog dashboard and republish your entire blog. You should always republish your blog after making changes to your templates.

  • What if you go inside the "Main Index" template from your blog.

    Copy and paste its coding here please.

  • If I go into Blog Templates

    Main Index is listed under Index Templates
    If I click on Main Index, I see header banner but that code is not in there.

    If I go to System Overview -> Global Templates
    and search for <$mt:Var name="page_layout"$>

    it returns:

    No Templates were found that match the given criteria.

  • My Main Index doesn't have that code, it has:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
    <head>
    <$mt:Include module="HTML Head"$>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
    <title><$mt:BlogName encode_html="1"$></title>
    </head>
    <body id="<$mt:BlogTemplateSetID$>" class="mt-main-index <$mt:Var name="page_layout"$>">
    <div id="container">

    <!-- BEGIN INSERT -->

    <table align="left" cellpadding="0" cellspacing="0">
    <tr style="border:1px solid #ffffff;" bgcolor="#010910">
    <td bgcolor="#DEE" align="center"><a href="http://originalfool.kittysafe.net/forum" target="_blank">FORUM</a> | <a href="/links" target="_blank">LINKS</a> | <a href="/about" target=_blank">ABOUT</a></td>
    </tr>
    <tr>
    <td><img src="img/Nameplate.jpg" width="240" height="80" alt="Jonathan Berman" /></td>
    </tr>
    <tr style="border:1px solid #ffffff;" bgcolor="#010910">
    <td bgcolor="#DEE" align="center"><a href="feedback.html" target="_blank">Contact</a> | <a href="vampcats.php" target="_blank">Powered by vampires</a></td>
    </tr>
    </td>
    <tr>
    <td>
    <!-- Music Player Start -->
    <div align="center">
    <script language='JavaScript' src='musicplayer.js' type='text/javascript'></script>
    </div>
    <!-- Music Player End -->
    </tr>
    </td>

    </table>

    <!--END INSERT -->


    <div id="container-inner">

    <$mt:Include module="Banner Header"$>

    <div id="content">
    <div id="content-inner">

    <div id="alpha">
    <div id="alpha-inner">
    <mt:Entries>
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
    </mt:Entries>


    <div class="content-nav">
    <a href="<$mt:Link template="archive_index"$>">Archives</a>
    </div>


    </div>
    </div>

    <$mt:Include module="Sidebar"$>

    </div>
    </div>


    <$mt:Include module="Banner Footer"$>


    </div>
    </div>
    </body>
    </html>

  • Apparently it will not let me paste code.

    • It lets you paste it, but you are supposed to strip the angle brackets before posting it.

      In other words before posting HTML coding on this forum, you are supposed to replace:

      <

      with:

      &lt;

      AND


      >

      with:

      &gt;

      I've corrected your posting above and the template coding displays properly now.

  • If you have searched for:
    <$mt:Var name="page_layout"$>

    You would have seen that it is present inside your blog templates, including the "Main Index" one you've pasted for me here.

    So in your case, your template set doesn't use a "Header" template module which to contain the body starting tag with the parameter we want to change.

    All you have to do is to search for the variable I told you above and to use the replace function and replace it with the what I've mentioned above.

    As soon as the replacement is done, republish your entire blog and you would have a larger sidebar.

    Then move the player to any widgets from the sidebar. Play with it until you are happy with the result.

  • Okay I think I figured out why I can't find the code you told me about, you failed to mention not to look for that exact code, but to replace the < with brackets...

  • Ya, I figured out what was going on.

  • Oh, did you get it with the angle brackets escaped?

    You never know how to make everybody happy :)

    I've escaped them so that they display properly on the forum, but on the email notification you've got them escaped.

    This sounds like a good reason to file a bug report about this ;)

  • Okay, I changhed the code but I still only have two options: Wide-thin, thin-Wide

  • Trying to do a "publish whole site"

  • You cannot change that, but with the change you've made you are overwriting the option from that theme.

    So you are forcing it to use the Wide, Medium layout.

  • Ahh, gotcha. My other question was... how would I place the music player below the search form? Where exactly would I put the music player code, if that's not too much trouble?

  • Looking at your coding above I could see linked from the "Main Index" template a template module called "Sidebar".

    Take a look at that and see where you could add the player.

    Without knowing what your "Sidebar" template module contains I cannot be very specific.

  • Sidebar:

    mt:Ignore!--
    #
    # The sidebar is made up of one or two columns.
    # For 2-column designs, just beta.
    # For 3-column designs, beta and gamma.
    #
    -->/mt:Ignore


    div id="beta"
    div id="beta-inner"

    mt:If name="page_columns" eq="2"
    mt:Ignore!-- Use the 2-column layout Sidebar if page layout is layout-wt or layout-tw. --/mt:Ignore
    $mt:WidgetSet name="2-column layout - Sidebar"$
    mt:Else name="page_columns" eq="3"
    mt:Ignore!-- Use the 3-column layout Primary Sidebar if page layout is layout-wtt or layout-twt. --/mt:Ignore>
    $mt:WidgetSet name="3-column layout - Primary Sidebar"$
    /mt:If

    /div
    /div


    mt:If name="page_columns" eq="3"
    mt:Ignore!-- Use the 3-column layout Secondary Sidebar if page layout is layout-wtt or layout-twt. --/mt:Ignore
    div id="gamma"
    div id="gamma-inner"
    $mt:WidgetSet name="3-column layout - Secondary Sidebar"$
    /div
    /div
    /mt:If

  • Since you chose a 2-columns format, you will have to go inside the widgetset: 2-column layout - Sidebar

    There you would see the current widgets from your sidebar.

    You are free to either edit one of those widgets and to add your player coding there, or to create a new widget and then to go to again to the widgetset and drag-n-drop the new widget on the exact place where you want it display comparing to the other widgets present on that widgetset.

    Always remember to republish after making changes!

  • When I add the music player code at the bottom of the search widget it doesn't show up on the site...

  • One sec I'll republish

  • Ya that's not working. I don't think you understand I'm asking where to put it cos I can't tell where I can put it simply by looking at the code.

  • Ah ha! Okay I trial-and errored it and it worked.

  • That's a good start!

    READ THIS FROM THE FORUM PAGE, NOT FROM THE EMAIL NOTIFICATION YOU ARE GETTING!

    To make it look nicer do this:

    Replace:

    <div align="center">
    <script language='JavaScript' src='musicplayer.js' type='text/javascript'></script></div>

    With:


    <div class="widget-search widget">
    <div class="widget-content">
    <div align="center">
    <script language='JavaScript' src='musicplayer.js' type='text/javascript'></script>
    </div>
    </div>
    </div>

    Eventually with:

    <div class="widget-search widget">
    <h3 class="widget-header">Let the music play!</h3>
    <div class="widget-content">
    <div align="center">
    <script language='JavaScript' src='musicplayer.js' type='text/javascript'></script>
    </div>
    </div>
    </div>

  • Don't forget also about the table that remained hanging on the left of the header, that was also a source of the layout disruption.

    Take that out from there and put it on the sidebar as well ;)

  • Also, I would expect that you are going to use the new layout (Wide,Medium) across all the page types on your blog, not only the home page (Main Index).

  • Hey, I think I got it! How's this looking?
    www.kittysafe.net

  • Well done!

    Remember also about the other thing I've mentioned above. The table hanging on the home page, on the left side of the header.

    Also, I would advise to extend the large sidebar layout to all the page types.

  • You're not talking about the table with the images and links I added on the left are you?

  • If that is displayed outside the layout, next to the header, on the left of it and breaking the layout (which is actually the topic of this forum discussion), yes I am talking about it.

  • I wouldn't mind moving my links from the left to the thin blue line above the banner image, is that feasible?

  • I will stop here for now. It's 01:38 for me.

  • okaY! Mihai, thank you so much for your time.

  • You're welcome Jonathan!

    What is fun is that when I've advised you to move the player to the sidebar, I thought that you would move also the table that is now hanging on the home page.

    Why do you have to do that?

    Because that is breaking the layout for your friend, as well as many other people using the XGA screen resolution.

    I won't put that table inside the header, but on the sidebar, in the same fashion you did it for the player.

    And I won't run the "Wide,Medium" layout only on the "Main Index" template, but also on all the other templates from your blog, because the other page types are still looking like the previous layout...

  • i will try that thanks, I will set wide medium across the board thank you!

  • Okay I fixed it in archives.html as well, the layout-wm fix.

  • Hmm I thought I need, I will check it over and talk to you later, I know you need to get some sleep :)

  • A tip before I really go...

    Update the player coding from:
    http://www.kittysafe.net/musicplayer.js

    And reference "musicplayer.swf" as "/musicplayer.swf".

    There are 2 occurrences!

    Otherwise the player won't show up on individual articles, and other page types, like categories, monthly archives etc.

  • Add a slash also before "playlist.php"

  • I was just fixing the music player...

    I actually changed the two lines to http://www.kittysafe.net/musicplayer.swf?playlist=http://www.kittysafe.net/playlist.php which seems to work... I'll try your way right now.

  • Yes, that is good.

    It is the same thing as with the slash.

    So you could safely let it stay like how you did it...

  • Awesome, thank you, I like your way better it's more concise ;)

  • You're welcome!

    They are pretty much the same.

Add a Reply

If you need to share template code, replace all the "<" signs with "&lt;" or use this utility.

Forum Groups

1774 6167

Last Topic: Template modules by Zielun on Feb 16, 2012

86 302

Last Topic: website entries by masoud on Oct 26, 2011

1434 5088

Last Topic: Maintenance announcement by Nick on Feb 17, 2012

695 2912

Last Topic: Insert Image / File Fails by Russ Miller on Feb 10, 2012

84 291

Last Topic: How to have some other characters in entry basename automatically written by Afshin Haghighatnia on Dec 22, 2011

174 740

Last Topic: Captcha images rendering slowly by ScottM on Feb 12, 2012

190 568

Last Topic: Analytics Reporting by michael webster on Feb 5, 2012

48 210

Last Topic: An idea and also a request by Afshin Haghighatnia on Jun 29, 2011

64 246

Last Topic: jQuery in MT 5.1 still at 1.4 - why? by perlmonkey on May 25, 2011

code.sixapart.com

137 478

Last Topic: Getting a thumbnail with xpath by Peter on Mar 13, 2011

222 720

Last Topic: Custom Field for Asset Not Appearing by android on Feb 9, 2012