Jump to content


Photo

Styling the comments


  • Please log in to reply
13 replies to this topic

#1 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 11:03 AM

Hello! I'm considering buying the Platform Pro and I'm testing the Platform on my temp http://wms-3.z161221.infobox.ru site.

I would like to re-style the comments similarly I had in my previous theme so I have all the css for that. I have installed the Custom CSS plugin and started to edit the child style.css.

So I have added by custom css in /plugin/pagelines-customize/style.css and also added my custom comments function into the function.php in the same directory. I have also modified the /platform/comments.php replacing the line

 <?php wp_list_comments(array('avatar_size' => 45)); ?>

with

 <?php wp_list_comments(array('callback=custom_comment','avatar_size' => 45)); ?>

(I', not sure if the last line is correct).

So my last step in my previous theme would be to connect the comments.php with the pages I want the comments on, i.e. add

 comments_template();

to my single.php. But as I understand Platform is a framework and editing code like this is not suggested. Where should I do those changes then?

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 February 2012 - 01:19 PM

Hi, When I go to visit your website, all I see is a blank white page, would it be possible for you to resolve this so we can see how you want your comments to look please.

#3 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 02:48 PM

Sorry for that, I think I have fixed that (at list I can see it from two different independend internet lines). Could you please check again. Maybe just refresh (F5 button) will help. But http://wms-3.z161221.infobox.ru/ it is the Platform site itself where I want to implement the new style.

If you would like to see the samples of the comments I'm trying to make make please visit my another site http://vscotch.ru/archives/372 with four test comments at the buttom. That's what I would like to try to implement on the first site and I have all the code snippets for that including changes of screen.css.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 February 2012 - 04:38 PM

Please try adding this CSS:

 div.comment-author {background-color: #cccccc; border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; -moz-border-radius-topright: 6px;}
	div.comment-body {border: 1px solid #cccccc;}

By the way, when I visited both links the first time I get a blank page with two random characters. I had to refresh both pages twice to get them to work.

#5 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 05:20 PM

Thank you for the code, I did that but the style of the comments didn't change, I guess we are missing something else too. GOt it on the blank pages, I will contact my hosting support to fix that.

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 February 2012 - 05:30 PM

Make sure to add the CSS to Custom Code > Custom CSS.

Try this instead:
 div#div-comment div.comment-author {background-color: #cccccc; border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; -moz-border-radius-topright: 6px;}
	div#div-comment div.comment-body {border: 1px solid #cccccc;}


#7 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 06:23 PM

Your previous code I was adding to /plugin/pagelines-customize/style.css. I do have Custom Code button in PageLines setting with only one text area: "Footerscripts Code or Analytics". Do I add this there? I've tried, nothing happened.

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 03 February 2012 - 06:35 PM

You placed it in the proper location. The free version does not have a Custom CSS area. Rather than trying to compare one site to another, could you tell us exactly what you want changed. PS the weird character/blank page issue still persists.

#9 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 06:48 PM

I actually need the following:

style.css:
 #comments {
	padding: 10px;
	border: 1px solid #dcdcdc;
	background: #f4f4f4;
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	}
	
	#avatar {
	float: left;
	margin: -10px 10px 5px 10px;
	border: 2px solid #999999;
	background: #f4f4f4;
	padding: 3px;
	z-index: 10;
	box-shadow: 3px 3px 15px -5px #666666;
	-moz-box-shadow: 3px 3px 15px -5px #666666;
	-webkit-box-shadow: 3px 3px 15px -5px #666666;
	}
	#commentmetadata {
	background: #cccccc;
	padding: 4px 0px;
	border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	}
	.currentcommentdate {
	color: #666666;
	font: 12px Comic Sans MS;
	float: right;
	text-align: right;
	margin: 0px 5px 2px 2px;
	}
	#comments a, #comments a:visited {
	color: #666666;
	text-align: center;
	font: 14px Comic Sans MS;
	text-decoration: none;
	}
	#comments a:hover, #comments a:active {
	color: #333333;
	text-decoration: none;
	}
	.authorlink {
	color: #666666;
	font: bold 14px Comic Sans MS;
	}
	.reply {
	color: #666666;
	font: 12px Comic Sans MS;
	text-align: right;
	margin: 0px 5px 2px 2px;
	}
	
	.leftviews {
	float: right;
	text-align: right;
	margin: 0px 5px 2px 2px;
	}
	.righttviews {
	float: right;
	text-align: right;
	margin: 0px 5px 2px 2px;
	}


comments.php:
 
	<ol class="commentlist">
	    <?php wp_list_comments('callback=custom_comment'); ?>
	</ol>


single.php:
 
	<?php comments_template(); ?>


functions.php:
 function custom_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID( ); ?>">
		<div id="comment-<?php comment_ID( ); ?>" class="vcard">
		<div id="avatar">
		<?php echo get_avatar( $comment->comment_author_email, 48 ); ?>
			</div>
			<div id="commentmetadata">
			<div class="currentcommentdate"><?php comment_date('d.m.Y') ?> ?? <?php comment_time() ?></div>
	
			<div class="authorlink">
			<?php printf(__('<cite class="fn">%s</cite> <span class="says"></span>'), get_comment_author_link()) ?>
				</div>
				</div>
	
	<?php if ($comment->comment_approved == '0') : ?>
		<span style="color: red;">?’?°?€ ???‚?·?‹?? ?±?????µ?‚ ???????±?»?????????°?? ???????»?µ ?????????µ?????? ?°?????????????‚???°?‚????????.</span>
	<?php endif; ?>
	<div id="comments">
		<div id="commentstext">
			<?php comment_text() ?>
		</div>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('reply_text' => '???‚???µ?‚???‚??', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
	
		</div>


But when I open your style.css it has a threataning statement of not changing anything there. When I open single.php there is nothing in it. So I started to understand - it's a framework and things are done differently here, so I'm trying to learn your way to go about this.

P.S. Yep, the blank pages and wird symbols seems to be a bug and I will get my hoster to fix that shortly.

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 February 2012 - 09:06 PM

Thank you for your interest in PageLines Framework. You should upgrade to the full version for CSS support. You can also try using our demos by creating a 30 day trial account at demo.pagelines.com with the full version. That would likely eliminate your blank pages and weird symbols problem.

#11 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 03 February 2012 - 09:18 PM

Ok, that could work and I'm not even askin CSS support for now but I definetly will be in future. But first I just want to make sure I can change CSS with the framework tools so I see I can use it. I need just a little example to changing slighlty something (no matter what) via the framework so I can see it actaully changed something on the site. So far I couldn't get any changes at all. Or that is impossible to change CSS with Platform Free, only by the direct coding?

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 February 2012 - 09:39 PM

Unfortunately we can't provide CSS support for the PageLines Lite (free) edition in the forums. Our support is limited for the demo but at least there you will have a full edition where you can craft and demonstrate your own CSS. Once you purchase the full product, the support is full.

#13 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 04 February 2012 - 07:16 PM

Ok, sounds like a plan. Thank you.

#14 vzhilov

vzhilov

    Member

  • Members
  • PipPip
  • 14 posts

Posted 04 February 2012 - 07:40 PM

Am... sorry, just last pre-sale question. I have chosen Platform just ocasionally but then coming to your I have found other templates based on your framework. I'm going to make a site with wordpress integration as a comunity of certain professionals with a store (your store or WP E-Commerce plugin) where electronic files of their interest will be sold. Would Platform Pro template be fine for me or you would suggest another your template for such a purpose?