Poprawa wyświetlania postów w wątkach

Założony przez  Zawistny.

30.01.2016, 11:15 (Ten post był ostatnio modyfikowany: 30.01.2016, 11:25 przez Zawistny.)
#1
Wersja skryptu MyBB: 1.8
Adres forum: rh.xaa.pl
Na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
1) Jak wycentrować to szare tło? (albo przynajmniej dostosować żeby odstępy zaznaczone zielonym na screenie były mniej więcej równe) (http://scr.hu/7xit/pcwug). Próbowałem wycentrować to na różne sposoby ale wyśrodkowywało mi nie zważając na ten prostokąt z danymi użytkownika po lewej stronie :/

2) Jak dodać dzióbek po lewej stronie tego tła żeby wyglądało to jak w dymku? (podobnie jak na shoutboxie) (http://scr.hu/7xit/816as)

3) I jak dodać w tym miejscu (http://scr.hu/7xit/6p0lr) zwykły .thead z nazwą wątku zamiast tego nieestetycznego tekstu?  :confused:

Mniej więcej chciałbym żeby wyszło coś takiego: http://scr.hu/7xit/tc2wv (robione w paincie; dzióbek trochę nie wyszedł :d)
30.01.2016, 12:56 (Ten post był ostatnio modyfikowany: 30.01.2016, 12:57 przez musicpower.)
#2
1.
.post.classic .post_content {
    float: right;
    width: 76%;
    background: #1a1a1a;
    padding: 0 1% 5px 1%;
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

3. daj szablon showthread (Widok wątku - szablony)
Akcja "Dziękuję za pomoc"
30.01.2016, 14:50 (Ten post był ostatnio modyfikowany: 30.01.2016, 14:50 przez NiespecjalnieUzdolniony.)
#3
2. W shoutbox.css w #shoutbox .entry .avatar dodaj padding-right:5px;
i dodaj obrazek dzióbka w tle na podstawie tego http://www.w3schools.com/css/css_background.asp
Chyba nie masz jak czegoś z tego nie zrozumiesz to pytaj.
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
30.01.2016, 16:18 (Ten post był ostatnio modyfikowany: 30.01.2016, 16:22 przez Zawistny.)
#4
   width: 70%;
    background: #1a1a1a;
    padding: 0 1% 5px 1%;
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.1); 

Nie działa :/ Próbowałem dodać margin: 0 auto ale też nic z tego ._.

showthread:
<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    var quickdelete_confirm = "{$lang->quickdelete_confirm}";
    var quickrestore_confirm = "{$lang->quickrestore_confirm}";
    var allowEditReason = "{$mybb->settings['alloweditreason']}";
    lang.save_changes = "{$lang->save_changes}";
    lang.cancel_edit = "{$lang->cancel_edit}";
    lang.quick_edit_update_error = "{$lang->quick_edit_update_error}";
    lang.quick_reply_post_error = "{$lang->quick_reply_post_error}";
    lang.quick_delete_error = "{$lang->quick_delete_error}";
    lang.quick_delete_success = "{$lang->quick_delete_success}";
    lang.quick_delete_thread_success = "{$lang->quick_delete_thread_success}";
    lang.quick_restore_error = "{$lang->quick_restore_error}";
    lang.quick_restore_success = "{$lang->quick_restore_success}";
    lang.editreason = "{$lang->postbit_editreason}";
// -->
</script>
<!-- jeditable (jquery) -->
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>
<script src="{$mybb->asset_url}/jscripts/jeditable/jeditable.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/thread.js?ver=1800"></script>
</head>
<body>
    {$header}
    {$threadnotesbox}
    {$pollbox}
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
        <tr>
            <td class="ccgtheadpost">
                <div class="ccgtheadpostoptions float_right">
                  <span class="responsivehide">{$ratethread}</span><br />
                  <div style="margin-top:20px;">
                    <span class="smalltext"><strong><a href="javascript:;" id="thread_modes" class="button" title="{$lang->thread_modes}"><i class="fa fa-list-alt" style="line-height: 25px;"></i></a>{$threadnoteslink}</strong></span>
                    <span>{$newreply}</span></div>
                </div>
              <div class="ccgtheadpostleft">
                <div class="ccgtheadposttitle">
                    {$thread['threadprefix']}{$thread['subject']}
                </div><br />
<div class="float_left" style="margin-top: 10px;">{$multipage}</div>
              </div>
            </td>
        </tr>
<tr><td id="posts_container">
    <div id="posts">
        {$posts}
    </div>
</td></tr>
        <tr>
            <td class="tfoot">
                {$search_thread}
                <div class="sticon">
                    <strong><a href="{$next_oldest_link}" title="{$lang->next_oldest}"><i class="fa fa-chevron-left"></i></a>  <a href="{$next_newest_link}" title="{$lang->next_newest}"><i class="fa fa-chevron-right"></i></a></strong>
                </div>
            </td>
        </tr>
    </table>
    <div class="float_left">
        {$multipage}
    </div>
    <div style="padding-top: 4px;" class="float_right">
        {$newreply}
    </div>
    <br class="clear" />
    {$quickreply}
    {$threadexbox}
    {$similarthreads}
    <br />
    <div class="float_left">
        <ul class="thread_tools">
            <li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
            {$sendthread}
            <li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
            {$addpoll}
        </ul>
    </div>

    <div class="float_right" style="text-align: right;">
        {$moderationoptions}
        {$forumjump}
    </div>
    <br class="clear" />
    {$usersbrowsing}
    {$footer}
    <div id="thread_modes_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->linear}</a></div><div class="popup_item_container"><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->threaded}</a></div></div>
    <script type="text/javascript">
    // <!--
        if(use_xmlhttprequest == "1")
        {
            $("#thread_modes").popupMenu();
        }
    // -->
    </script>
    <script type="text/javascript">
        $(".author_avatar img").error(function () {
            $(this).unbind("error").closest('.author_avatar').remove();
        });
    </script>
</body>
</html> 
30.01.2016, 17:40
#5
A co konkretnie nie działa?
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
30.01.2016, 17:45
#6
Chciałbym żeby to szare tło było wyśrodkowane: https://scr.hu/7xit/pcwug
30.01.2016, 17:58 (Ten post był ostatnio modyfikowany: 30.01.2016, 18:01 przez NiespecjalnieUzdolniony.)
#7
margin tutaj odpada bo przy małych ekranach będą cyrki.
Pierwsze co mi przychodzi do głowy to cały ten fragment do kolejnego diva dać i ten dopiero wyśrodkować.
Drugie to ustawić paddingi dla elementów w środku i dać im kolor tła a ten element wyśrodkować.
Może ktoś ma lepszy pomysł?

Choć z tego ss'a bardziej wygląda że chcesz przykleić ten tekst do prawej.
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
04.02.2016, 18:13
#8
Nie bardzo rozumiem
(a tak swoją drogą odświeżam)
04.02.2016, 19:57
#9
Ja bym zrobił to tak:
z .post.classic .post_author usunął bym max-width: 200px; i dodał box-sizing:border-box; oraz poszerzył z width:15% na 17%
w .post.classic .post_content dodałbym box-sizing:border-box; , zmienił width: z 70% na 75% i margin-left: ustawiłbym na 3%
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
04.02.2016, 20:31
#10
Działa. Teraz pytanie jak "wsunąć" dzióbek do prawej? http://scr.hu/7xit/49wha

dzióbek:
.postbit_two {
    width: 1.7%;
    height: 25px;
    position: relative;
    float: left;
    top: 15px;
    box-sizing: border-box;
}

.postbit_two:after, .postbit_two:before {
      content: '';
      display: block;
      position: absolute;
      left: 100%;
      width: 0;
      height: 0;
      border-style: solid;
}

.postbit_two:after {
    width: 0;
    height: 0;
      left: 3px;
    border-style: solid;
    border-width: 12.5px 15px 12.5px 0;
    border-color: transparent #151515 transparent transparent;
}

.postbit_two:before {
    width: 0;
    height: 0;
      left: 1px;
    border-style: solid;
    border-width: 12.5px 15px 12.5px 0;
    border-color: transparent #1D1D1D transparent transparent;
} 

postbit_classic:
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author scaleimages">
    <div class="pbclassicusername">
        <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}
    </div>
    {$post['useravatar']}
    <div class="author_information">
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}{$post['ougc_awards']}
    </div>
</div>

      <div class="postbit_two">      <----------------------- to jest "dzióbek" 
      </div>

<div class="post_content">
    <div class="post_head">
        {$post['posturl']}
        {$post['icon']}
        <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
    {$post['subject_extra']}
    </div>
    <div class="post_body scaleimages" id="pid_{$post['pid']}">
        {$post['message']}
    </div>
    {$post['attachments']}
    {$post['signature']}
    <div class="post_meta" id="post_meta_{$post['pid']}">
        {$post['iplogged']}
    </div>
</div>
<div class="post_controls">
    <div class="postbit_buttons author_buttons float_left">
        {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    </div>
    <div class="postbit_buttons post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
    </div>
</div>
</div> 
04.02.2016, 23:26 (Ten post był ostatnio modyfikowany: 04.02.2016, 23:28 przez NiespecjalnieUzdolniony.)
#11
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author scaleimages">
   <div class="pbclassicusername">
       <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}
   </div>
   {$post['useravatar']}
   <div class="author_information">
           <span class="smalltext">
               {$post['usertitle']}<br />
               {$post['groupimage']}
           </span>
   </div>
   <div class="author_statistics">
       {$post['user_details']}{$post['ougc_awards']}
   </div>
</div>

<div class="post_content">
<div class="postbit_two">      <!--zmienione-->
     </div>
   <div class="post_head">
       {$post['posturl']}
       {$post['icon']}
       <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
   {$post['subject_extra']}
   </div>
   <div class="post_body scaleimages" id="pid_{$post['pid']}">
       {$post['message']}
   </div>
   {$post['attachments']}
   {$post['signature']}
   <div class="post_meta" id="post_meta_{$post['pid']}">
       {$post['iplogged']}
   </div>
</div>
<div class="post_controls">
   <div class="postbit_buttons author_buttons float_left">
       {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
   </div>
   <div class="postbit_buttons post_management_buttons float_right">
       {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
   </div>
</div>
</div>
.postbit_two {
   width: 1.7%;
   height: 25px;
   position: absolute;/*zmienione*/
   float: left;
   top: 20px;
   box-sizing: border-box;
   left:1.7%;/*zmienione*/
}

.postbit_two:after, .postbit_two:before {
     content: '';
     display: block;

a dla .post.classic .post_content margin-left: 2%
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.



Użytkownicy przeglądający ten wątek:

1 gości