Add border around boxes

COwebmaster
COwebmaster used Ask the Experts™
on
Hi there. I need to place a solid blue border around the 3 boxes on this page... https://ccdenver.org/

Any ideas experts?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
HainKurtSr. System Analyst

Commented:
which boxes?

.uabb-imgicon-wrap .uabb-image-content {
...
    border: 3px solid black;
}

Open in new window


is this what you want?
HainKurtSr. System Analyst

Commented:
or this

.infobox-icon-above-title .uabb-infobox-left-right-wrap, .infobox-icon-below-title .uabb-infobox-left-right-wrap, .infobox-photo-above-title .uabb-infobox-left-right-wrap, .infobox-photo-below-title .uabb-infobox-left-right-wrap {
...
    border: 3px solid gray;
}

Open in new window


css is this one
https://ccdenver.org/wp-content/uploads/bb-plugin/cache/4687-layout.css?ver=35fc8a7e63c5b78ba7b1111f7864f31a

Author

Commented:
The 3 boxes under Get Involved is what I was referring to.
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Looks like the bottom one is what I need although the bottom border cuts off at the bottom of the button and not the entire white box.
Sr. System Analyst
Commented:
add these 2 lines to that css item:

.infobox-icon-above-title .uabb-infobox-left-right-wrap, .infobox-icon-below-title .uabb-infobox-left-right-wrap, .infobox-photo-above-title .uabb-infobox-left-right-wrap, .infobox-photo-below-title .uabb-infobox-left-right-wrap {
...
    border: 3px solid gray;
    padding-bottom: 20px;
}

Open in new window


+

and remove 20px padding from here

.uabb-infobox {
    background: #ffffff;
    /* padding-bottom: 20px; */
}

Open in new window

HainKurtSr. System Analyst

Commented:
after above changes, it should look like belowScreenshot---27_10_2017---2_38_20-PM.png

Author

Commented:
Thanks!

Author

Commented:
Yep, looks great!
HainKurtSr. System Analyst

Commented:
adding this

.fl-photo-content img {
...
    border: 2px dotted teal;
    border-radius: 50%;
    padding: 3px;
    background-color: white;
}

Open in new window


makes your image links look like

 Screenshot---27_10_2017---3_08_43-PM.png
but last image is tiny compared to others, make sure thay are all same and box (width=height)

Author

Commented:
Thanks for that script! How do I prevent the monthly giving round buttons from that same styling?  https://ccdenver.org/

Author

Commented:
Nvm, I figured it out, thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial