FlexFooter component

theme-component

(Joe) #1

Repository link
https://github.com/hnb-ku/discourse-FlexFooter-theme-component

Screenshots

Desktop:

Mobile:

click for full size


Installation

:warning: This theme component requires you to actually look at the code and change it to your preferences.

This is a skeleton. You still need to add content / links.


To install this theme, follow the theme installation instructions:

https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682


Once the theme from the repository is installed, follow these steps:

1- Create a separate theme component and name it (example: FlexFooter Child)
2- Go to the samples folder
3- Pick a template (there’s only one for now)
4- Copy the code from the template and add it to your newly created FlexFooter Child
in the common > Footer section.
5- Copy the following variables and add them to the common CSS section in FlexFooter Child you can edit them as needed to change colors.

$df-top-footer-background: rgb(40, 40, 40);
$df-bottom-footer-background: rgb(17, 17, 17);
$df-top-link-color: inherit;
$df-bottom-link-color: rgb(185, 185, 185);
$df-shared-text-color: rgb(175, 175, 175);
$df-shared-heading-color: rgb(255, 255, 255);
$df-base-font-size: 1em;

5- Now add FlexFooter Theme Component and FlexFooter Child as a components under your new theme.


You should then be able to modify the html of the footer and the color variables in your newly created FlexFooter Child

You can pretty much add anything inside the cards, from mailing list signup forms, images, text, links, ads, or iframes

You only need to look for the portion between

<!-- start card content -->
and
<!-- end card content -->

remove the placeholders, and add your content. and you’re good to go.


Add button next to Privacy, Terms of Service
(Biscuit) #12

I’ve been playing around with this theme behind the scenes and love it. Thanks.

I’m using the same code for the header and footer, so there’s cards at top and bottom. The only issue I experienced is the preview not working without a save first, which is discussed in this thread.

I’m not too familiar with CSS, so still exploring… wondering if there’s a way to define more cards and randomly rotate the content. Are there any specific commands I should google to investigate this?


(Joe) #16

@Biscuit

I also need to save first to preview any changes. I don’t really know what’s going on here :sunflower:

I think you’re mostly fine here except for one thing. The footer template has a element with a unique id.

So, if you copy the template once in the footer and once in the header, you get two elements with the same id. Which makes the html invalid.

In order to avoid that, update to the latest version and change the html in the header (or footer).

Look for:

<div id="df">

And change it to:

<div class="df-mainwrap">

To add more cards you need two things:

1- Add the html for the card
2- change the width of each card

To add the html (example)

look for:

<!--- End Card C -->

And add this right below it:

				<div class="df-cards">

					<!--- Start  Card content -->



					<!--- End Card content -->

				</div>

And then add this CSS to a child theme under FlexFooter theme:

.df-cards {
	width: 25%; // <~ change this to 100% divided by number of cards
}

@media (max-width: 768px) {
	.df-cards {
		width: 100%;
         }
}

Example result:


Can you give me a bit more info on what you have in mind here?


(Biscuit) #17

Thanks for the response! Didn’t realise about the unique name, so will correct that.

I’m sticking with 3 cards at top and bottom for now, as it feels right, the way you had it. But, good to know how to display more cards if needed.

I was wondering if it’s possible to define some extra cards (say 6 in total) but CSS only displays 3 of them at random. So if the person loads another forum page, they may see different cards. I’m not a CSS person, so not sure if that’s possible via CSS customisations?


(Joe) #18

Is it possible? Yes.

With CSS alone? Most likely not.

You need a script.


I would start by giving each card a unique id and hide all of them. Then put those ids in an array. Then randomize. Then get the first three and show them with jQuery. This leaves you with 3 cards that are displayed.

Once you write a script that does that for you, you need to fire it on every page reload.

With Discourse you can do that like this:

<script type="text/discourse-plugin" version="0.8.18">
//fire the script on every page change
api.onPageChange(() => {
	FooBar();
});


function FooBar() {
      // do stuff
}
</script>

(Biscuit) #19

Cool. I’m using that script to fire on each page reload already, as I saw it in another thread by you :slight_smile:

