نویسنده موضوع: RTL کردن یک قالب بوت-استرپ؟ (دفعات بازدید: 3468 بار)

afrod · « : 31 تیر 1393، 12:42 ق‌ظ »

پوسته های CSS رو می تونم با کمک firebug از راست به چپ کنم. ولی با پوسته ای که در آدرس http://dorfa.postach.io قرار داره و کدش رو در زیر گذاشتم، نمی دونم باید چکار کنم؟!

کد: [انتخاب]

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xmlns:og="http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <title>
      {% if is_login %}Login
      {% elif is_home %}{{ site.author }}
      {% elif is_tag %}{{ tag }}
      {% elif post %}{{ post.title }}
      {% endif %}
      | {{ site.name }}
    </title>

    {{ header_meta }}

    <link href="{{ static('themes/_assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ static('themes/_assets/bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ static('themes/_assets/fontawesome/css/font-awesome.min.css') }}" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic' rel='stylesheet' type='text/css'>
    <link href="{{ static('themes/apex/apex.css') }}" rel="stylesheet" />

    <!--[if IE 7]>
      <link href="{{ static('fontawesome/css/font-awesome-ie7.min.css') }}" rel="stylesheet">
    <![endif]-->

    <!--
    <style>
      /**
       * Your custom override CSS goes here. If you wanted to override the default link colour and hover state, you would do this:
       *
       *  a {
       *      color: #333; /* Override the default colour with a not-quite-black that is easy on the eyes on white screens */
       *  }
       *
       *  a:hover {
       *      color: #545454; /* This will now change the hover state as well */
       *  }
       *
       *  You can put anything you want to override in here, so be creative!
       */
    </style>
    -->

    {% if site.analytics %}
    <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{{ site.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>
    {% endif %}
  </head>
  <body>

    {% if is_login %}

      {{ login_form }}

    {% else  %}

    <div class="row">
      <div class="span4 header">
        <div class="bg-img" style="background-image: url('{% if site.cover_photo %}{{ site.cover_photo }}{% else %}{{ static('themes/expanse/images/cover-photo-1.jpg') }}{% endif %}');"></div>
        <div class="gradient"></div>
        <div class="title">
          <h1>{{ site.name }}</h1>
          <ul class="social">
            {% if site.twitter %}
            <li>
              <a href="{{ site.twitter }}" title="Twitter" target="_blank">
                <i class="icon-twitter"></i> Twitter
              </a>
            </li>
            {% endif %}

            {% if site.facebook %}
            <li>
              <a href="{{ site.facebook }}" title="Facebook" target="_blank">
                <i class="icon-facebook-sign"></i> Facebook
              </a>
            </li>
            {% endif %}

            {% if site.googleplus %}
            <li>
              <a href="{{ site.googleplus }}?rel=author" title="Google+" target="_blank">
                <i class="icon-google-plus"></i> Google+
              </a>
            </li>
            {% endif %}

            {% if site.linkedin %}
            <li>
              <a href="{{ site.linkedin }}" title="LinkedIn" target="_blank">
                <i class="icon-linkedin"></i> LinkedIn
              </a>
            </li>
            {% endif %}
            <li>
              <a href="{{ site.atom_url }}" title="RSS" target="_blank">
                <i class="icon-rss"></i> RSS
              </a>
            </li>
          </ul>
        </div>
        <a class="logo" href="/">
          <img class="avatar" src="{{ site.avatar }}" alt="{{ site.author }}" width="100%" height="100%" />
        </a>
        <div class="site-description">
          <ul>
          <li><a href="/">Blog</a></li>
          {% if pages %}
          {% for page in pages %}
          <li><a href="{{ page.permalink }}" class="{{ set_active(page.permalink) }}">{{ page.title }}</a></li>
          {% endfor %}
          {% endif %}
          </ul>
        </div>
      </div>
    </div>

    <div class="row wrapper">

      <div class="span4 spacer"></div>

      {% if is_home or is_tag %}

      <div class="span6 offset1 posts">

          {% if is_tag %}
          <h4 class="sub-heading span6">Showing all posts tagged {{ tag }}:</h4>
          {% endif %}

          {% if posts %}
          {% for post in posts %}
          <div class="post span6">
            <div class="row">
              <div class="span6">
                <h2><a href="{{ post.permalink }}#disqus_thread">{{ post.title }}</a></h2>
              </div>
            </div>
            <div class="post-body" data-type-cleanup="true">
              {{ post.content }}
            </div>
            <div class="post-info">
              <div class="info-left">
                <p class="date">{{ post.created_at|format_date }}</p>
              </div>
              <div class="info-right">
                <p class="read-more"><a href="{{ post.permalink }}">Read More &raquo;</a></p>
              </div>
            </div>
          </div>
          {% endfor %}
          {% if not is_tag %}
          <div class="pagination span6">
            {% if pagination.prev %}<a href="{{ pagination.prev }}" class="post-prev">&larr; View Previous Posts</a>{% endif %}
            {% if pagination.next %}<a href="{{ pagination.next }}" class="post-next">View More Posts &rarr;</a>{% endif %}
          </div>
          {% endif %}
          {% else %}
          <h4 class="sub-heading span6">No Posts Yet :(</h4>
          {% endif %}
      </div>

      {% elif post %}

      <div class="span6 offset1 posts">
        <div class="post whole span6">
          <h1>{{ post.title }}</h1>
          <div class="post-info">
            <div class="info-left">
              <p class="date">{{ post.created_at|format_date }}</p>
            </div>
            <div class="info-right">
              <p class="comments">
                <a href="/"><i class="icon-comment"></i> 0</a>
              </p>
            </div>
          </div>
          <div class="post-body">
            <div class="post-content" data-type-cleanup="true">
              {{ post.content }}
            </div>

            {% if post.type == 'link' %}
            <p><a href="{{ post.url }}"><i class="icon-share"></i> {{ post.url }}</a></p>
            {% endif %}

            {{ theme.social.bar }}

            {% if post.tags %}
            <ul class="post-tags">
            {% for tag in post.tags %}
              <li><a href="/tag/{{ tag }}">{{ tag|format_tag(link=False, humanize=True) }}</a></li>
            {% endfor %}
            </ul>
            {% endif %}
          </div>
          <div class="post-footer">
            <p class="back"><a href="/">&laquo; Go Back</a></p>
          </div>
          {% if site.disqus %}
          <div class="post-comments">
            <div id="disqus_thread"></div>
            <script>
              var disqus_shortname = '{{ site.disqus }}';
              var disqus_url = '{{site.base_url}}{{ post.permalink }}';
              (function() {
                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
              })();
            </script>
          </div>
          {% endif %}
        </div>
      </div>

    {% elif post.type == 'page' %}

      <div class="span6 offset1 posts">
        <div class="post whole span6">
          <h1>{{ page.title }}</h1>
          <div class="post-body" data-type-cleanup="true">
            {{ page.content }}
          </div>
          <div class="post-footer">
            <p class="back"><a href="/">&laquo; Go Back</a></p>
          </div>
        </div>
      </div>

    {% endif %}

    </div>

    {% endif %}

    {{ footer_meta }}

    <!-- bootstrap -->
    <script src="{{ static('themes/_assets/bootstrap/js/bootstrap.min.js') }}"></script>
  </body>
</html>

Ma3X · « **پاسخ #1 :** 31 تیر 1393، 09:29 ق‌ظ »

من از این استفاده می‌کنم:
https://github.com/odyseh/rtlbootstrap

afrod · « **پاسخ #2 :** 31 تیر 1393، 04:05 ب‌ظ »

نقل‌قول از: Ma3x در 31 تیر 1393، 09:29 ق‌ظ

من از این استفاده می‌کنم:
https://github.com/odyseh/rtlbootstrap

چطوری استفاده کنم؟ روی http://postach.io فقط امکان ویرایش کد بالا رو دارم. (چون جایی برای ذخیره نداره تا جایی که حتی مطالب رو از دراپ باکس و اورنوت باید منتشر کنیم)
لینکی که دادید رو در خط های زیر جایگزین کنم؟

کد: [انتخاب]

    <link href="{{ static('themes/_assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ static('themes/_assets/bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet" />

Ma3X · « **پاسخ #3 :** 31 تیر 1393، 04:11 ب‌ظ »

اگر از دراپ‌باکس به عنوان هاست استفاده می‌کنه، فایل css رو توی دراپ‌باکس آپلود کنید، بعد لینک مستقیمش رو بدین به اسکریپت.
می‌تونید خیلی کوتاه در مورد این‌که چرا این سرویس رو برای ساخت وبلاگ انتخاب کردین، بگین؟

afrod · « **پاسخ #4 :** 31 تیر 1393، 04:36 ب‌ظ »

دنبال یک سرویس مینیمال می گشتم و به این مقاله اعتماد کردم: http://www.cmscritic.com/minimalist-blogging-platforms
با بلاگر مشکلات فیلی دارم و می خوام سایتم را به یک سرویس بدون مشکلات فیلی، مهاجرت بدم.

نقل‌قول از: Ma3x در 31 تیر 1393، 04:11 ب‌ظ

اگر از دراپ‌باکس به عنوان هاست استفاده می‌کنه، فایل css رو توی دراپ‌باکس آپلود کنید، بعد لینک مستقیمش رو بدین به اسکریپت.

از لینک های raw ی گیتهاب استفاده کردم:
https://github.com/odyseh/rtlbootstrap/raw/master/dist/css/rtlbootstrap.css
https://github.com/odyseh/rtlbootstrap/raw/master/dist/css/rtlbootstrap.min.css

ولی چیز عجیبی از کار در آمد: http://dorfa.postach.io/ در مقایسه با این http://postach.io/static/themes/apex/screenshot-large.png
فایرباگ div.header رو برای به راست بردن پنل سمت چپ پیدا میکنه اما در کد خبری از div.header نیست!
سورس تم به چه زبانی نوشته شده؟!

Ma3X · « **پاسخ #5 :** 31 تیر 1393، 05:31 ب‌ظ »

گزینه‌های بهتری هم برای ساخت وبلاگ پیدا می‌شه...

به نظر میاد این سرویس از یک تم انجین استفاده می‌کنه که سینتکسش تا جایی که من فهمیدم (کدی توی پست اول گذاشتین) شبیه به twig (برای PHP) و jinja (برای python) هستش.

انجمن‌های فارسی اوبونتو

نویسنده موضوع: RTL کردن یک قالب بوت-استرپ؟ (دفعات بازدید: 3468 بار)

afrod

RTL کردن یک قالب بوت-استرپ؟

Ma3X

پاسخ : RTL کردن یک قالب بوت-استرپ؟

afrod

پاسخ : RTL کردن یک قالب بوت-استرپ؟

Ma3X

پاسخ : RTL کردن یک قالب بوت-استرپ؟

afrod

پاسخ : RTL کردن یک قالب بوت-استرپ؟

Ma3X

پاسخ : RTL کردن یک قالب بوت-استرپ؟