Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1352621

    Liebes Enfold-Team,

    ich hoffe, ich bin hier richtig für mein Anliegen.
    ich habe eine einfache avia-Tabelle und möchte sie via css formatieren:

    .avia-data-table .column-1 {
    text-align: left !important;
    background-color: white;
    border: 0;
    font-weight: bold;
    color: #008dca;
    width: 200px !important;
    }

    .avia-data-table .column-2 {
    text-align: left !important;
    background-color: white;
    border: 0;
    color: black;
    }

    Ich habe diesen Code in Quick-css, in der style.css und via code-block <style> direkt auf der Seite probiert. Leider kein Effekt.
    Zum Test habe ich mit Tablepress eine Tabelle darunter erstellt. Damit funktioniert es. Ich würde es jedoch lieber mit der avia-Tabelle umsetzen.

    Zur Info: ich habe ein Manged WordPress bei ionos und zur Sicherheit das enfold-child-Theme installiert.

    Herzlichen Dank für Ihre Hilfe.

    viele Grüße von Markus

    #1352719

    Hey maggoono,

    Thank you for the inquiry.

    Are you trying adjust the style of the first and second columns? Where can we see the table? Please provide the site URL in the private field so that we can check the element directly. A screenshot of the changes that you would like to implement will also help.

    Best regards,
    Ismael

    #1352732
    This reply has been marked as private.
    #1352793

    Hi,
    Thank you for the link to your site with the example, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    .main_color table.avia-data-table {
    	background-color: #fff;
    }
    .main_color table.avia-data-table td {
    	border: none;
    }
    #main .main_color table.avia-data-table td:nth-child(1) {
    	color: rgb(0, 141, 202);
    	font-weight: bold;
    }
    #main .main_color table.avia-data-table td:nth-child(2) {
    	color: #000;
    	font-weight: bold;
    }

    After applying the css, please clear your browser cache and check.
    This css will affect all tables on your site, so I recommend adding a custom class to your table element and including it in the css so you can control which tables will get this style.

    Best regards,
    Mike

    #1352927

    Hi Mike,

    I don’t get the class thing, but it is working. Thank you.

    Additionally I want to shrink the height of the main manu. Do I have to open a new topic?

    regards,
    Markus

    #1352939

    Hi,
    Glad to hear this is working for you, if you choose to add a custom class you would add it in the table element developer settings:
    2022-05-25_001.jpg
    in this example the custom class is custom-table note that no dot is used, then you would add the custom class to the css like this:

    .main_color table.custom-table {
    	background-color: #fff;
    }
    .main_color table.custom-table td {
    	border: none;
    }
    #main .main_color table.custom-table td:nth-child(1) {
    	color: rgb(0, 141, 202);
    	font-weight: bold;
    }
    #main .main_color table.custom-table td:nth-child(2) {
    	color: #000;
    	font-weight: bold;
    }

    To make the menu smaller try this css:

    #top #header #header_main_alternate .container,
    .html_header_top.html_bottom_nav_header #top #header_main_alternate .main_menu>div, 
    .html_header_top.html_bottom_nav_header #top #header_main_alternate .main_menu ul:first-child,
    .html_header_top #top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a {
        height: 30px;
        line-height: 30px;
    }

    the current height is 50px, so this will make it 30px or adjust to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1353094

    Hi Mike,

    Thanks for the class example.
    I put the css concerning the menu height in advanced styling – quick css but nothing happend.
    Cache is cleared. Do you have another idea?

    Best,
    Markus

    #1353103

    and you realy entered the custom class in that input field without the dot !

    the custom class is custom-table note that no dot is used

    – as mike wrote above.
    Many of the users make this mistake. However, the entry is made in the field without the “class point”.

    #1353104

    For now, I leave the table. I didn’t try the class and work with the general table-style. That is fine so far.
    The css for reducing the height of the main menu don’t have any effect. Thanks.

    #1353137

    Hi,
    I see that your css is not correct, the > are showing as &gt; typically this occurs when the code is copied from an email instead of the fourm, please correct the css and clear your browser cache and check again.
    2022-05-27_001.jpg

    Best regards,
    Mike

    #1353168

    Hi Mike,

    you are right.
    It works.
    Thank you.

    Best,
    Markus

    #1353169

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Formatieren einer Tabelle avia-data-table via css’ is closed to new replies.