Talk: WikiaNavigationBarStyle

Replacing the logo

Hi, I noticed your note on replacing the global nav logo using JavaScript. You shouldn't need any JS for that - try using these styles (they work for me in Firefox, Chromium, and IE):

.wds-is-wds-company-logo-fandom,
.wds-is-wds-company-logo-powered-by-wikia > g > path:first-child {
    display: none;
}
.wds-global-navigation__logo-image.wds-is-wds-company-logo-powered-by-wikia {
    margin-left: -155px;
    width: 260px;
}

They work by hiding the "Fandom" and "powered by" portions of the usual Fandom SVG logo, then enlarging the remaining "Wikia" portion. - OneTwoThreeFall ^talk 07:54, May 15, 2017 (UTC)

I'll take a look at it when I next get the chance. If I think it does a good job, then I'll add it instead of making an add on JavaScript for it. ― C.Syde (talk | contribs) 23:17, May 15, 2017 (UTC)

Hmm. I was actually thinking of using the two piece logo that came directly before the current one, so instead of saying "Wikia", it would say "Wikia" and "The Home of Fandom". Trying to add it in two images was too much work, so I had to add it as one image, which I have a copy of on my wiki. ― C.Syde (talk | contribs) 03:46, May 17, 2017 (UTC)

Ah, that logo! That can still be added with pure CSS - no images needed (mostly pilfered from Wikia's old SCSS code):

.wds-global-navigation__logo::after {
    content: "The Home of Fandom";
    border-bottom: 1px solid;
    border-top: 1px solid;
    color: #aaa;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    margin-left: 8px;
    text-transform: uppercase;
}

- OneTwoThreeFall ^talk 11:25, May 17, 2017 (UTC)

Woah, that's fantastic. Thanks! :D ― C.Syde (talk | contribs) 23:49, May 17, 2017 (UTC)

You're welcome! - OneTwoThreeFall ^talk 11:53, May 18, 2017 (UTC)

Not sure why but there's an issue with the logo. It seems to have changed since I updated the script, and I don't know how to modify the script to fix the logo. ― C.Syde (talk | contribs) 10:37, May 18, 2017 (UTC)

Wow, I didn't expect the code to become outdated so quickly… Looks like MACH-59330 has already made a fix for the logo - nice work! - OneTwoThreeFall ^talk 11:53, May 18, 2017 (UTC)

Fixing the global navigation bar

Welp. Since the release of the new global navigation bar design, it has caused issues with this CSS. I've managed to fix the worst of it, but it still doesn't look remotely like it did before the recent technical update. Like the search drop-down doesn't look the way it's supposed to. The FANDOM logo is no longer hidden, and the bell and speech bubble icons turn white when you hover over them. The same with the start a wiki button. Also the edit buttons are still wider than they were before the recent update. ― C.Syde (talk | contribs) 01:10, July 14, 2018 (UTC)

I've added a fix for hiding the new global navigation bar logo, but it's not perfect because the "Wikia" and "The Home of Fandom" logos are supposed to be next to each other, not under each other. The search bar is also far from fixed. ― C.Syde (talk | contribs) 03:16, July 14, 2018 (UTC)

Need help with fixing the arrow box of the search bar

Looks like either WikiaCommunityCentralTheme/code.css or WikiaNavigationBarStyle/code.css, probably the latter is causing the search arrow box to become oversized. I've been trying to make a fix for the arrow box, but I haven't had any luck because I don't know what's causing it to become oversized in the first place. So I can't remove the CSS responsible and replace it with a more specific selector. ― C.Syde (talk | contribs) 04:07, July 21, 2018 (UTC)

Yep, WikiaNavigationBarStyle is the culprit. Specifically, have a look at the .wds-global-navigation__search-submit:before styles: you might need to reduce the height to 14px or so and add background-position-y: -7px; to fix the arrow image position. Also, the box-sizing property on .wds-global-navigation.wds-search-is-active .wds-global-navigation__search-submit should be moved to .wds-global-navigation__search-submit to keep button size consistent whether search is active or not. Hope that helps! - OneTwoThreeFall ^talk 08:25, July 21, 2018 (UTC)

I've just tested it myself, however I can't see the entire arrow, so while the position has supposedly improved, it's still not satisfactory as I can't see the whole arrow. ― C.Syde (talk | contribs) 11:04, July 21, 2018 (UTC)

Did you add background-position-y? Arrow will be cut-off without that. - OneTwoThreeFall ^talk 11:14, July 21, 2018 (UTC)

I did indeed. But even that hasn't 100% fixed it. But it isn't too far short of being properly fixed. ― C.Syde (talk | contribs) 11:29, July 21, 2018 (UTC)

Ah, that's because you changed the width too. In that case, use background-position: 7px; (without "-y") so it'll adjust horizontally as well. - OneTwoThreeFall ^talk 11:36, July 21, 2018 (UTC)

All better. Thanks! :D

Glad I could help! - OneTwoThreeFall ^talk 11:44, July 21, 2018 (UTC)

More issues with the navigation bar that are being caused by a recent technical update

Looks like the styling for the navigation bar style is messed up again.

The wikia logo, the Games, Movies, TV, Videos, and Wikis links are now pushed to the left when they should be next to the search box. And the words "Search Fandom Developers Wiki..." should be next to the magnifying glass icon, instead of being pushed to the right. This causes a real issue when searching for pages, as you now often can't see the full names of the pages that are coming up in the search suggestions.

Although the current image displayed on the WikiaNavigationBarStyle page is outdated, as it dates from 2017, it is still relevant with showing what the navigation bar is supposed to look like with the CSS. Seems that the information in this thread has a connection with the damage that has been inflicted on this stylesheet. ― C.Syde (talk | contribs) 03:26, March 12, 2019 (UTC)

I made a small change to fix the search text alignment and to move the logo/links back closer to the centre - hopefully that gives the result you're looking for! I also did a bit of a clean up of old styles that weren't used any more - this shouldn't cause any issues, but feel free to undo if you prefer to keep those styles around for posterity. - OneTwoThreeFall ^talk 11:42, March 18, 2019 (UTC)

I tried putting the coding onto my testing wiki's CSS, which was this:

@import url("/load.phpmode=articles&articles=u:dev:WikiaNavigationBarStyle/code.css&only=styles");

But when I bypassed my cache, nothing happened. Am I doing something wrong? I think I might need a little help installing the code. Master of Memes 21:06, March 19, 2019 (UTC)

The import statement on the dev page was wrong and now is fixed (by DarthKitty, see Thread:22867#11)... check out WikiaNavigationBarStyle and re-copy the import CSS code to your CSS page.

Basically if you see an import from dev without the MediaWiki: part, it is probably old and wrong. -- Fandyllic (talk · contr) 19 Mar 2019 5:48 PM Pacific

Wikia logo tags don't fit the purpose of this stylesheet

I think it may be a good idea to move the CSS that adds Wikia logo tags after staff names on message walls/article comments to its own stylesheet. It doesn't make sense here, since the purpose of this stylesheet is to change the theme of the global nav and global footer to match Wikia's brand, not modify message walls/article comments. — /joritochip/tc 02:53, 9 September 2021 (UTC)

That was the main point. But the point was also to override some of the brand changes that were made when Wikia rebranded to Fandom in late 2016 - early 2017. I have considered renaming this stylesheet in the past. Or splitting this stylesheet up into two. ― C.Syde (talk | contribs) 03:07, 9 September 2021 (UTC)

Considering the fact that MediaWiki:WikiaCommunityCentralTheme/code.css has the same CSS to add Wikia logo tags, I think it would make sense to move the tag CSS to its own stylesheet and remove it from both stylesheets that currently have it. Also, you could use :is() in the CSS to significantly reduce the size of the tag CSS, if you wanted to. — /joritochip/tc 03:12, 9 September 2021 (UTC)

I am considering creating a new stylesheet containing just the Wikia logo tags. And move the CSS relating to the Wikia logo tags from this stylesheet to the new one. Even though part of the concept of this stylesheet was to replace the Fandom branding with the Wikia branding, which also applies to the logo tags. I would reduce the size of the tag CSS. And I'm not very familiar with :is().

I am against the idea of removing the Wikia logo tags from the WikiaCommunityCentralTheme stylesheet though. Because the default Fandom logo tags don't really fit with the concept of replicating the classic Community Central feel. And the Wikia logo tags were the default ones when Community Central still used the colours that are used in this stylesheet. ― C.Syde (talk | contribs) 05:03, 9 September 2021 (UTC)

I don't think it is ideal to have the same code duplicated across multiple stylesheets on the wiki... Although I guess I will leave it up to you, I would maybe consider removing it from both and then just adding the new stylesheet to a "See also" section of some sort and then let people decide if they care enough to have the Wikia tags or not. — /joritochip/tc 05:17, 9 September 2021 (UTC)

I believe that could be arranged. ― C.Syde (talk | contribs) 10:53, 9 September 2021 (UTC)