Help:Theme designer/gradients
Talk0this wiki
< Help:Theme designer

Added by Dr. Ball, M.D.A lot of users visit Wikia, and their screen resolutions all differ. What might look like a nice background to you, may look bad for a user with a larger resolution. Therefore, it's important to add gradients to your background before you upload it through the theme designer so the image will blend in with the background.
Contents |
What are gradients?
Edit

Added by Dr. Ball, M.D.Gradients are smooth transitions from one colour to another. There are two types of gradients: linear ones, which is specified by two points, and a color at each point, and radial gradients, which is specified as a circle that has one color and a focus (the center of the circle) that has another. In this tutorial, we'll use linear gradients.
Applying gradients
Edit



Added by Dr. Ball, M.D.For this tutorial, we'll be using the image shown on the right, the well-known Windows background. You'll also need a program which supports gradients. In this case, we'll be using the free GIMP program.
Step 1
Edit
Have a look at the right image, as you can see the blue background doesn't fit at all with the image background, and there's no transition at all between the two. To fix this, we'll first have to detect the background colour of the wiki. Take a screenshot of the page you're currently on (How to take a screenshot) and paste (CTRL+V) the image into GIMP.
Step 2
Edit
In GIMP, select the "Colour Picker" from the toolbox on the left (![]()
![]()
![]()
Step 3
Edit
Next, open the original background in GIMP (the windows desktop one). Choose the gradient tool (![]()
![]()
![]()
![]()
![]()
![]()
Step 4
Edit



Added by Dr. Ball, M.D.Put your mouse on the left edge of the image, in the center (see image). Now hold the mouse button and pull to the very center of the image, and release the button. Now there's a gradient on the image. Do the same for the bottom and the right.
Step 5
Edit
Now save the image, (File --> Save as...), and save the image as a .jpg file. In the dialogue menu that shows up, choose "Export". A new dialogue appears. There, check the "show example" checkbox. The filesize of the image will appear. Make sure it's below 100kB or you won't be able to save the background.
Step 6
Edit



Added by Dr. Ball, M.D.Go to Special:ThemeDesigner on your wiki and upload the image. Voilà, a nice looking background! Which blends in with the background!
See also
Edit
- Learn more about the theme designer
- Learn more about designing your wiki
Further Help & Feedback
Edit
- Browse and search other help pages at Help:Contents
- Check Help:Wikia Community Central for sources of further help and support
- Check Help:Contacting Wikia for how to report any errors or unclear steps in this article