Title header color and text centering

[jmanion711]

Setup

• Browsers and versions: Chrome 83.0.4103.97
• MediaWiki version: 1.34.1
• Database version: MySQL (MariaDB 10.4)
• PHP version: 7.4.6 (apache2handler)
• Pivot version: 2.2.0
• Extension version (if connected to the issue):

Issue

I'm sure this is user error but I am having a devil of a time getting a header, of a defined column area, to display a color.

This pick is from the MediaWiki example:

This pick is from my implementation.

Also note that I am unable to center the text.

Not sure what I'm doing wrong. Thank you for your help in this matter.

[mbilsky]

I'm not sure why this is happening but it happened for me as well (even in version 2.1).

I fixed it by modifying /assets/stylesheets/foundations.css

There may be a better way but this one has worked for a year plus without any issues. It also seems to work in v2.2.

Changing the .subheader class to:

`.subheader {
line-height: 1.4;
/* color: #6f6f6f;*/
color: #fff;
font-weight: normal;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
margin-top: 0.2rem;
margin-bottom: 0.5rem;
text-align: center;
background: #517398;

}`

[jmanion711]

Awesome! Thank you!

[Hutchy68]

I fixed it by modifying /assets/stylesheets/foundations.css

ouch, you shouldn't change the actual code because when you update the version it will be lost. Please inspect the code on https://pivot.wikiproject.net and use the System Message MediaWiki:Pivot.css to change styling. That is the safe way.

Homepage code on page. Used tags <h3>

<h3 class="subheader"><span class="fa fa-th fa-lg" style="display:inline;"></span> Responsive Grid</h3>

Note the class="subheader" and then look at https://pivot.wikiproject.net/wiki/MediaWiki:Pivot.css

...
/* Style here are only to highlight functionality of Pivot */

/* make the main page subheaders solid bars */
.subheader {
    background: #517398;
    color: #fff;
    text-align: center;
    padding: .5em;
}
...

This will work for any element you give a class of subheader. Eg. <h2 class="subheader">

[jmanion711]

Got it. Thank you Tom.

…

On Fri, Jul 24, 2020 at 11:37 AM Tom Hutchison ***@***.***> wrote: I fixed it by modifying /assets/stylesheets/foundations.css ouch, you shouldn't change the actual code because when you update the version it will be lost. Please inspect the code on https://pivot.wikiproject.net and use the System Message MediaWiki:Pivot.css to change styling. That is the safe way. Homepage code on page. Used tags <h3> <h3 class="subheader"><span class="fa fa-th fa-lg" style="display:inline;"></span> Responsive Grid</h3> Note the class="subheader" and then look at https://pivot.wikiproject.net/wiki/MediaWiki:Pivot.css ... /* Style here are only to highlight functionality of Pivot */ /* make the main page subheaders solid bars */ .subheader { background: #517398; color: #fff; text-align: center; padding: .5em; } ... This will work for any element you give a class of subheader. Eg. <h2 class="subheader"> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#97 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AP4LXU7O4CRWCZLLJDZWNEDR5G2FTANCNFSM4NYRQGRA> .

[Hutchy68]

No problem, closing as answered.