Fancy Border on Table - Support | Kriesi.at

Tagged: black, border

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
April 8, 2022 at 3:20 pm #1347724

daves1997
Participant

How do I place a black border around entire table with a “squigly” on top?

April 8, 2022 at 6:04 pm #1347739

Rikard
Keymaster

Hey daves1997,

Could you post a link to where we can see the table in question please? Also, I’m not sure what a squigly is?

Best regards,
Rikard

April 8, 2022 at 10:16 pm #1347751

daves1997
Participant

Just an enfold table. Not published anywhere. Squigly. = Anything on top of the table to make it look fancier that a plain black line.

April 9, 2022 at 9:37 pm #1347821
Mike
Moderator
Hi,
How about a double blue line on top:
```
#main .avia-data-table {
border-top: 6px blue double;
border-left: 3px black solid;
border-right: 3px black solid;
border-bottom: 3px black solid;
}
```
See more border options here.

Best regards,
Mike
April 9, 2022 at 10:45 pm #1347826

daves1997
Participant

Sorry Didn’t do anything.
tks

April 9, 2022 at 11:03 pm #1347828

Mike
Moderator

Hi,
Please link to your page so we can examine, as you see from my screenshot this worked for the standard data table.

Best regards,
Mike

April 9, 2022 at 11:24 pm #1347829

daves1997
Participant

April 10, 2022 at 1:54 am #1347830

Mike
Moderator

Hi,
Thanks for the screenshot but I need to examine the source code, please link to the page.
Do you want the border around the group or around each of the 3 columns?

Best regards,
Mike

April 10, 2022 at 1:41 pm #1347844

daves1997
Participant

.pricing-table>li:nth-child(even) {
background-color: #f0fff0 !important;
}
.pricing-table>li:nth-child(odd):not(.avia-heading-row) {
background-color: #ccffff !important;
}
.avia-table.avia-data-table.avia-table-5 td{
color:#000!important;
line-height: 1.3;
}
#main .avia-data-table {
border-top: 18px blue double;
border-left: 3px black solid;
border-right: 3px black solid;
border-bottom: 3px black solid;
}

April 10, 2022 at 1:52 pm #1347845

Mike
Moderator

Hi,
Thanks, I see that you were using the pricing table and my example was for the data table, try this css:
#main .avia_pricing_default {
border-top: 18px blue double;
border-left: 3px black solid;
border-right: 3px black solid;
border-bottom: 3px black solid;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

April 10, 2022 at 2:06 pm #1347846

daves1997
Participant

Still not working. All cache cleared including cloudflare.

/* font size */
.pricing-table>li {
font-size: 14px;
color: #000000 !important;
background: #f2f2f0!important;
}

.pricing-table>li:nth-child(even) {
background-color: #f0fff0 !important;
}
.pricing-table>li:nth-child(odd):not(.avia-heading-row) {
background-color: #ccffff !important;
}
.avia-table.avia-pricing-table.avia-table-5 td{
color:#000!important;
line-height: 1.3;
}
#main .avia_pricing_default {
border-top: 18px blue double;
border-left: 3px black solid;
border-right: 3px black solid;
border-bottom: 3px black solid;
}

April 10, 2022 at 2:33 pm #1347848

Mike
Moderator

Hi,
The css works when I inject it into your page, so it is correct:

you have a console error from your “rocket-loader”

Try disabling your caching plugin completely and check again,
or try adding the css in the WordPress ▸ Customize ▸ Additional CSS field.

Best regards,
Mike

April 10, 2022 at 2:42 pm #1347849

daves1997
Participant

I would have never thought of deactivating cache plugin. Reactivated and works fine. Thanks, Dave

April 10, 2022 at 2:47 pm #1347850

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts