How to create children and author styling in Genesis Sample theme?

[johnmclives]

Hi guys, I've really ran into a wall here.

I'm using Genesis Sample Theme here, and I'm trying to recreate the effect of a border line like the screenshot, but i'm a complete idiot thus far.

https://www.dropbox.com/s/9idnsk6tv2tqs75/Screen%20Shot%202016-08-31%20at%202.46.57%20AM.png?dl=0

Please teach me how to create the 2 faint lines below too!

For your info, the comments css thus far have been added below:

Please help, thanks!

/* ## Comments
--------------------------------------------- */

.comment-respond,
.entry-comments,
.entry-pings {
background-color: #fff;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 40px;
}

.comment-respond,
.entry-pings {
padding: 60px 60px 32px;
}

.entry-comments {
padding: 60px;
}

.comment-list li {
padding: 40px 0 0 30px;

}

.comment-list .depth-1 {
padding-left: 0;

}

ol.comment-list {

font-size: 14px;
line-height: 1.714285714286em;
color: #707378;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

}

.comment-header {
margin-bottom: 30px;
}

.comment-content {
clear: both;
}

.comment-content ul > li {
list-style-type: disc;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}

.comment-respond label {
display: block;
margin-right: 12px;
}

.comment-header p {
margin-bottom: 0;
}

.entry-pings .reply {
display: none;
}

li .bypostauthor {
border-color: #E8E8E8;
}

[Ginger]

Hi there,

The best way to figure out how your example screen shot is styled is to see the CSS behind it with Inspect Element. By that I mean put your pointer over one of the borders, right+click and select Inspect or Inspect Element to see how it is styled. A tutorial on this is here and it includes a video:

https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

You can create the top and bottom lines by adding a border to the comment-header section in your style.css file. Use something like

border-top: 1px solid #e6e6e6;

That is saying you want the border line to be 1px wide, solid (vs dotted) and use the color of #e6e6e6m which is a very faint gray. Of course you can change any of that you like. I do not know offhand how to get the orange vertical - again it would most likely be a border, in this case border-left, but I am not certain what element to use. It really would be worth your time viewing the video above to learn some CSS basics vs someone giving you the full CSS to copy and paste.

Hope that helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Author]

Posts