AppGini CSS Quickie: smaller images on tab headers

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 257
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

AppGini CSS Quickie: smaller images on tab headers

Post by jsetzer » 2019-06-03 14:02

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 372 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 372 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>

Post Reply