Style Comments

Developer
JR Jenkins
Size
3,229 Kb
Views
28,336
  1. Style Comments Previews
  2. Style Comments HTML Codes
  3. Style Comments CSS Codes

How do I make an style comments?

Styling comments placed using Panopoly's add page content widget for placing comments . What is a style comments? How do you make a style comments? This script and codes were developed by JR Jenkins on 04 October 2022, Tuesday.

Style Comments Previews
IQ Test

Style Comments - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Style Comments</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="panel-pane pane-node-comments"> <h2 class="pane-title">Comments</h2> <div class="pane-content"> <a id="comment-1"></a> <div class="comment comment-by-viewer clearfix"> <h3><a href="/comment/1#comment-1" class="permalink" rel="bookmark">Cool Site</a></h3> <div class="submitted"> <a href="/comment/1#comment-1" class="permalink" rel="bookmark">Permalink</a> Submitted by <span class="username">jtest</span> on December 11, 2013 - 9:47am</div> <div class="content"> <div class="field field-name-comment-body field-type-text-long field-label-hidden"> <div class="field-items"> <div class="field-item even">This is a cool site [test comment]</div> </div> </div> </div> <ul class="links inline"> <li class="comment-reply first last"><a href="/comment/reply/2/1">reply</a> </li> </ul> </div> <div class="indented"> <a id="comment-2"></a> <div class="comment comment-by-viewer clearfix"> <h3><a href="/comment/2#comment-2" class="permalink" rel="bookmark">Thanks!</a></h3> <div class="submitted"> <a href="/comment/2#comment-2" class="permalink" rel="bookmark">Permalink</a> Submitted by <span class="username">jtest</span> on December 11, 2013 - 9:51am</div> <div class="content"> <div class="field field-name-comment-body field-type-text-long field-label-hidden"> <div class="field-items"> <div class="field-item even">appreciate the comment</div> </div> </div> </div> <ul class="links inline"> <li class="comment-reply first last"><a href="/comment/reply/2/2">reply</a> </li> </ul> </div> </div> <!-- --> <div class="indented"><div class="indented"> <a id="comment-2"></a> <div class="comment comment-by-viewer clearfix"> <h3><a href="/comment/2#comment-2" class="permalink" rel="bookmark">Your Welcome</a></h3> <div class="submitted"> <a href="/comment/2#comment-2" class="permalink" rel="bookmark">Permalink</a> Submitted by <span class="username">jtest</span> on December 11, 2013 - 9:51am</div> <div class="content"> <div class="field field-name-comment-body field-type-text-long field-label-hidden"> <div class="field-items"> <div class="field-item even">Cardigan ugh commodo fanny pack, velit flannel flexitarian accusamus mixtape distillery. Aute single-origin coffee church-key, Cosby sweater Williamsburg master cleanse hoodie seitan Wes Anderson 90's. Wes Anderson letterpress sartorial, pour-over proident Helvetica direct trade flannel scenester. Keytar viral nesciunt vegan pariatur. Organic Pitchfork Tumblr photo booth High Life pop-up. Jean shorts kitsch squid flannel, cliche ad single-origin coffee Cosby sweater commodo fingerstache artisan. Brooklyn pop-up authentic pickled aliquip irony PBR placeat art party 3 wolf moon sapiente seitan.</div> </div> </div> </div> <ul class="links inline"> <li class="comment-reply first last"><a href="/comment/reply/2/2">reply</a> </li> </ul> </div> </div> </div> <div class="indented"><div class="indented"><div class="indented"> <a id="comment-2"></a> <div class="comment comment-by-viewer clearfix"> <h3><a href="/comment/2#comment-2" class="permalink" rel="bookmark">No Seriously</a></h3> <div class="submitted"> <a href="/comment/2#comment-2" class="permalink" rel="bookmark">Permalink</a> Submitted by <span class="username">jtest</span> on December 11, 2013 - 9:51am</div> <div class="content"> <div class="field field-name-comment-body field-type-text-long field-label-hidden"> <div class="field-items"> <div class="field-item even">appreciate the comment</div> </div> </div> </div> <ul class="links inline"> <li class="comment-reply first last"><a href="/comment/reply/2/2">reply</a> </li> </ul> </div> </div> </div> </div> <a id="comment-3"></a> <div class="comment comment-by-viewer clearfix"> <h3><a href="/comment/3#comment-3" class="permalink" rel="bookmark">Another Comment</a></h3> <div class="submitted"> <a href="/comment/3#comment-3" class="permalink" rel="bookmark">Permalink</a> Submitted by <span class="username">jtest</span> on December 11, 2013 - 9:51am</div> <div class="content"> <div class="field field-name-comment-body field-type-text-long field-label-hidden"> <div class="field-items"> <div class="field-item even">I am a different person, and I agree. cool site</div> </div> </div> </div> <ul class="links inline"> <li class="comment-reply first last"><a href="/comment/reply/2/3">reply</a> </li> </ul> </div> </div>
</div>
</body>
</html>

Style Comments - Script Codes CSS Codes

div.indented { margin-left: 2em;
}
div.submitted { display: none;
}
ul.links.inline { display: none;
}
div.panel-pane.pane-node-comments { width: 500px;
}
div.comment.comment-by-viewer.clearfix:nth-child(even) { background-color: lime; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 2em;
}
div.comment.comment-by-viewer.clearfix:nth-child(odd) { background-color: blue; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 2em;
}
/* div.comment.comment-by-viewer.clearfix { h3 { margin: 5px; } @include border-radius(15px); width: 100%; // margin: 5px; padding: 5px; &:nth-child(even) { background-color: rgba(0, 255, 0, 0.25); } &:nth-child(odd) { background-color: rgba(0, 0, 255, 0.25); } }
//} */
Style Comments - Script Codes
Style Comments - Script Codes
Home Page Home
Developer JR Jenkins
Username jrjenk
Uploaded October 04, 2022
Rating 3
Size 3,229 Kb
Views 28,336
Do you need developer help for Style Comments?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

JR Jenkins (jrjenk) Script Codes
Name
Reminder about Geolocation
Konami Code example
BARcade Project Demo
COA Color Swatches
UAC Decode Online
Working around OS X Dynamic Scrollbars
A Pen by JR Jenkins
Simple jQuery Accordion Example
CSS Slide Show
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!