Common CSS Variables for Customization

[sirjoealot]

I wanted to propose a new feature for the Pterodactyl Panel that I believe would greatly enhance the customization options and user experience. Currently, customizing the panel's appearance requires modifying multiple CSS files, which can be overwhelming and time-consuming, especially for newcomers.

I suggest implementing a separate CSS file that includes common variables for backgrounds, buttons, and other visual elements. This approach would consolidate the styling parameters into a single file, making it much more convenient for users to customize the panel according to their preferences. Additionally, it would encourage the sharing of these CSS files within the community, fostering collaboration and creativity.

Benefits:

1. Ease of Use: By having a dedicated CSS file for common variables, users can quickly locate and modify the desired styling elements without having to sift through multiple CSS files.

2. Consistency: With centralized variables, maintaining consistency across different components and pages becomes much simpler, resulting in a more cohesive and polished appearance.

3. Community Collaboration: Providing a standardized CSS file will encourage users to share their customizations, allowing the community to benefit from a diverse range of styles and themes.

Implementation Suggestions:

1. Create a separate CSS file, such as common-variables.css, which includes variables for backgrounds, buttons, fonts, and other frequently customized elements.

2. Document the available variables and their usage in the Pterodactyl Panel documentation to assist users in customization.

3. Encourage users to share their customized CSS files on platforms like GitHub, allowing others to easily import and apply their preferred styles.

Open Discussion:

I would love to hear your thoughts on this proposal. Do you think having a dedicated CSS file for common variables would be beneficial for customization?

Please share your feedback, suggestions, or alternative ideas regarding this proposal. Let's work together to improve the customization capabilities of the Pterodactyl Panel and enhance the user experience for all.

Looking forward to your input and contributions!

[FoksVHox]

This is already doable by using the tailwind.config.js file no?

[sirjoealot]

FoksVHox, Thank you for bringing up the tailwind.config.js file. You're correct that Pterodactyl Panel already provides customization options through this configuration file. The 'tailwind.config.js' file allows users to modify various aspects of the panel's appearance, such as colors, fonts, and transitions, using Tailwind CSS utility classes.

Considering the flexibility provided by the 'tailwind.config.js' file, it may not be necessary to introduce a separate CSS file for common variables, as users can achieve similar customization results directly through Tailwind CSS. However, it's important to note that a dedicated CSS file with variables could still be an alternative option for users who prefer a more traditional CSS approach or are not familiar with Tailwind CSS.

I appreciate your insight into the existing customization capabilities offered by the tailwind.config.js file. If you have any further thoughts or suggestions regarding the panel's customization, please feel free to share them.

Thank you for your contribution to the discussion!