I was investigating child selectors for choosing which cards to display, but more familiar with your approach above.


(Blu McCormick) #20

Hello,

I LOVE this theme! I am using it for local advertising. Here is what I have:

Thanks for sharing, @lll. :pray:


(Biscuit) #21

The header part is explained just above in this topic. ie: You can take the stuff that you’ve got working under ADMIN > CUSTOMISE > THEME> FOOTER and copy it under the HEADER section. But then make the additional change below:


(Joe) #22

I just pushed a small update to keep the footer at the bottom of the page regardless of content height.

I’ve ironed out a bunch of things in testing, but please let me know if I broke anything.

Before:

After:

@McBlu That’s awesome :ok_hand:

Just to clarify,

Did you mean to add the footer at the top of the page? Like this:

In that case what @Biscuit said applies.

Or did you mean something like this:

Which would be something slightly different.

Let me know if you still the other issues are still there.


(Blu McCormick) #23

Thanks, @lll .

  1. I am wanting to put a header in the footer just like you surmised with your “Something Amazing!” in the above image. Although it is very handy to know how I’d handle this template if I use it in the header (thanks, @Biscuit).

  2. I would like to limit the banner to the home page.

  3. I am also wondering how the form works for subscribing to the newsletter? How do I set that up to work in terms of the code? I have never set one of those up before except for Wordpress widgets.


(Joe) #24

Sure @McBlu

To add a header look for:

<div class="df-container clearfix">

Here:

And add this underneath it:

<h3 class="footer-title">This is a title!</h3>

Like so:

Which would give you this:

You can then apply any styles you want to it using the selector for the class we put on it. For example:

#df h3.footer-title {
    font-size: 2em;
    margin-bottom: 1em;
    color: #4CAF50;
}

Would result in:


You can use this to only show the footer on homepages:

body:not(.navigation-categories):not(.navigation-topics) #df {
		display: none;
}

In its current form, it won’t do anything. It’s a placeholder. You would need to hook it up to an actual action which I don’t know how to do.

Adding a Google form might work there but I have not tried. I will update if that works.

Edit:

This is obviously a pretty basic example:
I just tried Google forms and it works for data collection. That’s about as deep as I went with it.

Resulted in:

Take a look at this guide for how to create a form / get the embed code.

Then add the embed code between where it says:

<!--- Start  Card content -->

<!--- End Card content -->

under

<div class="df-cards df-card-c">

After removing what’s already there.

The end result sort of looks like this:


(Blu McCormick) #25

Perfect, III. Here is what I’ve got so far.

My banner is for local town advertisers to use. Members are locals and will be happy to support local businesses but I still need to entice them to go to the banner and use it. I also need to offer enough to make our modest (tbd) fee worth it for the advertiser. So having a button to take our members to the advertiser’s website (great for menus), offering a coupon, and to add our members (if members want) to their mailing list, might be enough. All I need for that newsletter subscription is to capture the info and I can send that on to the advertiser to set up on their end (is my non-coder thought). I’ll play with google forms on my end and let you know. One other thought I have on the newsletter subscription is not all businesses have newsletters so if it’s hard to program newsletter subscriptions for one footer on the home page but not on the footer on a group page, I might just dump this newsletter subscription and just use that box for describing our local advertiser. If you have any insight on how to keep this as simple as possible (ie. only add functionality if it’s a matter of a few lines), please let me know, III.

Btw, mobile view is working nicely.

I have one more question for you, thinking ahead to a possible advertising scenario. If I want to add the same banner to the bottom of a few other particular forum pages, how do I think about the code? I imagine myself copying and pasting code in the footer menu and tweaking each copy for a particular ad. But then I’d need unique identifiers for each footer in ‘footer’ to link them to the code in css that determines which page that particular footer appears on. Or am I totally off track. :rofl: I am so jonesing to learn coding once I get this forum launched next week. When I do I’ll go back through your mini-tutorials posted here when explaining code to me.


(Blu McCormick) #26

Ok, @lll, here is what I did for the subscription form section (which in my case is for subscribing to a newsletter by an ad sponsor so the form info doesn’t need to be inputted into the discourse forum.)

