Wide, Dark Theme for ISPConfig v3.2.11p1

Discussion in 'Tips/Tricks/Mods' started by Ranzy Campbell, Nov 10, 2023.

  1. I took the default theme from ISPConfig 3.2.11p1 and created a Dark Wide Theme. I included the ispconfig_version file so it should just plug and play. I made mine the default, so to be honest, I did not add it as a second theme. Let me know it this works.

    I will continue to work on it, but honestly I believe it to be pretty complete now.

    I set up the theme.min.css file with variables so it should be very easy to make changes to your own taste.

    Let me know if you have problems. Not sure if I could help you fix them, but maybe.

    Edit:
    Modified the login screen too.
    ispconfig-wide-dark-theme-v1.01.zip
    Edit 2:
    Modified the module size to 193px from 200px to make modules fit better on full screen. At least on my screen. I can't make the modules fill the space from the theme folder. It would require a bit a a re-write on the home page html I think.
    ispconfig-wide.dark-theme-v1.02.zip
     

    Attached Files:

    Last edited: Nov 10, 2023
    Th0m likes this.
  2. [​IMG] [​IMG] [​IMG]
     
    Last edited: Nov 10, 2023
    vk3heg likes this.
  3. I could use some advice with this theme.
    I want to make the module buttons fill the space better in the main screen. I didn't hunt for it too hard tonight because I wanted to finish the color parts first. That's the next thing I will work on, but it doesn't mess up the layout too much. I can live with this for a little while.
    You could just set the max-width in theme.min.css to 1260px, which I believe was the default anyway and the module buttons would be just like they were to begin with.
     
  4. I will be fixing some of the white borders next. I'll round the corners a bit more but it will be set by variables for easy changes. I will most likely upload the updates in a day or two.
     
  5. I'm going to hide the module buttons on my next update. I'll leave the v1.02 in case some of you want to have them in your setup.

    The way I see it, they take you to the same place as the buttons on the menu above. To me, it'll be a cleaner look with good data a little closer up to the top.
     
  6. Ok, I hid the modules from the home screen and pretty much fixed the borders. Still some work to do, but I'm really starting to like it.
    At this point it look like all tabs work correctly and are visible with correct dark and light settings.
    I'm done for tonight.
     

    Attached Files:

  7. ispconfig-wide-dark-rounded-home.png ispconfig-wide-dark-rounded-system-config.png I worked on rounding the corners this evening.[​IMG] [​IMG]
     

    Attached Files:

    Last edited: Nov 14, 2023
    vk3heg likes this.
  8. [​IMG] [​IMG] [​IMG] [​IMG]
     

    Attached Files:

  9. I think I'm finished with it. I hope you like it.
     
  10. Th0m

    Th0m ISPConfig Developer Staff Member ISPConfig Developer

    Do you have a git repo where you track the changes and eventually make releases of this theme?
     
  11. I have a github account, but right now it's empty. I hosted a site on it for about a year. That site is gone now though. I was working on a personal project called GridPerfect. It wasn't perfect, by the way, but how else can you learn to code. I ditched it and started focusing on using Bootstrap instead. I'm a bit of a noob, but I keep trying.

    I've already found a couple more little mistakes/updates to the theme I uploaded. There are so many different tabs and dropdowns that have a white background. I've fixed them on my side but not uploaded yet. The last one I uploaded is pretty close to finished, but not quite.

    I had to make a small change to the order of css links. I moved theme.min.css to the bottom of the list to override select2.css.

    I'm using it as my default/only theme because I couldn't get it to switch. I actually think that's broken but decided not to focus on that for now. To test it, I created a fresh install of Debian 12, ran the perfect server install, copied the default theme to dark, inserted the file ispconfig_version with 3.2.11 in the file, changed my user to use the dark theme, logged out and back in still using default. I even tried to use a browser, with a clean cache. I confirmed it by "view source" and all the css links were pointing to default not dark. Could you confirm that it actually works? Not sure if you have time for that kind of stuff.
     
    felan, webguyz and Mateus Magen like this.
  12. vk3heg

    vk3heg Member

    Your theme looks rather nice. I haven't done anything with it yet. I hate white websites with grey text, so use a plugin in Firefox called "Dark Background and Light Text" and everything is always dark and easy to read. :)
     

Share This Page