adding a line to mimic blog roll post separation

drsarahb · Member · May 6, 2015 at 5:17 pm
Copy link

Add topic to favorites
Hi, I’m making my Ask Dr Sarah page look like a blog roll with buttons to click through to other pages. Is there an easy way to add a faint line to separate each question, as there is on a blog roll, which will re-size depending on the screen a reader is using? The page is http://drsarahbrewer.com/ask/

Any tips on how to lose the border around the ‘continue reading’ buttons would also be gratefully received. Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 7, 2015 at 9:33 pm
Copy link
After your button at the bottom of each question section, switch to the Text tab in the browser and make a blank line below the button code at the bottom and add a Horizontal Rule with the following HTML
<hr />
If you wish to change the color of that rule, add the following CSS at Appearance > Customize > CSS and edit the background color.
```
hr {
    background-color: #e6e6e6;
}
```
drsarahb · Member · May 9, 2015 at 12:58 pm
Copy link
Many thanks, Happiness Engineer. Is there an easy way to lose the border around the ‘continue reading’ buttons in these posts, too?
thesacredpath · Member · May 9, 2015 at 9:59 pm
Copy link
Since those button are inserted linked images, and since the standard images in posts and pages have borders around them, we will have to use a little CSS trickery and target only images with an alt tag of Continue_reading.
```
.hentry img[alt="Continue_reading"] {
    border: none;
}
```
drsarahb · Member · May 10, 2015 at 2:07 pm
Copy link
Thanks so much. That has worked a treat. You are an absolute wizard – hope they pay you well!
thesacredpath · Member · May 10, 2015 at 3:14 pm
Copy link
Hooray, you are very welcome. Automattic/WordPress.com is an awesome place to work. I couldn’t have designed a better place to work. In other words, this Happiness Engineer is Happy! :)

No items found.