I just created a google form (thanks for the suggestion) where people who want to subscribe to the sponsor’s newsletter just hit the button and then fill in the form:

12%20PM

This is the form they’d see when they click on the button:

Subscribers info gets saved to a spreadsheet which I can share with the advertisor.


(Joe) #27

Hi @McBlu

This is possible with a couple of tweaks.

But would depended on what you mean by group page. Do you mean group as in Discourse group page or group as in shown to members of a particular group? Or are you referring to something else perhaps.

I’m willing to work with you on this, so I don’t mind a bit of back and fourth.

Here’s an example where I show different content to different users based on what group they are in. This example ignores your previous preference to only show the footer on homepages for simplicity. If it is indeed what you’re after, we can integrate the two together later.

Also, I don’t recommend doing this if you have a lot of different varieties that you wish to include. In that case you need something more programmatic / flexible and will most certainly would involve javascript/jQuery

Discourse adds a primary-group-GROUP_NAME class which you can use.

For example, if I create a group called car_owners, here’s what gets added to the <body> tag when I browser:

This class can then be selected with a CSS selector like:

.primary-group-car_owners

So now all you need to do is all another identifier or class to the content you want to display:

Take a look at the default content of card A below:

				<!--- Start  Card A -->

				<div class="df-cards df-card-a">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Call to action
					</h3>
					<p> Lorem ipsum dolor sit amet, ex nulla cetero eam, admodum fuisset mediocritatem id sit, at soluta dictas eloquentiam vis. Harum dolorum mei ea </p>
					<p> <a href="#" class="btn btn-primary btn-df">Call to action!</a> </p>
					<p class="df-text-center"> fugit persius <a href="#">splendide</a> his mentitum! </p>

					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

By default this will show to everyone,

We can now add a class to be later linked with the group_name class added by Discourse

I will use the class

car-owners-content

And so I added it like this:

				<!--- Start  Card A -->

				<div class="df-cards df-card-a car-owners-content">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Call to action
					</h3>
					<p> Lorem ipsum dolor sit amet, ex nulla cetero eam, admodum fuisset mediocritatem id sit, at soluta dictas eloquentiam vis. Harum dolorum mei ea </p>
					<p> <a href="#" class="btn btn-primary btn-df">Call to action!</a> </p>
					<p class="df-text-center"> fugit persius <a href="#">splendide</a> his mentitum! </p>

					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

And now we match the two selectors together to hide the card if the user is not in the car-owner group like so:

body:not(.primary-group-car_owners) .car-owners-content {
	display: none;
}

This reads like so:

If the body does not have the class primary-group-car_owners - which is added automatically by Discourse - then set the display property for any element with the class car-owners-content to none or simply hide it.

So, what now?

Well we add more groups and more different content.

Let’s say there’s a bike owner group, we do exactly the same as above and then we end up with something like this:

				<!--- Start  Card A -->

				<div class="df-cards df-card-a car-owners-content">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Free oil change! 
					</h3>

                    <img src="http://3.bp.blogspot.com/-MNxBEj-cNHM/ViHiJrH4XoI/AAAAAAAAAGg/UUcKG8KsB1c/s400/Oil%2BChange%2BCoupons.jpg">

					<!--- End  Card content -->

				</div>

				<div class="df-cards df-card-a bike-owners-content">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Win a free helmet
					</h3>
					
                <img src="http://www.snowmobilefanatics.com/forums/attachments/366131d1409779266-win-new-509-altitude-helmet-509-promo-page.jpg">

					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

And the following CSS:

 body:not(.primary-group-car_owners) .car-owners-content {
	display: none;
}

body:not(.primary-group-bike_owners) .bike-owners-content {
	display: none;
}

This is a pretty basic example, mind you. but it would show the following to someone in the car_owners group:

And the following to someone in the bike_owners group:

Again, I don’t recommend this if you have a ton of different audience groups to cater to, but it would work for a small number of variations

Have you looked using a third-party resource for advertisement?

I will stop here and see which direction you want to proceed with before I continue


Hide "NEW" for TL1 and above
(Blu McCormick) #28

