Tumblr帖子页面标题大小

时间：2013-05-29 11:40:51

标签： html css web themes tumblr

我正在尝试修改Tumblr布局（Club Monaco），我在索引和帖子页面之间切换时遇到标题图片大小问题。

http://jncunha.tumblr.com

博客上到处都是测试图片，稍后会被替换。

正如您所看到的，当您查看索引页时，您的标题具有特定大小并且在页面中居中。单击图像时，帖子页面会显示较小的标题。当我试图覆盖CSS给它一个自定义的大小和边距，我不能让它再次集中在iPad上，例如，它显示在中心之外。索引中的标题不会发生这种情况。对于最后一个，我只是指定了我想要的新宽度，它会自动调整它，保持中间对齐。任何解决这个问题的想法？也许这是一个简单的问题，但我对HTML或CSS不是很好......

这是源代码：

<!DOCTYPE html>
<html>
  <head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
      <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    <link href="http://static.tumblr.com/i21wc39/z8hmn3w7m/application.css" media="all" rel="stylesheet" type="text/css" />
    <style type="text/css">
      {CustomCSS}
    </style>
    <!--[if IE 9]>
    <script type="text/javascript">var is_ie = true;</script>
    <![endif]-->

    <!-- Pinterest -->
    <script type="text/javascript">
      (function(d){
      var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
      p.type = 'text/javascript';
      p.async = true;
      p.src = '//assets.pinterest.com/js/pinit.js';
      f.parentNode.insertBefore(p, f);
      }(document));
    </script>

    <meta name="image:Header" content=""/>

    <meta name="text:Google Analytics" content=""/>
    {block:IfGoogleAnalytics}
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{text:Google Analytics}']);
      _gaq.push(['_trackPageview']);

      (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
    {/block:IfGoogleAnalytics}

    <meta name="if:Hide Club Monaco Logo" content="0"/>


  </head>
  <body class="theme_garden {block:TagPage}tag_page{/block:TagPage} {block:IndexPage}index{/block:IndexPage} {block:PermalinkPage}permalink{/block:PermalinkPage}" {block:TagPage}data-tag="{Tag}"{/block:TagPage}>
    <div class="container">
      <div class="row" id="header">
        <div class="{block:IndexPage}span14 offset5{/block:IndexPage} {block:PermalinkPage}span8 offset8{/block:PermalinkPage}" id="logo">
          <h1>
            <div class="bottom">
              <a href="/">
                {block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
                {block:IfNotHeaderImage}{Title}{/block:IfNotHeaderImage}
              </a>
            </div>
          </h1>
        </div>
        <div class="span4" id="navigation">
          <ul id="main-navigation">
            {block:Pages}
            <li class="nav-item"><a href="{URL}">{Label}</a></li>
            {/block:Pages}
            {block:AskEnabled}<li class="nav-item"><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
            {block:SubmissionsEnabled}<li class="nav-item"><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
            <!--<li class="nav-item"><a href="/archive">Archive</a></li>-->
          </ul>
        </div>
      </div>

      {block:IndexPage}
      <div class="row"><div class="span22 offset1"><div class="line-break"></div></div></div>
      {/block:IndexPage}

      <div class="row" id="feed">
        <div class="{block:IndexPage}span22 offset1{/block:IndexPage}" id="posts">
          {block:TagPage}<h2 class="tag_title">{Tag}</h2>{/block:TagPage}
          {block:IndexPage}<div id="title_site">Behind the scenes</div>{/block:IndexPage}
          <div id="posts-container">

            {block:Posts}
            <div class="post masonry_visible {PostType} {TagsAsClasses} {block:Photoset}photoset{/block:Photoset}" {block:ContentSource}data-source="{PlaintextSourceURL}"{/block:ContentSource} data-permalink="{Permalink}">
              <div class="attachment">
                {block:Photo}

                {block:IndexPage}
                <a href="{Permalink}">
                <img src="{PhotoURL-500}" alt="{PhotoAlt}" data-highres="{PhotoURL-HighRes}" />
                </a>
                {/block:IndexPage}

                {block:PermalinkPage}
                {LinkOpenTag}
                <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
                {LinkCloseTag}
                {/block:PermalinkPage}

                {LinkCloseTag}
                {/block:Photo}

                {block:Photoset}

                {block:IndexPage}
                {block:Photos}
                <a href="{Permalink}">
                <img src="{PhotoURL-500}" alt="{PhotoAlt}" data-highres="{PhotoURL-HighRes}" data-caption="{PlaintextCaption}" />
                </a>
                {block:Photos}
                {/block:IndexPage}

                {block:PermalinkPage}
                {Photoset-700}
                {/block:PermalinkPage}
                {/block:Photoset}

                {block:Video}
                {Video-500}
                {/block:Video}

                {block:Audio}
                {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
                {AudioPlayer}
                {/block:Audio}

                {block:Quote}
                <div class="quote_body">{Quote}</div>
                {block:Source}<div class="quote_source">{Source}</div>{/block:Source}
                {/block:Quote}


                <!--<div class="social clearfix"><ul class="unstyled">-->
                  <!--<li class="like">{LikeButton color="black" size="13"}</li>-->
                  <!--<li><a class="reblog" href="{ReblogURL}">r</a></li>-->
                  <!--<li><a class="facebook" href="https://www.facebook.com/dialog/feed?app_id=221438161314294&link={URLEncodedPermalink}&redirect_uri={URLEncodedPermalink}">f</a></li>-->
                  <!--<li><a class="twitter" href="http://twitter.com/intent/tweet?url={URLEncodedShortURL}">t</a></li>-->
                  {block:Photo}
                  <!--<li><a class="pinterest" href="//pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={URLEncodedPhotoURL-500}" data-pin-do="buttonBookmar">p</a></li>-->
                  {/block:Photo}
                  <!--<li class="permalink_li"><a class="permalink" href="{Permalink}">l</a></li>-->
                <!--</ul></div>-->

              </div>
              <!--<a class="meta" href="{Permalink}">
                {block:Date}{ShortMonth} {DayOfMonth}, {Year}{/block:Date}
                {block:NoteCount}/ {NoteCountWithLabel}{/block:NoteCount}
              </a>-->
              <div class="body">
                {block:Text}
                {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                {Body}
                {/block:Text}

                {block:Chat}
                {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}

                <ul class="chat_transcript unstyled">
                  {block:Lines}
                  <li class="{Alt} user_{UserNumber}">
                    {block:Label}
                    <span class="label">{Label}</span>
                    {/block:Label}
                    {Line}
                  </li>
                  {/block:Lines}
                </ul>
                {/block:Chat}

                {Caption}

                {block:PermalinkPage}
                {block:ContentSource}
                <p>
                  <a href="{SourceURL}">
                    {lang:Source}:
                    {block:SourceLogo}
                    <img src="{BlackLogoURL}" width="{LogoWidth}"
                         height="{LogoHeight}" alt="{SourceTitle}" />
                    {/block:SourceLogo}
                    {block:NoSourceLogo}
                    {SourceTitle}
                    {/block:NoSourceLogo}
                  </a>
                </p>
                {/block:ContentSource}
                {/block:PermalinkPage}
              </div>

              {block:HasTags}
              <div class="tags">
                {block:Tags}
                <a class="tag" href="{TagUrl}" data-tag="{PlaintextTag}">#{Tag}</a>
                {/block:Tags}
              </div>
              {/block:HasTags}

              {PostNotes}

            </div>
            {/block:Posts}

          </div>
        </div>
      </div>

      {block:Pagination}
      <div class="row pagination">
        <div class="span22 offset2">
          {block:PreviousPage}
          <a href="{PreviousPage}" class="previous">Previous</a>
          {/block:PreviousPage}

          {block:NextPage}
          <a href="{NextPage}" class="next">Next</a>
          {/block:NextPage}
        </div>
      </div>
      {/block:Pagination}

      {block:IfNotHideClubMonacoLogo}
      <div class="floating_logo">
        Theme by
        <a href="http://clubmonaco.com">Club Monaco</a>
      </div>
      {/block:IfNotHideClubMonacoLogo}

    </div>

    <script src="http://static.tumblr.com/i21wc39/hL6mn3w8d/application.js" type="text/javascript"></script>

    <script type="text/html" class="template" id="slideshow_template">

      <div class="row" id="feature">
        <div class="span2 slideshow-header">
          <img src="{{ slideshow.cropped_image }}" alt="{{ slideshow.name }}" />
        </div>
        <div class="span22" id="feature-slideshow">
          <div id="slideshow" class="carousel slide">
            <div class="carousel-inner">
              {{#slides}}
              <div class="item">
                {{#theme_garden}}<a href="{{ url }}"><div class="centering_table"><div class="vertical_centering">{{/theme_garden}}
                <img src="{{ cropped_image }}" />
                {{#theme_garden}}</div></div></a>{{/theme_garden}}

                <div class="info">

                  <div class="centering"><div class="copy">
                    {{ copy }}
                    <br/><br/><a href="{{ url }}" class="slide_link">{{ link_title }}</a>
                  </div></div>

                </div>
              </div>
              {{/slides}}
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="span2"></div>
        <div class="span22">
            <ol class="carousel-dots clearfix unstyled">
            </ol>
        </div>
      </div>
    </script>

    <script type="text/html" class="template" id="tag_nav_template">
      <div class="tag_nav_container clearfix">
        <ul class="tag_nav unstyled">
          <li class="view_all"><a href="#">View All</a></li>
          <li><a href="/tagged/womens" data-tag="womens">Womens</a></li>
          <li><a href="/tagged/mens" data-tag="mens">Mens</a></li>
          <li><a href="/tagged/accessories" data-tag="accessories">Accessories</a></li>
          <li><a href="/tagged/photographers-and-cast" data-tag="photographers_and_cast">Photographers and Cast</a></li>
        </ul>
      </div>
    </script>

    <script type="text/html" class="template" id="photo_lightbox_template">
      <div class="lightbox_overlay"></div>
      <div class="lightbox">
        <a href="#" class="close">Close</a>
        <div class="padding">
          <div class="scroller">
            {{&content}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/javascript">
      $(document).ready(function() {
      $("body").clubMonaco({themeGarden: true});
      });
    </script>
  </body>
</html>

还有一些自定义CSS：

#logo h1 .bottom img {
 max-width:100%;
}

#header
{
margin-bottom:30px;
}

body{
background-color:#000000;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.post .body {
text-align:justify;
color:#ffffff;
}

h1, h2, h3, a {
color:#ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.post .meta {
text-align:justify;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#feed h2{
text-align:justify;
}

#title_site{
text-align:center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:bold;
color:#ffffff;
font-size:24px;
text-transform:uppercase;
margin-bottom:30px;
}

.post .body {
padding:0px;
font-weight:normal;
}

0 个答案:

没有答案
相关问题
最新问题