Cannot find div nth child?!

[aharper12]

Hi everyone,

I'm trying to update a left-border color (see attached screenshot).

css_1.png

I have looked in my stylesheet, in the div properties, and I can't find the item ANYWWHERE. Does anyone:

a) know where I might find that item, to update the color?
b) know if there is a way to do a search through my entire stylesheet to replace all hex color values from one, to the other?

TIA!
Adriana

[ChoccieMuffin]

As I don't have your stylesheet I can't help with the first one, but for the second one you most certainly can search and replace on colours. You can open your stylesheet in a text editor and change it from there.

BUT...

If you're using a recent Flare version (think it was introduced in 2019?) you can include CSS VARIABLES, so you only need to change the colour in one location. You'll need to adjust your stylesheet to use variables, but once you've done it, changing colours is really easy.

For example, let's say your stylesheet contains this kind of thing, where you have h1 and h2 using your primary corporate colour (#45494c), h3 and h4 using secondary corporate colour (#f00a4b6), and regular text and assorted other bits and pieces using your corporate colour for text (#4e4e4e):

Code: Select all

h1
{
	font-weight: bold;
	font-size: 24.0pt;
	color: #6f1096;
}

h2
{
	font-weight: bold;
	font-size: 18.0pt;
	color: #6f1096;
}

h3
{
	font-weight: bold;
	font-size: 14.0pt;
	color: #f00a4b6;
}

h4
{
	color: #f00a4b6;
	font-weight: bold;
	font-size: 12.0pt;
}

p
{
	color: #4e4e4e;
	font-size: 12.0pt;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 20pt;
	letter-spacing: 0.25;
}

You COULD do a search and replace for the colours, or scroll through and change them one at a time, or you could use CSS variables, which means you define variables once and insert them where needed.
You can read the help here: https://help.madcapsoftware.com/flare20 ... iables.htm.
I do most of my stylesheet editing in a text editor, and using CSS variables in this way, the above segment looks like this:

Code: Select all

:root
{
	--Primary: #6f1096;	/* Dark purple*/
	--Secondary: #f00a4b6;	/* Mid blue */
	--Text: #4e4e4e;	/* Dark grey*/

h1
{
	font-weight: bold;
	font-size: 24.0pt;
	color: var(--Primary);
}

h2
{
	font-weight: bold;
	font-size: 18.0pt;
	color: var(--Primary);
}

h3
{
	font-weight: bold;
	font-size: 14.0pt;
	color: var(--Secondary);
}

h4
{
	color: var(--Secondary);
	font-weight: bold;
	font-size: 12.0pt;
}

p
{
	color: var(--Text);
	font-size: 12.0pt;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 20pt;
	letter-spacing: 0.25;
}

}

If your corporate colours change at some stage in the future you only need to change the definitions of Primary, Secondary and Text in once place rather than throughout. And with that in mind, when giving the variables names, use names that reflect the usage of the colour rather than the name of the colour. (Though for clarity you can see I added a comment after each variable so I know roughly what the colour is.)

Hope that's useful. And also note that CSS variables works for other things, not just colours, so a very useful feature.

[aharper12]

This is INSANELY helpful! Thank you so much.

Adriana

[NorthEast]

For (a), is div.article-container a responsive layout?

If it is, it might be easier to view/edit the CSS with the Reponsive Layout pane open.

But you should also be able to find the CSS in your stylesheet; e.g. open the stylesheet in the internal text editor, or use the stylesheet editor in Advanced mode and look in (Complex Selectors).