Thank you, @lll. :pray:

Right now the awesome banner is limited to our forum home page.

In our dream scenario, we’d offer the same format banner to a few different local vendors, one page per vendor. e.g. Forum home page, Category home page.

With the template depicted above, we’d be changing the following per vendor:

  • Title of banner (to vendor’s name)
  • In first box, text inserted and two links
  • In second box, text and image inserted and one link (to a page for printing the coupon)
  • In third box, text and link (all the newsletter subscribing is done outside of discourse via google forms)

The links in the banner on the home page are currently linking to pages so you can see the functionality for yourself.

You are so good at explaining code, III. Thanks. I need to really pay attention to the terms I use when posting, since group isn’t really what applies here to my uneducated eye. It is more the page. By group page, I really was talking about category page.

I have snapshot the two pages I’d like to place the banner ads on:

Summary

Home page:


Lafayette Colorado Advocacy Group (category) page

If you want to go to the forum and see for yourself, go to:

I’d like to use two banner ads as outlined above – advertise two local vendors at a time.

Yes, I am in the process of setting up google double click for the wordpress blog that gets shared across the internet. To reply to that blog the public has to join our forum. The ads that pop up in the publicly shared blog will be matched to the user’s search history. Once in the forum, town’s local members are more likely to be favorable to local ads wanting to support local business.


(Joe) #29

Ok, that makes sense.

The same still applies, the only thing the would be different is the classes used.

For having only two different versions, yes, I think this will work well.

Just so that we are on the same page, here’s a couple of things you need to know:

The element #df is the thing that wraps around everything or:

We won’t touch that now.

Next is the top portion of the footer or .df-top

Inside that there is a .df-container

Ignore the word clearfix here.

this .df-container is the one that holds the footer title and the cards inside. We’re going to try and make a copy of that and only show one at a time.

Your current html looks like this:

current
<div id="df">

	<!--- Start Top Section -->

	<footer class="df-top">
		<div class="df-container clearfix">
		    
		    <h3 class="footer-title">LOCAL VENDORS ADVERTISE HERE</h3>  
		     
			<div class="df-card-wrapper">

				<!--- Start  Card A -->

				<div class="df-cards df-card-a">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Bring business to your website
					</h3>
					<p> Pay a monthly fee and advertise your local business in this banner. Support us and we will support you! </p>
					<p class="df-text-center"> Go to <a href="http://wethepeoplejournal.com/how-you-can-contribute/">this page</a> to own this banner.</p>
					<p> <a href="#" class="btn btn-primary btn-df">This button would take members to your website!</a> </p>
					
					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

				<!--- Start Card B -->

				<div class="df-cards df-card-b">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Giveaway!
					</h3>
					<p>
						Insert your coupon below. If you would like us to do a coupon for you <a href="http://wethepeoplejournal.com/how-you-can-contribute/">let us know!</a>
					</p>
					<a href="#"><img src="//forums.wethepeoplejournal.com/uploads/db2768/original/1X/0ae25004a8c5dfd6e126e7b596a7e0909bcdc91e.png"></a>

					<!--- End  Card content -->

				</div>

				<!--- End Card B -->

				<!--- Start Card C -->

				<div class="df-cards df-card-c">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Invite members to subscribe to your newsletter 
					</h3>
					<p> Here is where we describe your awesome business and provide an opportunity to subscribe to your newsletter if you have one.</p>
					<p> <a href="https://docs.google.com/forms/d/e/1FAIpQLSetZ1byDb-u_W-apLu_31g9Hpn0p6J8NXBrdcy4DJF1hl_hqA/viewform?usp=sf_link" class="btn btn-primary btn-df">Members would subscribe to your newsletter here</a> </p>

					<!--- End Card content -->

				</div>

				<!--- End Card C -->

			</div>
		</div>
	</footer>

	<!--- End Top Section -->

	<!--- Start Bottom Section -->

	<footer class="df-bottom">
		<div class="df-container clearfix">

			<!--- Start LinkList A -->

			<nav class="df-linklists df-linklist-a">
				<a href="/about" class="df-local">About</a>
				<a href="/tos" class="df-local">Terms of Service</a>
				<a href="/privacy" class="df-local">Privacy</a>
			</nav>

			<!--- End LinkList A -->

			<!--- Start LinkList B -->

			<nav class="df-linklists df-linklist-b">

				<!--- Start Social links -->

				<a class="df-social-link" href="https://twitter.com/WTP_Journal">
                <i class="fa fa-twitter"></i>
              </a>
              
				<!--- end Social links -->

			</nav>

			<!--- End LinkList B -->

		</div>
	</footer>

	<!--- End Bottom Section -->

