Skip to content
View in the app

A better way to browse. Learn more.

Unraid

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS and Style.

Featured Replies

Are there any guides for plugins?

 

<style>
table.snapshot{margin-top:0;}

  

    table.snapshot thead tr>td{text-align:left;width:8%;}
    table.snapshot tr>td+td{text-align:center;}
    table.snapshot tr>td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td+td+td{text-align:left;}
    table.snapshot tr>td+td+td+td+td+td+td+td+td+td+td+td{text-align:center;}


</style>

 

how do I add zebre strip i.e. ntg-child for this table. Looks like this works.

 

//table.snapshot tr td:empty {  width: 50px; }
table.snapshot tr:nth-child(odd) { background-color: #FFF; }
  
//table.snapshot tr td {  padding-top: 10px;   padding-bottom: 10px; }
    table.snapshot thead tr>td{text-align:left;width:8%;}
    table.snapshot tr>td+td{text-align:center;}
    table.snapshot tr>td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td+td{text-align:center;}
    table.snapshot tr>td+td+td+td+td+td+td+td+td{text-align:left;}
    table.snapshot tr>td+td+td+td+td+td+td+td+td+td+td+td{text-align:center;}

Edited by SimonF

  • Author
18 hours ago, SimonF said:

table.snapshot tr:nth-child(odd) { background-color: #FFF; }

Can anyone advise where I should get the colour from based on Theme selected?

You're free to style a plugin any way you want so long as it doesn't interfere with the OS.  (ie: don't override any css for classes that might exist on the banner / menu bar etc)

 

You can get the current theme via <?$display['theme']?>, so if you're using custom colours outside of what the dynamix defaults are then you'd have to use custom CSS and conditionally select which colour to use.  As a (very extreme) example, you can look at CA's CSS (/usr/local/emhttp/plugins/community.applications/skins/Narrow/css.php)

 

Dynamix already includes the styling for its tables eg: https://github.com/limetech/webgui/blob/20f5374f72db2504a7273d4c3bb92ed304bc9469/plugins/dynamix/styles/default-white.css#L128

 

 

  • Author
2 hours ago, Squid said:

You're free to style a plugin any way you want so long as it doesn't interfere with the OS.  (ie: don't override any css for classes that might exist on the banner / menu bar etc)

 

You can get the current theme via <?$display['theme']?>, so if you're using custom colours outside of what the dynamix defaults are then you'd have to use custom CSS and conditionally select which colour to use.  As a (very extreme) example, you can look at CA's CSS (/usr/local/emhttp/plugins/community.applications/skins/Narrow/css.php)

 

Dynamix already includes the styling for its tables eg: https://github.com/limetech/webgui/blob/20f5374f72db2504a7273d4c3bb92ed304bc9469/plugins/dynamix/styles/default-white.css#L128

 

 

Thanks for the pointers.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.