Webboard

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)

Kod:
.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)

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.

Kod PHP:
   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:

Kod PHP:
<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> 

A co konkretnie nie działa?

Chciałbym żeby to szare tło było wyśrodkowane: https://scr.hu/7xit/pcwug

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.

Nie bardzo rozumiem
(a tak swoją drogą odświeżam)

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%

Działa. Teraz pytanie jak "wsunąć" dzióbek do prawej? http://scr.hu/7xit/49wha

dzióbek:

Kod PHP:
.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:

Kod PHP:
{$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> 

Kod:
{$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>

Kod:
.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%

Zawistny

musicpower

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony