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: 1807
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 1997 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 1997 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>
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply