Add border around text

anybabycan1 · Member · Oct 28, 2015 at 7:12 pm
Copy link

Add topic to favorites
Hi! I’m trying to figure out if I can add a border around text to overtly signal to our users that the function is clickable. The post in question is: http://anybabycan.org/2015/10/22/join-the-angel-society/

I’d specifically like to put a small border around the text “View photos from the event.”

I appreciate any support you can provide.

Thank you!

Mary

The blog I need help with is: (visible only to logged in users)
pcosta88 · Member · Oct 28, 2015 at 9:16 pm
Copy link
Howdy,

You might be able to add a border around the text by using the html table properties. Something like this would border it.
```
<table border="1">
<tbody>
<tr>
<td> YOUR TEXT HERE </td>
</tr>
</tbody>
</table>
```
Though you may run into trouble as from my testing it appears WordPress strips out some code for security purposes. Suggesting to be able to edit the table completely might require a WordPress Premium.

See also
https://en.support.wordpress.com/custom-css/

WordPress.com Premium [Redirects to Plans]
ehtis · Staff · Oct 28, 2015 at 9:22 pm
Copy link
Hi Mary,

This code should do it. Add it under Customize > CSS:
```
.entry-content p:nth-child(4) {
    border: 2px solid blue;
    padding-left: 12px;
}
```
ehtis · Staff · Oct 28, 2015 at 9:24 pm
Copy link
Oops, it should be targeting that specific post so don’t use the above code. I’m going to limit it to that specific post only in the code below, use this one instead:
```
.postid-3496 .entry-content p:nth-child(4) {
    border: 2px solid blue;
    padding-left: 12px;
}
```
anybabycan1 · Member · Oct 29, 2015 at 6:54 pm
Copy link
Thank you so much! This is extremely helpful. I wonder if you can help me modify/understand how to modify two elements of this:

I’d like the box to stick muck closer to the text if possible, and not take up the entire line, and I’d also like it to appear the same blue as the link font.

I appreciate your help!

Best,

Mary
thesacredpath · Member · Oct 30, 2015 at 7:47 am
Copy link
Hi Mary, we can add a border just to View photos. First off, open that page in the editor, switch to the Text tab in the editor, find the HTML for that link and add class=”my-link” to it so it looks like this.
<a class="my-link" href="https://www.facebook.com/media/set/?set=a.10154256402088294.1073741860.101036303293&type=1&l=0f58562895" target="_blank">View photos</a>
Next, add the following to your custom CSS.
```
.my-link {
    border: 2px solid #1f3b84;
    padding: 4px;
    border-radius: 4px;
    margin-right: 3px;
}
```
Let us know how that works for you and if you want to make any further adjustments or changes.
ehtis · Staff · Oct 30, 2015 at 6:51 pm
Copy link
Can’t go wrong with what @thesacredpath suggested above, will work even if you change the paragraph position! I see the new border is now active.

No items found.