CSS Web Customization

[Critchleyb]

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.

[Tom Elliott]

@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]

@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.

[Critchleyb]

@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?

[Tom Elliott]

@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.

[Critchleyb]

@Tom-Elliott

Thanks,

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

[Tom Elliott]

@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.

[lebrun78]

Hello,
I have a prod server and a test server
To differentiate them, I would lid like to change the default “blue theme” to a green theme.
Which lines should I modifi in de fog.css files ?