</div>

To duplicate it you replace it with this:

Modified
<div id="df">

	<!--- Start Top Section -->

	<footer class="df-top">
		<div class="df-container df-homepage clearfix">
		    
		    <h3 class="footer-title">Title for homepage</h3>  
		     
			<div class="df-card-wrapper">

				<!--- Start  Card A -->

				<div class="df-cards df-card-a">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Bring business to your website
					</h3>
					<p> Pay a monthly fee and advertise your local business in this banner. Support us and we will support you! </p>
					<p class="df-text-center"> Go to <a href="http://wethepeoplejournal.com/how-you-can-contribute/">this page</a> to own this banner.</p>
					<p> <a href="#" class="btn btn-primary btn-df">This button would take members to your website!</a> </p>
					
					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

				<!--- Start Card B -->

				<div class="df-cards df-card-b">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Giveaway!
					</h3>
					<p>
						Insert your coupon below. If you would like us to do a coupon for you <a href="http://wethepeoplejournal.com/how-you-can-contribute/">let us know!</a>
					</p>
					<a href="#"><img src="//forums.wethepeoplejournal.com/uploads/db2768/original/1X/0ae25004a8c5dfd6e126e7b596a7e0909bcdc91e.png"></a>

					<!--- End  Card content -->

				</div>

				<!--- End Card B -->

				<!--- Start Card C -->

				<div class="df-cards df-card-c">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Invite members to subscribe to your newsletter 
					</h3>
					<p> Here is where we describe your awesome business and provide an opportunity to subscribe to your newsletter if you have one.</p>
					<p> <a href="https://docs.google.com/forms/d/e/1FAIpQLSetZ1byDb-u_W-apLu_31g9Hpn0p6J8NXBrdcy4DJF1hl_hqA/viewform?usp=sf_link" class="btn btn-primary btn-df">Members would subscribe to your newsletter here</a> </p>

					<!--- End Card content -->

				</div>

				<!--- End Card C -->

			</div>
		</div>
		<div class="df-container df-category-page clearfix">
		    
		    <h3 class="footer-title">Title for category page</h3>  
		     
			<div class="df-card-wrapper">

				<!--- Start  Card A -->

				<div class="df-cards df-card-a">

					<!--- Start  Card content -->

					<h3 class="df-card-a-title">
						Bring business to your website
					</h3>
					<p> Pay a monthly fee and advertise your local business in this banner. Support us and we will support you! </p>
					<p class="df-text-center"> Go to <a href="http://wethepeoplejournal.com/how-you-can-contribute/">this page</a> to own this banner.</p>
					<p> <a href="#" class="btn btn-primary btn-df">This button would take members to your website!</a> </p>
					
					<!--- End  Card content -->

				</div>

				<!--- End Card A -->

				<!--- Start Card B -->

				<div class="df-cards df-card-b">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Giveaway!
					</h3>
					<p>
						Insert your coupon below. If you would like us to do a coupon for you <a href="http://wethepeoplejournal.com/how-you-can-contribute/">let us know!</a>
					</p>
					<a href="#"><img src="//forums.wethepeoplejournal.com/uploads/db2768/original/1X/0ae25004a8c5dfd6e126e7b596a7e0909bcdc91e.png"></a>

					<!--- End  Card content -->

				</div>

				<!--- End Card B -->

				<!--- Start Card C -->

				<div class="df-cards df-card-c">

					<!--- Start  Card content -->

					<h3 class="df-card-b-title">
						Invite members to subscribe to your newsletter 
					</h3>
					<p> Here is where we describe your awesome business and provide an opportunity to subscribe to your newsletter if you have one.</p>
					<p> <a href="https://docs.google.com/forms/d/e/1FAIpQLSetZ1byDb-u_W-apLu_31g9Hpn0p6J8NXBrdcy4DJF1hl_hqA/viewform?usp=sf_link" class="btn btn-primary btn-df">Members would subscribe to your newsletter here</a> </p>

					<!--- End Card content -->

				</div>

				<!--- End Card C -->

			</div>
		</div>
	</footer>

	<!--- End Top Section -->

	<!--- Start Bottom Section -->

	<footer class="df-bottom">
		<div class="df-container clearfix">

			<!--- Start LinkList A -->

			<nav class="df-linklists df-linklist-a">
				<a href="/about" class="df-local">About</a>
				<a href="/tos" class="df-local">Terms of Service</a>
				<a href="/privacy" class="df-local">Privacy</a>
			</nav>

			<!--- End LinkList A -->

			<!--- Start LinkList B -->

			<nav class="df-linklists df-linklist-b">

				<!--- Start Social links -->

				<a class="df-social-link" href="https://twitter.com/WTP_Journal">
                <i class="fa fa-twitter"></i>
              </a>
              
				<!--- end Social links -->

			</nav>

			<!--- End LinkList B -->

		</div>
	</footer>

	<!--- End Bottom Section -->

