CSS Gadgets

**Warning: CSS Gadgets does not function in the comments.** Neither do they work in your Sandbox nor talk page.
To test out your coding, please go to your common.css.

## Intro

CSS is a vital tool that can be used to customize a wiki through the Wikia:CSS page on the Admin Dashboard. With it, you can add certain features to make the wiki experience more enjoyable and personalized. **The code here provided is free, however, editors should credit people's code that they use, and users should give credit with a:** /\* CSS comment \*/

**NOTE:If the code is not working in some places, please try adding `!important` to the attribute right before the semicolon. If this still doesn't work, please contact a Staff member!**

### Using These Codes

To use these codes, you must be an administrator. Go to the following page on your wiki: **MediaWiki:Common.css** (https://wiki-name.fandom.com/MediaWiki:Common.css replacing **wiki-name** with your wiki's name) and copy and paste the code from here.

If you do not have access to the MediaWiki:Common.css, submit a request on an admin's message wall. Include the code, what it does, and any found bugs/errors.

*You can also edit your own common.css and add these codes.*

## An Important Note

When you input the codes into **MediaWiki:Common.css**, you are *changing* other users' experiences on your wiki. Some codes may affect more than what intended. Please report all bugs at an admin's message wall so that we can fix them. NEVER import code onto your wiki if you don't know what it does.

## Codes

Here is a list of some beginner CSS add-ons.

### Importing Fonts

This is code that you copy and paste onto your wiki CSS that gives you fonts.

```
@import url('https://fonts.googleapis.com/css?family=FONT+FAMILY|FONT+FAMILY|');

```

To use the above code, replace FONT+FAMILY with the name of the font. Use +'s as space signs and | to separate fonts! Browse Google Fonts for a wide selection of fonts!

Instead of copying the codes above, you can also add fonts in Google Fonts and then click on the CSS import codes to copy to clipboard.

### Username Colors and Fonts

To change the color of a username, copy and paste this onto your wiki CSS:

```
a[href$=":USERNAME"],
a[href$="/USERNAME"] {
color: COLOR !important;
font-weight: FONT-WEIGHT !important;
font-family: FONT-FAMILY !important;
text-shadow: TEXT SHADOW !important;
}

```

Replace USERNAME with your username and replace other capitalizations with the code for Fonts, Text Shadow, and Bolding. You can also add more attributes or CSS Animations, too!

### Custom Lists/Bullets

To make a list on your wiki use certain characters, copy and paste the following code:

```
/\*Code Created by Cleverduck09\*/
ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

li {
 padding-left: 16px;
}

li::before {
 content: "CONTENT"; /\* Insert bullets\*/
 padding-right: 8px;
}

```

Replace 'CONTENT' with whatever you want as your content! This could be '❈', '•', '◦' ,'‣', '∙', '«', or '»', for example! You can also change the color by adding more attributes after `padding-right: 8px;`.
Now, to make a list, type in:

```
<ul>
<li>Bullet One</li>
<li>Bullet two</li>
<li>And so on</li>
</ul>

```

or using wikitext:

```
*Item one
*Item two
*And so on

```

### Custom Wiki-Wide Cursors

The following code will give you a wiki-wide custom cursor. Simply replace the `LINK` with the link to the file which you want to be the cursor! The first `LINK` is for a non-clickable cursor. The second `LINK` is for a clickable cursor.

```
body,
.Message\_\_content,
.wds-dropdown,
.wds-tabs\_\_tab,
.wds-dropdown\_\_toggle,
.client-js{
 cursor: url('LINK'), auto !important;
}

a,
area,
button,
[role="button"],
.ActionItem,
.Message\_\_title,
.oo-ui-labelElement-label,
.sitedir-ltr input,
.rich-text-editor\_\_toolbar\_\_icon-wrapper,
.rich-text-editor\_\_toolbar\_\_icon-controls {
 cursor: url('LINK'), pointer !important;
}

```

### Custom Tabs

The following code will give you wiki-wide, customized tabs. Copy and paste the code into your wiki's CSS.

```
/\* Customizing Tabber \*/
.tabbertab {
 border-top: \_px solid COLOR !important;
 border-bottom: \_px solid COLOR !important;
 border-left: \_px solid COLOR !important;
 border-right: \_px solid COLOR !important;
}

/\* add spaces to tabview tabs \*/
.tabberlive > ul.tabbernav > li {
 margin-right: 2px;
}
 /\* not applying on the last tabview tabs \*/
 .tabberlive > ul.tabbernav > li:last-child {
 margin-right: 0;
 }

.tabbernav {
 background: transparent;
 border-bottom: 0 !important;
 padding: 3px 0 !important;
}

ul.tabbernav li a {
 -moz-border-radius-topleft: \_px !important;
 -moz-border-radius-topright: \_px !important;
 background: COLOR !important;
 border-top-left-radius: \_px !important;
 border-top-right-radius: \_px !important;
 border: \_px solid black !important;
 color: COLOR !important;
 font-size: \_px !important;
 font-weight: normal !important;
 margin-left: 0 !important;
 padding: \_px 0.5em !important;
 position: relative;
}

ul.tabbernav li.tabberactive a {
 background-color: #014604 !important;
 border: \_px BORDERTYPE COLOR !important;
 color: COLOR !important;
 cursor: default;
 font-size: \_px !important;
 font-weight: bold !important;
}

ul.tabbernav li.tabberactive {
 line-height: 0 !important;
}

 ul.tabbernav li.tabberactive:first-child a {
 margin-left: 0 !important;
 }

.tabbertab .ajax-poll {
 border: none !important;
}

.tabberlive .tabbertab h2,
.tabberlive .tabbertab h3 {
 display: block !important;
}
/\* End of Customizing Tabber \*/

```

Replace all the capitalized words with the attribute name, and replace all the sections that have \_px with a number.

### Custom Wiki-Wide links

To change the color, text-shadow, etc. of links throughout your wiki, input the following code to your Wiki's CSS:

```
/\*Code Credit to Cleverduck09\*/
a:link { /\*What the link looks like when you haven't clicked/hovered on it\*/
 color: CODE;
 background-color: CODE;
 text-decoration: CODE;
 text-shadow:CODE;
}
a:visited { /\*What the link looks like when you've visited it\*/
 color: CODE;
 background-color: CODE;
 text-decoration: CODE;
 text-shadow:CODE;
}
a:hover { /\*What the link looks like when you're hovering on it\*/
 color: CODE;
 background-color: CODE;
 text-decoration: CODE;
 text-shadow:CODE;
}
a:active { /\*What the link looks like when you click it\*/
 color: CODE;
 background-color: CODE;
 text-decoration: CODE;
 text-shadow:CODE;
}

```

Replace all `CODE` with the proper formatting for that attribute. Remember to look at the /\*notes\*/ to see what version of the link text you're editing!

### Custom Scrollbar

To get a custom scrollbar on your wiki, put in the following code into the Wiki CSS:

```
/\*Created by Anonminati, modified by Cleverduck09\*/
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px COLOR;
 background-color: COLOR;
 background-size: cover;
 border-radius: 10px;
}
::-webkit-scrollbar {
 background-color: COLOR;
 width: 15px;
}
::-webkit-scrollbar-thumb {
 background-color: COLOR;
 background:COLOR;
 border-radius: 10px;
 background-size: cover;
}

```

To use it, replace COLOR with a color of your choice! You can also add more attributes.

### Custom Wiki-Wide Headers

To make wiki headers look a certain way all the time, input the following code into the wiki CSS:

```
/\*Code Created by Cleverduck09, with help from the Fandom Developers Wiki\*/
.body .WikiaPage .WikiaArticle .mw-content-text {
 ATTRIBUTES;
}

.FANDOM-H2-CC,
.WikiaArticle h2 {
 ATTRIBUTES;
}

.WikiaArticle h3 {
 ATTRIBUTES;
}

.WikiaArticle h2 + h3 {
 margin-bottom: 15px;
}

```

To use the above code, replace `ATTRIBUTES` with CSS Attributes!

## Smooth Page Load

When put into your wiki CSS, the below code will create an animated load on your page!

```
/\*Code Credit to Cleverduck09\*/
@keyframes textanimation {
 from{opacity:0;}
 to {opacity:100}
}
body,
.Message\_\_content,
.wds-dropdown,
.wds-tabs\_\_tab,
.wds-dropdown\_\_toggle,
.client-js{
 animation-name:textanimation;
 animation-duration:1s;
 animation-iteration-count:1;
 animation-delay:0s;
}

```