X3Photo Gallery Forums

WizardFusion · 28 Jan 2018, 12:32

When adding content to a page, and using H1, H2 tags, I would like those headers to be in the same colour as the skin primary colour.
I know I can manually add CSS for these, but how do I reference the current colour.? I wouldn't want to hard-code it in case I want to change it later.

Thank you.

For an example page, see http://myimagegallery.co.uk/blog/

28 Jan 2018, 22:56

I wish I could say there was a simple way to "piggyback" the current "primary color" selected for your X3 skin. This color is however hardcoded into the SKIN CSS files. When using a custom color, X3 uses javascript to apply the new color to elements that are originally set to inherit from the primary color.

Thus, I can only suggest you use plain CSS (Settings > Custom > Custom CSS), although it is not dynamic as requested:

h1, h2, h3, h4, h5, h6 {
  color: #123456;
}

In some cases, if you also want colors to inherit into INTRO headers for example, you may need to use !important:

h1, h2, h3, h4, h5, h6 {
  color: #123456 !important;
}

There is in fact a way to apply current primary color to a html element using the primary-color class:

<h2 class="primary-color">My Header</h2>

However, the above is probably not useful in your case, as this class can only be added to HTML that you add into the CONTENT section, which does not include the main page title. Furthermore, it would require you to remember to apply this class for every header tag you ever add.

We aim to make it easier to customize various styles in a future release.

WizardFusion · 01 Feb 2018, 03:37

Thank you, I'll have a play and see what I can use.

X3Photo Gallery Forums

Change colour of header styles (h1, h2, etc)3 posts

Change colour of header styles (h1, h2, etc)

Re: Change colour of header styles (h1, h2, etc)

Re: Change colour of header styles (h1, h2, etc)