Page 1 of 1

AppGini CSS Quickie: smaller images on tab headers

Posted: 2019-06-03 14:02
by jsetzer
Hi,

for layout reasons I wanted to decrease the tab-icon size from 32px to 16px. This can be done by one line of CSS code. As you can see in the first screenshot, the tabs do not fit into one line which breaks the layout and leads to a worse usability.

Default size:
chrome_2019-06-03_15-50-53.png
chrome_2019-06-03_15-50-53.png (17.55 KiB) Viewed 2002 times

Just add the following line to your CSS-file* and reload the page:

Code: Select all

#children-tabs > ul > li > a > img { width: 16px; }
Smaller icons:
chrome_2019-06-03_15-52-03.png
chrome_2019-06-03_15-52-03.png (14.61 KiB) Viewed 2002 times

As you can see in the second screenshot, the tab-captions do not get wrapped any more. They fit into one line.

Kind Regards,
Jan

* for example place the following lines into your hooks/header-extras.php file:

Code: Select all

<style>
#children-tabs > ul > li > a > img { width: 16px; }
</style>