My flexdashboard is divided into multiple sections separated by the '###' heading, as shown below:
page 1
=====================================
Column
-----------------------------------------------------------------------
### section 1
bla bla bla
### Section 2
{r}
# r data
> Source: me!
To match my company colors, I modified the CSS but wanted distinct colors for each section. For instance, section 1 in red and section 2 in blue. To achieve this, I created a new class and customized the .chart-title tag.
The custom styling works well for one section and partially for the second. I experimented with Chrome's inspect tool and attempted inserting HTML code like so:
<div class="chart-title-2">Section 2</div>
<div class="chart-stage">
<p>BLA BLA BLA</p>
</div>
However, this content appeared within the first section. When I placed the closing </div> before the new section, it disrupted the order of sections and columns.
I'm curious about the significance of the '###' heading in HTML to replicate it accurately with different CSS styles. Alternatively, if there's a simpler approach to achieving this customization?