</div>

All I did here is to duplicate the .df-container element like I mentioned earlier and then added unique classes to each copy

The classes I added are df-homepage and df-category-page

Now all you need to do is link the selectors for homepages with the content for the homepage and the same for category page.

The CSS would look like this:

body {
	#df,
	.df-homepage,
	.df-category-page {
		display: none;
	}

	&.categories-list.category-lafayette-colorado-advocacy-group-lcag,
	&.navigation-topics,
	&.navigation-categories {
		#df {
			display: block;
		}
	}

	&.categories-list.category-lafayette-colorado-advocacy-group-lcag {
		.df-category-page {
			display: block;
		}
	}

	&.navigation-topics,
	&.navigation-categories {
		.df-homepage {
			display: block;
		}
	}
}

Then all you need to do is change the content of each .df-container according to your needs.

This should work but let me know if it does not. :sunflower:


(Blu McCormick) #30

It works beautifully, Joe. Thank you so much. I am bettings others who co-opt the banner template for advertising would find this code handy to select which page individual banner ads go on.


(Southpaw) #31

Hi @Johani,

You could not write this to be any more clear and precise, and yet I’m failing at this and could use some help.

I’ve imported the theme. I’ve named it FlexFooter CHILD (Remote)
I’ve created a local theme and copied and pasted your samples into it. I’ve named it FlexFooter PARENT (Local) This would be the same as your Footer Wrapper

In order to make FlexFooter CHILD (Remote) a child of FlexFooter PARENT (Local), it seems I have to set it as a component, which I’ve done.

Then when I try to set FlexFooter PARENT (Local) as a child theme under my current theme, it’s not an option. I have to make it a component, but in doing so, it emancipates FlexFooter CHILD from FlexFooter PARENT.

I can’t see a way to have more than two generations of themes and components.


(Joe) #32

Hi @Southpaw,

It’s not your fault. :raised_hands:

There’s been some recent changes to how themes work and you’re right, a theme-component can no longer have other components under it. The instructions for installation don’t reflect those changes yet. I’ll fix that now.

This component came out before theme settings, so it’s ripe for a rewrite to use theme settings which would make using it a lot easier like the new link-based footer component.

To answer your question about installing this component as it is right now.

You almost had it, the only difference is that you’d need to add FlexFooter Parent and FlexFooter Child as components of the main themes you want the footer to show up on.

Let me know if you have any questions.


(Southpaw) #33

Thank you, @Johani!

This may be a question better suited for another topic…
If you have both parent and child components added to a theme, how does the theme know in which order to apply the CSS rules?

For example, in your screenshot, how would Main theme know that any rules in FlexFooter child should override the same rules in FlexFooter parent?