adding a border to a section

darrylcotton · Member · May 4, 2017 at 9:40 am
Copy link

Add topic to favorites
Hi
I’d like to add a border or frame around a section on my home page:
The border should include the jpeg under the heading BREAKING NEWS as well as the links below (MORE INFORMATION & I AM INTERESTED. )
Thanks

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · May 4, 2017 at 11:00 am
Copy link
Hello @darrylcotton,
Since your image and the links are not wrapped inside a common parent class we cannot apply border to them simultaneously.

So we have to add border’s separately like this:
i. border for the image(bottom border excluded):
```
.wp-image-4219 {
    border: 2px solid #3d3d3d;
    border-bottom: 0;
    padding: 25px 0;
}
```
ii. border for the links(top border excluded):
We have to first add a custom class to these links so that the border doesn’t apply to all the h5 tags.
<h5 class="bordered" style="text-align:center;">      <a href="https://meltoncapetown1.files.wordpress.com/2017/04/melton-within-borders-israel-seminar-sept-2017.pdf">More information</a>                       <a href="https://meltoncapetown.org/isrealseminarinterested/">I am interested</a></h5>
I added class=”bordered” to the above code, make sure you do this too by switching to the HTML tab on the post editor.

And then target this h5 tag and add the border using CSS:
```
.bordered {
    border: 2px solid #3d3d3d;
    border-top: 0;
}
```
If you do not want to add separate borders and want them to have a common border then just add a parent element to both(image and the links) with class bordered:
```
<div class="bordered">
    <p style="text-align:center;">
       /*contains image*/
    </p>

    <h5 style="text-align:center;">
       /*contains Links*/
    </h5>
</div>
```
And then use this CSS:
```
.bordered {
    border: 2px solid #3d3d3d;
}
```
Hope this helps 🙂

No items found.