RESOLVED: Styling a heading in a menuProxy

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

RESOLVED: Styling a heading in a menuProxy

Post by writer_sam »

Happy 2019 Flare-users/lovers!

So I've been battling with this conumdrum for a while now and can't figure out what's going on :shock:

I've been tasked with replicating this layout:
08-01-2019_aim.png
At first, I created this using a <p> class for "Table of Contents" before the menuProxy but I ended up with a gap between the heading and the menuProxy:
08-01-2019-attempt1.png
I couldn't figure out how to remove the gap between the two. This is my CSS:

Code: Select all

p.InternalTOC
{
	border-left-color: #aaa;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: #aaa;
	border-right-style: solid;
	border-right-width: 1px;
	border-top-color: #aaa;
	border-top-style: solid;
	border-top-width: 1px;
	color: #000000;
	font-size: 1.2em;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	margin-top: 10px;
	text-align: center;
}
I was then pointed in the direction of the content property in CSS, and managed to get to:
08-01-2019-attempt2.png
However, I cannot make "Table of Contents" center-aligned for love nor money. This is the CSS:

Code: Select all

 /* Internal TOC Title */
ul.menu._Skins_InternalTOC.mc-component::before
{
	content: "Table of Contents";
	color: #000000;
	font-size: 1.2em;
	display: block;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}/
When I test this in the browser's inspector, it would appear that the padding and and text-align elements are ignored, so I tried:

Code: Select all

 /* Internal TOC Title */
ul.menu._Skins_InternalTOC.mc-component::before
{
	content: "Table of Contents";
	color: #000000;
	font-size: 1.2em;
	display: block;
}

.padding
{
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}/
with a <div class="padding"> wrapped aroung the menuProxy but that renders all text centered.

I think my problem is a lack of understanding for the content property. Is there a way to fully format the text in "content" rather than just colour, size, and so on? Or am I barking up the wrong tree and it's something (glaringly obvious) else I should use? TIA.
You do not have the required permissions to view the files attached to this post.
Last edited by writer_sam on Tue Jan 08, 2019 5:46 am, edited 1 time in total.
To err is human, but to really foul things up you need a computer.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Styling a heading in a menuProxy

Post by NorthEast »

That's a bit odd, as your second code example is correct, and works fine for me.

I did notice is a stray "/" character at the end which shouldn't be there; so maybe check there's nothing else strange in your CSS.

Code: Select all

}/
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Re: Styling a heading in a menuProxy

Post by writer_sam »

:oops: :oops:

I think I need a new fine-tooth-comb. When I test, I typically comment out sections to ensure only new CSS is tested. Somehow, I managed to put the * for that / in a separate place during one of my tests. Skillz!

Thanks for you help Dave!

I'll leave this post here in case the code can help others.
To err is human, but to really foul things up you need a computer.
Post Reply