Wsparcie » Motywy » Rozsypany styl komentarzy gdzieś jest błąd

  • Rozwiązano Durus

    (@durus)


    Witam wszystkich,

    od wczoraj dłubię nad zmianą wyglądu formularza komentarzy i coś tam nawet udało mi się.

    Niestety, wszystko fajnie do momentu próby odpowiedzi na czyjś komentarz, wtedy wszystko się sypie. Po wielogodzinnych modyfikacjach nie jestem w stanie ustalić co jest nie tak.

    Testowy komentarz, żeby zobaczyć o co chodzi znajduje się tu:
    http://zkuchniwziete.pl/przepisy/salatki/salatka-arabska.html

    Może ktoś z bardziej obeznanych w css znajdzie błąd?

    Kod css odpowiedzialny za komentarze:

    /*-----------------------------------------------------------------------------------*/
    /*	7.	Comments
    /*-----------------------------------------------------------------------------------*/
    
    .respond-title {
      float: left;
      width:100%;
      font-weight:bold;
      color:#c81444;
      text-transform:uppercase;
      font-size:18px;
    }
    
    #respond-wrap {
      width: 480px;
      float: left;
      background: #EDEDED;
      margin: 10px auto;
      margin-left: 0;
      position: relative;
      border: 1px solid #C9C9C9;
      border-radius:10px;
      box-shadow: 5px 5px 5px #D8D8D8;
      padding: 20px;
    }
    
    #respond-wrap .comments-sidebar {
      padding-top: 30px;
    }
    
    #respond label{
      font-size: 12px;
    }
    
    #comment-wrap{float:left;
      border-top:dashed 1px #e8e8e8;
    }
    
    #comments {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 30px;
      margin-top: 50px;
      color:#7c7c7c;
      text-transform:uppercase;
    }
    
    .commentlist {
      margin: 10px 0 40px 0;
      padding: 0 0 0 0;
      list-style-type: none;
      width: 609px;
      float: left;
    }
    
    .comment{border-bottom: 1px solid #efefef;
      border-left: 1px solid #efefef;
      border-right: 1px solid #efefef;
      box-sizing:border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;}
    
    .page-template-template-full-width-php .commentlist { width: 100%; }
    
    .commentlist .line { display: none;
      background:transparent;
     }
    
    .commentlist li { float:left;
    
    }
    .commentlist li div { float:left;
      background:#efefef;
      width:561px;
      padding:24px 24px 24px 24px;
      position:relative;
    }
    
    .commentlist li li { border-bottom: none; }
    .commentlist li li div { float:left;
      background:transparent;
      width:530px!important;
    }
    
    .commentlist li li .line{float:left;
      display:block;
    	position: absolute;
      top:58px!important;
      left:0px!important;
    	width: 30px!important;
    	height: 1px!important;
    	border-bottom: 1px dashed #d5d3ce;
    	margin: 0 0 0 0px;
      padding:0!important;
      background:transparent;
    }
    
    .comment-body { float:left;
      width:100%;
      padding:0!important;
      margin-top:10px;
      color:#7c7c7c!important;
    
     }
    
    li li .comment-body { padding-left: 137px; }
    
    .commentlist ul {
    	border-left: 1px dashed #d5d3ce;
    	margin: 0px 0 0 30px;
    }
    .commentlist ul li{
    	border:none;
    }
    
    .comment-body p:last-child { margin: 0;}
    
    .commentlist ul ul{
    	margin: 45px 0 0 88px;
    	padding: 10px 0 0 0;
    }
    
    .commentlist li li { }
    .commentlist li li:last-child {	margin-bottom:0; }
    .commentlist li li li {	margin-top: 0; }
    
    .commentlist li #respond { padding: 40px 0 0 0px; }
    .commentlist li li #respond { padding: 40px 0 0 55px; }
    
    .pinglist {
    	margin: 20px 0 40px 30px;
    	list-style-type: decimal;
    }
    
    .respond-nonpublished-email span{color:#f00;}
    .allowed-tags code {background:transparent;}
    .comment {margin-bottom: 25px; }
    
    .comment-body ul,
    .comment-body ol,
    .comment-body dl { margin-left: 30px; }
    
    li .cancel-comment-reply { padding-bottom: 20px; }
    
    /* Comment form */
    #commentform {float:left; width: 100%; }
    
    #commentform label {float:left;
    	width: 65px;
      font-size: 18px;
      line-height: 19px;
      color: #7c7c7c;
    }
    #commentform label span {
      color: #F00;
    }
    
    #commentform input[type="text"] {
    	margin-left: 10px;
    	width: 200px;
      font-family: Roboto,sans-serif;
      line-height: 19px;
      padding:4px 7px 4px 7px;
      color: #7c7c7c;
      border: 1px solid #C9C9C9;
      border-radius:5px;
      background:#FFFFFF;
    }
    
    #commentform input[type="text"]:hover {
      border: 1px solid #C81444;
      transition: all 0.4s ease 0s;
    }
    
    #commentform textarea {
    	width: 440px;
    	height: 200px;
      resize: none;
      border: 1px solid #C9C9C9;
      border-radius:5px;
      background:#FFFFFF;
    }
    
    #commentform textarea:hover {
      border: 1px solid #C81444;
      transition: all 0.4s ease 0s;
    }
    
    #commentform span,
    .contactform small span { color: #F00; }
    
    #commentform small span.grey,
    .contactform small span.grey{
    	color: #999;
    	font-family: "Droid Serif", Georgia, Times, serif;
    	font-style: italic;
    }
    
    .children { float:left;list-style-type: none;
      position:relative;
     }
    .commentlist li li div.avatar-wrap {float:left;
      padding:0!important;
      width:66px!important;
    }
    .avatar-wrap {float:left;
      padding:0!important;
      width:66px!important;
    }
    .avatar {
    	position: relative;
    	z-index: 5;
    }
    
    li li .avatar {  }
    
    .comment-author .comment-meta a{
    	color: #acacac;
    	font-size: 18px;
    }
    
    .comment-meta a:hover { color: #5597b2; }
    
    .comment-reply-link{position:absolute;
      right:24px;
      bottom:5px;
      float:left;
      text-decoration:underline;
      color: #7c7c7c;
      z-index:88;
    }
    
    .fn {
    	float: left;
      font-size:18px;
    	font-weight: bold;
    	width:100%;
    	color: #7c7c7c;
      clear:right;
    }
    
    .comment-author {
    	padding:0 0 24px 24px!important;
      background:transparent!important;
      width:470px!important;
    }
    
    .commentlist li li div.comment-author {width: 440px!important; }
    
    .comment-author a{ color: #acacac; }
    .comment-author-admin { }
    
    .comment-author cite {
    	font-style: normal;
    }
    
    .says { display: none; }
    
    .nocomments {
    	text-align: center;
    	padding: 20px;
    }
    
    .comment-body ul {
    	list-style-type: disc;
    	border: none;
    	margin-bottom: 20px;
    }
    
    .comment-body ul li {
    	padding: 0;
    	margin: 0;
    }
    
    .comment-body ol { list-style-type: decimal; }
    
    .moderation {
    	padding-left: 45px;
    	color: red;
    	font-size: 11px;
    }
    
    .author-tag {}
    /* Submit comment style */
    button {
        height: 49px;
        cursor: pointer;
        margin: 0;
        float: right;
    }
    
    button span {}
    
    button.com_button {
      width: 148px;
      height: 44px;
      background:url('images/komentarz.png') no-repeat left bottom;
      text-decoration:none;
      text-indent:-99999;
      color:transparent;
      position: relative;
    border-radius:5px;
    }
    
    button.com_button:hover {
      width: 148px;
      height: 44px;
      background:url('images/komentarzh.png') no-repeat left bottom;
      text-decoration:none;
      text-indent:-99999;
      color:transparent;
      position: relative;
      transition: all 0.4s ease 0s;
    border-radius:5px;
    }
    
    button.com_button span.right {}
    
    button:hover.com_button span.left {}
    
    button:hover.com_button span.right {}

    Na wszelki wypadek fragment kodu php formularza:

    /*-----------------------------------------------------------------------------------*/
    /*	Comment Form
    /*-----------------------------------------------------------------------------------*/
    
    	if ( comments_open() ) : ?>
    
        <div id="respond-wrap">
    
    	     <div id="respond">
    
        	     <h3 class="respond-title"><?php comment_form_title( __('Zostaw komentarz', 'simple'), __('Zostaw komentarz do %s', 'simple') ); ?></h3>
               <?php if ( !is_user_logged_in() ) : ?>
               <?php endif; ?>
    		          <div class="cancel-comment-reply">
    			           <?php cancel_comment_reply_link(); ?>
    		          </div>
    
    		<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
    
        <p><?php printf(__('Musisz być %1$s zalogowany %2$s aby dodać komentarz.', 'simple'), '<a href="'.get_option('siteurl').'/wp-login.php?redirect_to='.urlencode(get_permalink()).'">', '</a>') ?></p>
    
        <?php else : //comment form  ?>
    
        <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    
    			<?php if ( is_user_logged_in() ) : ?>
    
    			<p><?php printf(__('Zalogowany jako %1$s. %2$s Wyloguj się &raquo;%3$s', 'simple'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>', '<a href="'.(function_exists('wp_logout_url') ? wp_logout_url(get_permalink()) : get_option('siteurl').'/wp-login.php?action=logout" title="').'" title="'.__('Wyloguj się z tego konta', 'simple').'">', '</a>') ?></p>
    
    			<?php else : ?>
    
    			<p>
          <input type="text" name="author" id="author" placeholder="Imię (wymagane)" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" />
    			</p>
    
    			<p>
          <input type="text" name="email" id="email" placeholder="E-mail (wymagane)" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" />
    			</p>
    
    			<p>
          <input type="text" name="url" id="url" placeholder="Link do strony/ bloga" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
    			</p>
    
    			<?php endif; ?>
    
    			<p>
          <textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"placeholder="Treść komentarza"></textarea>
          </p>
    
    			<p>
    	  <input type="checkbox" value="checked" checked="checked" disabled="disabled" name="polityk" /><small>Akceptuję <a href="http://www.zkuchniwziete.pl/Regulamin">regulamin</a> oraz <a href="http://www.zkuchniwziete.pl/Polityka-prywatnosci">politykę prywatności</a>.</small>
    			</p>
    
    			<p>
                	<button class="com_button" type="submit" name="submit">
                        <?php _e('Dodaj komentarz', 'simple'); ?>
                    </button>
    				<?php comment_id_fields(); ?>
    			</p>
    			<?php do_action('comment_form', $post->ID); ?>
    
    		</form>
    
    	<?php endif; // If registration required and not logged in ?>
    	</div>
    	</div>
    	<?php endif; // ?>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator amistad18

    (@amistad18)

    Pokombinuj z .commentlist li #respond, dokładniej z szerokością i paddingami.

    Thread Starter Durus

    (@durus)

    Dzięki za odpowiedź i wszystkim za zainteresowanie.
    Właśnie wszedłem zamknąć temat i napisać, że już znalazłem błąd 🙂

    Po kilku godzinach przerwy podszedłem do tematu jeszcze raz i od nowa ostylowałem formularz komentarza krok po kroku.

    Za pierwszym razem nadałem styl tła dla #respond-wrap i to był błąd.

    Należy ostylować: #commentform.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Temat ‘Rozsypany styl komentarzy gdzieś jest błąd’ jest zamknięty na nowe odpowiedzi.