RESOLVED: Styling a heading in a menuProxy

This forum is for all Flare issues related to styles, stylesheets and XML.

RESOLVED: Styling a heading in a menuProxy

Postby writer_sam on Tue Jan 08, 2019 3:43 am

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.
writer_sam
Propeller Head
 
Posts: 22
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Re: Styling a heading in a menuProxy

Postby Dave Lee on Tue Jan 08, 2019 4:54 am

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
}/
Dave Lee
Master Propellus Maximus
 
Posts: 5414
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Styling a heading in a menuProxy

Postby writer_sam on Tue Jan 08, 2019 5:45 am

: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.
writer_sam
Propeller Head
 
Posts: 22
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 2 guests