Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 7, 2022 at 1:34 pm #1339353
    markus-fischer

    Hello Team,

    I would like to create a table like this on my Contact page:
    Screen Shot 2022 02 07 at 1.32.02 PM

    Which element is best suited for this, what do you recommend?

    FYI: I don’t want to use icons for the social media images on the left – I have own 36x36px custom images that I would like to use.

    Thank you in advance!

    February 7, 2022 at 10:17 pm #1339464
    markus-fischer

    Hi @guenni007 hi @yigit,

    Do you have a recommendation for this as well by any chance? What kind of element would you suggest using to make it look like this?

    Thank you! :-)

    February 8, 2022 at 5:22 am #1339498
    Ismael

    Hi,

    Thank you for the inquiry.

    You can use the Table element from the builder and add the icon images directly in the table cells using html.

    Example:

    <img src="IMAGE URL HERE" class="av-table-img-icon">

    You can then use the av-table-img-icon class name to adjust the style of the icon.

    .av-table-img-icon {
   width: 36px;
   height: 36px;
   background: yellow;
}

    Best regards,
    Ismael

    February 8, 2022 at 9:58 am #1339549
    markus-fischer

    Hi @Ismael

    I cannot see any Content OR Media Element that is called “Table Element”. Where do I find it exactly?

    Thanks,

    February 8, 2022 at 9:59 am #1339550
    markus-fischer

    Found it – please ignore my last message. I may still have a follow up question on making it work.

    February 8, 2022 at 10:31 am #1339554
    markus-fischer

    Hi @Ismael,

    Perfect, the table works and I added the images and required links/texts. Now the only thing that’s left is to adjust the design/layout so it looks the same as table here: https://www.solveforhappy.com/connect/

    My open questions to achieve that layout/design:
    Please also see here: https://savvyify.com/img/image/fA7L

    1. How can I change the color of the headline row as well as the font color within the headline row?
    2. The images are currently showing very large. How can I ensure they show in the original size 64x64px?
    3. For the table only (not the rest of the website), I would like the links and texts to be displayed in color “#e50000ff”. How can I do that, do you possibly know the custom CSS for that?
    4. For the table grid, I would like to remove all the vertical lines. Could you share with me how to do that as well, please?

    Thank you so much in advance, really appreciate it!! :-)

    February 9, 2022 at 7:37 am #1339711
    Ismael

    Hi,

    Thank you for the update.

    Glad to know that the suggestions above are working. Where did you place the table? Please provide the page URL here so that we can inspect the table directly. You may need to apply a custom css class name or ID to the table element so that we can target or style it directly. The class name and ID field is in the Advanced > Developer Settings toggle.

    Best regards,
    Ismael

    February 9, 2022 at 12:20 pm #1339782
    markus-fischer

    Hi Ismael,

    Thank you in advance!

    Please find the link to where you find the table attached.

    I look forward to hearing from you,
    Markus

    February 11, 2022 at 8:17 am #1340079
    Ismael

    Hi,

    Thank you for the info.

    We cannot see any table in the page or in any pages in the site. Did you remove the element? To change the color of the first row, edit the table element, look for the first row, then set the row layout from “Default Row” to “Heading Row”. You can also use this css code to adjust the color of the heading and cell font.

    .main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even), #top .main_color .avia-data-table.avia_pricing_minimal td, .main_color tr:nth-child(even), .main_color .avia-data-table .avia-heading-row .avia-desc-col, .main_color .avia-data-table .avia-highlight-col, .main_color .pricing-table>li:nth-child(even), body .main_color .pricing-table.avia-desc-col li, #top .main_color .avia-data-table.avia_pricing_minimal th, .main_color .avia-table {
    color: #e50000ff;
}

.main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-heading-row .pricing-extra {
    background-color: yellow;
    color: #ffffff;
    border-color: transparent;
}

    To remove the borders, set the Styling > Table Design settings to Minimal.

    Best regards,
    Ismael

    February 12, 2022 at 3:43 pm #1340273
    markus-fischer

    Hi @Ismael,

    Apologies, I had briefly removed it to test another layout. I have it back in the page now if you’d like to check / inspect it.

    I applied the Quick CSS you shared, however it’s still far from the design / layout I’d like it to have:

    1. For instance, the background color has not changed despite the new Quick CSS code. How can I change the color of the headline row as well as the font color within the headline?
    2. The images / icons on the left are currently showing very large. How can I ensure they show in the original size 64x64px?
    3. For the table only (not the rest of the website), I would like the links and texts to be displayed in color “#e50000ff”. How can I do that, do you possibly know the custom CSS for that?
    4. For the table grid, I would like to remove all the vertical grid lines, HOWEVER KEEP the horizontal grid lines. Could you share with me how to do that as well, please?

    Thank you so much in advance, really appreciate it!! :-)

    February 13, 2022 at 8:09 am #1340345
    markus-fischer

    I moved the table until it is finalized to the page below. Thank you in advance, looking forward to hearing from you!

    February 14, 2022 at 12:30 am #1340423
    Mike

    Hi,
    Thank you for the link to your site and the screenshots, try this css:

    .main_color .avia-table .avia-heading-row {
    background: yellow;
    color: white;
}
.main_color .avia-table th:nth-child(-n+2),
.main_color .avia-table td:nth-child(-n+2) {
	border-right-width: 0;
}
.main_color .avia-table td {
	vertical-align: middle;
}
.main_color .avia-table a {
	color: #e50000;
}

    see the expected results screenshot below
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.