Forum:Wikia Theme Change

Template:Forumheader

Introduction

This project was originally titled, 'Wikia Design Change'. As for why we changed this project's title? No idea, don't ask (The previous title was better, we know). In this thread you'll get to see how and why we'll be changing the wiki's design, feel free to ask questions down below!

General List:
1. Article Background
1.1. Article Border Décor
2. Wiki Background Image
2.1. Discussions Background Image
3. Header Navigation Glow
3.1. Site Logo Glow

---

Article Background

A few changes will be made to the Lunime Wiki's article background. These changes include, the background opacity and the border décor.

Part 1: Opacity

For this first idea, we will be using CSS to decrease the wiki's article background opacity. Simply put, we will make the page slightly see-through. Below is an example of the results we will be trying to achieve with this idea.

As you can see, the wiki's background can be seen through the article now. Looks pretty cool, doesn't it? The code used can be seen below.

The Code:

1|.page__main
2|.page__right-rail {
3|background: rgba(var(--theme-page-background-color--rgb), 0.8);
4|}

Within this code, you will see that we added in another selector '.page_right-rail'. If you're wondering what this is for, it is the selector the wiki's side rail. The reason this is selector is added in was because we started another project on the design of our wiki's side rail, for more info head to this page.

Part 2: Border Décor

After the installation of this code, we can now move on from step one and on to step two, Border decoration. For the borders, we will be adding a light glow, thin solid border and rounded edges. The colors we will be using are, #fff and #00cdd0.

If you look back to the image in part one, you will see that the sides of the article background have a light red glow. That is what we will be trying to achieve with the next code below.

The Code:

1|.page {
2|border: 1px transparent;
3|border-radius: 1px;
4|-moz-box-shadow:0 0 30px #00cdd0;
5|-webkit-box-shadow:0 0 30px #fff;
6|box-shadow:0 0 25px #00cdd0;
7|}

The code on lines 4 and 5 aren't entirely necessary, but we'll be adding them in to make the glow slightly more visible. The design changes for the wiki's article background are now complete, moving on.

---

Wiki Background Image

Not much code will be needed for this change. However, that depends on which course we plan on taking. There are two possible options for the Lunime Wiki's background image, the first choice uses the Theme Designer while the second choice uses CSS.

Option 1: Theme Designer

Surely most of you know what the Theme Designer is? If not, head to Fandom's help page on Theme Designers. Below is an image showing what a Theme Designer looks like, as an admin of a community, you can find a link to the Theme Designer in the My Tools menu on the toolbar or in the Admin Dashboard.

This option is simple, we just need to upload an image to Background Image which is under the Header & Background section of the Theme Designer. The good thing about choosing this option is that is easy and quick. However, the options are limited. Using CSS gives us a few more possibilities.

Option 2: CSS

As explained above, using CSS and adding in a background gives us more possibilities. For example, we could use a gif as the wiki background image. This would make it look way cooler, gives the users more to look at.

The Code:

1|body.mediawiki {
2|	background: url('https://static.wikia.nocookie.net/lunime/images/b/b5/Site-background-light');
3|	background-attachment: fixed;
4|	background-size: cover;
5|}

The Code:

The Code:

---

---

Conclusion

That will be all the changes upcoming in the Wikia Theme Change project, if you would like to recommend more changes or an entirely different project in itself, head to our Wikia Updates Board.

References

Please post new topics at the bottom of the page by clicking this link to add a new section

REMEMBER TO USE ~~~~ TO SIGN YOUR MESSAGE!

Template:-