CSS Web Customization



  • Hey,

    Not so much of an issue as a nice to have, I know some basic CSS but not too much.

    I’m just looking to change the color of the containers in fog from Blue to Purple as I now have two servers and want to easier identify them from each other.

    Is there a line in the CSS files that I can change to accomplish this?

    I’ve found the location of the CSS files, and tried changing bits but cant seem to find the right line to edit.


  • Senior Developer

    @Critchleyb

    1.5.X and even 1.6.X are based on bootstrap. Some of the elements for fine tuning are defined in the default/fog.css file, but majority of the items are generic and using the bootstrap information directly.

    If you need to customize particular things, and you know the class/ids you need to modify, you’ll want to edit the default/fog.css (though for your own environment I’d recommend creating your own custom something like critchleyb/fog.css and make your changes there.


  • Senior Developer

    @Critchleyb You can specify the theme you want to use in the FOG Configuration page.

    For what it’s worth, I would highly recommend if you’re going to be making customizations to the CSS, do so in the 1.6 version as it’s much more clean from the 1.5.x layout and operationality.



  • @Tom-Elliott

    Thanks,

    I’m personally struggling, but I’ll throw it over to our web dev to take a look.


  • Senior Developer

    @Critchleyb

    1.5.X and even 1.6.X are based on bootstrap. Some of the elements for fine tuning are defined in the default/fog.css file, but majority of the items are generic and using the bootstrap information directly.

    If you need to customize particular things, and you know the class/ids you need to modify, you’ll want to edit the default/fog.css (though for your own environment I’d recommend creating your own custom something like critchleyb/fog.css and make your changes there.



  • @Sebastian-Roth

    Yeah I have taken a look in there. As i say i have limited knowledge on CSS so forgive me if i’m missing something obvious.

    When i select the heading panel i can see it gets its values from “.panel-primary > .panel-heading”

    Looking in the fog.css file in /var/www/fog/management/css/default I can’t seem to find any reference to .panel?


  • Senior Developer

    @Critchleyb Have you ever used the browsers development tools. Firefox and Chrome come with the tools on board. Usually just hit F12 on any website to get the dev tools. They are a great way of playing with the CSS stuff.


Log in to reply
 

376
Online

7.5k
Users

14.6k
Topics

137.5k
Posts