How to make the navigation template look like the mock-ups and make colors dependent on wiki theme? | Fandom

Birmations·5/8/2025 in Wiki Design & SEO Advice

How to make the navigation template look like the mock-ups and make colors dependent on wiki theme?

I've been updating the navigation templates with a new design, specifically Star Skins navigation, to have the inside of the navigation look like one of the mock-ups shown below (I haven't decided on which mock-up I would end up using, but I want to try them both out):

However, I am having a hard time trying to make the tables under the Bear "header" to be more spaced out (like mock-up #1), or be combined into one (like mock-up #2). I did try using some attributes but I have been unsuccessful at solving the problem (below is what the template currently looks like).

What coding would I need to change/add to make the template look like the mock-ups?

Lastly, how would I go about making the colors on navigation templates change depending on the wiki theme? I assume it would be something similar to the code given to me for notice templates.

.notice-box {
  color: #fff;
  border-radius: 5px;
  margin-bottom: 7px;
  width: 70%;
  border: 1.5px solid var(--theme-accent-color);
}
.theme-fandomdesktop-dark .notice-box {
	background-color: #332C18;
}
.theme-fandomdesktop-light .notice-box {
	background-color: #2A5976;
}
/* Notice Templates */

2

Muchos·5/9/2025

Hello,

You can use CSS/border-spacing. It applies directly in the styles of your table element.

border-spacing - CSS: Cascading Style Sheets | MDN

border-spacing - CSS: Cascading Style Sheets | MDNMDN Web Docs

About the colors can change depending the wiki theme, that works as you said. That's why it'd be better to apply all your styles through a styling class rather than with the style attribute.

2

Oot42·5/9/2025

As for the color changes, you can just make the rules for one mode (doesn't matter which) and then override the things that are different in the other mode afterwards.

So you don't really need to define both mode's colors with two extra rules like shown above.

To take that example code from above, it can be optimized like this:

.notice-box {
  color: #fff;
  border-radius: 5px;
  margin-bottom: 7px;
  width: 70%;
  border: 1.5px solid var(--theme-accent-color);
  background-color: #332C18;
}
.theme-fandomdesktop-light .notice-box {
  background-color: #2A5976;
}

The first part defines everything for .notice-box, including the colors for one mode (here: dark), then the following rule overrides the background color for the other mode (here: light). You can also do it the other way around, it doesn't matter.

Unrelated to your question, I took a look at the Star Skins template you linked.

You use a lot of deprecated html in those tables. While you're working on them, you should replace them with CSS. In particular, these are:

<center> </center>

used 79 time --> use text-align: center instead

<font color="#....."> </font>

used 142 times --> use color: #...... instead

There is also a lot of repetition (all those inline styles for every table and cells). This could be greatly optimized by using classes and move all styles to Common.css.

Not only would it save bytes and therefore load time, but it would also make your template code much easier to maintain, removing lots of unneeded repeated clutter.

Since it looks like you are doing lots of layout work and optimizations which includes CSS lately, I highly recommend you install the dev tool PortableCSSPad.

It lets you apply and test your css rules directly on every page or template, even in preview, and you see the result instantly on the page without editing or saving anything. It's probably the most useful thing the dev wiki offers when it comes to design helpers.

What do you think?