Posted by rylangrayston on 12 Nov 2008 18:00, last edited by Brunhilda on 28 May 2010 19:21
Ok at the bottom of the page is a summary of this long round - about tutorial, so if
you have some experience I would head straight there.
If you are unfamiliar with wikidot then this this will take you on a bit of a tour
where you can get more familiar with some wikidot resources, and learn how to
change the background while you're at it.
Some great resources
I suggest you open all of these into new tabs before you begin the tutorial.
First off here is a site page that lets you change CSS backgrounds on the fly:
[http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image]
Also if you don't understand what I mean by "import your Wiki CSS page " or
the basics of how and where to edit you sites css go here:
http://community.wikidot.com/howto:design-your-own-css-theme
And if you want an easy way to chose colours just go here (VERY USEFUL!!)
http://colorblender.com/
This tutorial will use http://tudars.wikidot.org/ as a specific example
That way I can use screen shots!
Let's Begin
After choosing the shiny theme with no side bar and making a custom theme to set the background to black
I was left with this…
As you can see there is a gradient image behind the tile that looks great accept for the
large white part at the bottom which doesn't blend into my black background or pictures' background at all.
Lets see how we can change this.
While at the page in question click, ( from your browser's menu) View and then Source.
This will show a page with the code for your site.
In the code you can see where the CSS is coming from.
Look for something like this:
<style type="text/css" id="internal-style">
@import url(http://static.wikidot.com/common--modules/css/monetize/textlinkads/MonetizeTextLinkAdsModule.css);
@import url(http://static.wikidot.com/common--theme/base/css/style.css?0);
@import url(http://static.wikidot.com/common--theme/shiny/css/style.css?0);
@import url(http://static.wikidot.com/common--theme/shiny-no-side-bar/css/style.css?0);
@import url(/local--theme/test2/style.css?16);
</style>From this code you can see that the CSS that loads the shiny theme is at
http://static.wikidot.com/common--theme/shiny/css/style.css
go ahead and click the link above you will see a page with the CSS for the shiny theme.
Of course if you are using a different theme you will find a different URL in the source code of your site.
Now in the CSS theme code look for the part that sets the background image.
It looks something like this:
div#container-wrap {
background-image: url(/common--theme/shiny/images/body_bg.png);
background-repeat: repeat-x;
}If you want to know more about the layout of
the CSS themes check out this interactive page.
(screen shot to the right)
http://wikidotthemes.wikicomplete.info/theme-structure
You can see from this part of your CSS theme code that
the location of this image is /common—theme/shiny/images/body_bg.png
so pasting that path on to your site name is the images location. Like this:
h ttp://site name.wikidot.com/common—theme/shiny/images/body_bg.png
or for the Tudars site:
http://tudars.wikidot.com/common--theme/shiny/images/body_bg.png
If you enter that link into your browsers url
It will take you to a very empty looking page but pay attention. On that page is the pic,
it's just VERY skinny because the browser just widens it with [[code]] background-repeat: repeat-x; [[/code]]
Its like only 3 pixels wide!
It might be easier to see if you click and drag to highlight it.
This is very useful because we are only looking to change the big white part at the bottom.
The gradient and grey bar are part of why I chose the shiny theme.
So by saving that image to your hard drive with a right click, "Save image as"
you can open it up with your favorite image editor (The Gimp) and take off the white bottom.
save that image as some nice descriptive name like container-wrap-back_ground.png
then go to your wiki css page, click files at the bottom and upload that new file.
then edit that wiki css page by placing the image in it like this:
any wiki page with an image file attached to it will
place the image at the page url /imagename
But only if the file displayed on the page!
but to make it easy just click save, highlight the image and right click properties,
then just copy its url
then paste that url in your custom theme css file like this:
div#container-wrap {
background-image: url(http://tudars-wiki.wikidot.com/local--files/colabrative-css-for-the-tudars-wiki/container-wrap-back_ground.png);
background-repeat: repeat-x;or if you just don't want any image at all, insert this in your custom theme:
div#container-wrap {
background-image: none;
}now simply go to your http://site_name.wiki.com/admin:manage
and import the new changes from your css wiki page
and refresh
this was a pretty long tutorial for just changing your background image
but hopefully you clicked all the links and learned your way around wikidot.