Posted by 
michal frackowiak on 1155986981|%e %b %Y|agohover, last edited by 
pieterh on 1249237628|%e %b %Y at %H:%M |agohover
Tags: color colour css customize layout themes
This document is a work-in-progress. Please contribute if you wish!
This is a howto that describes a way to create your own appearance for your site.
Introduction
A theme is a structured template, written in a markup language called Cascading Style Sheets (CSS), that controls the appearance and graphical layout of a page. The theme defines the font to be used, its size, the location of text, colors, and background images. However, themes are independent from the actual informational content of the page, so they make it possible to change the visual presentation without having to re-enter the actual text or other data.
Wikidot.com already offers a several basic CSS themes to choose from. But it is certainly never a bad idea to create your very own look for your site. The whole trick is to write new CSS code that is placed upon the existing themes so you do not have to write everything from scratch. E.g. to just change most of the colors you need to produce as much as 20 lines of code. And this HOWTO will tell you how.
There are collections of user-created CSS-themes on open wikis:
- http://themes.wikidot.com
- http://skins.wikidot.com (Has been migrated into themes)
Before you start your own theme you should have a look about possible and existing layouts!
Basics
When creating a new theme you will have to extend already existing themes. Custom themes are created per site and are available only within a given site.
To create new themes you will certainly need some CSS and design skills. You can learn a lot at sites like the following:
- w3schools - css
- tutorial and reference documents.
- Web 2.0 Design Guide - Why it works
- "It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry
- Zen Garden - The Beauty of CSS Design
- A demonstration of what can be accomplished visually through CSS-based design.
- css/edge
- A rejection of what's practical in favor of what's possible. complexspiral example
- ColorBlender
- makes it very quick and easy to create a color scheme for e.g. a website.
Step-by-Step Guide
Step 1: Manage the Site's Appearance
Go to the Site Manager (by default available at the page admin:manage). There should be a link on the side bar of your pages.
Click on Appearance » Custom Theme.
Of course you will need an administrator role within the Site.
Step 2: Create a Custom Theme
If you already have some custom themes defined you should see them listed. In order to create a new one:
- click create a new theme
- choose a name for the theme
- choose a theme you want to extend…
You can basically extend any theme available. However if you want to start from a plain look as much as possible than you should choose Base theme. Every theme on Wikidot.com extends the Base theme. This theme contains basic layout for pages, dialogs, forum etc. We will come back to it later.
But if you just want to change e.g. colors in an already available theme, then choose this theme (e.g. change colors in the Cappuccino theme).
At the moment suppose you want to extend the Base theme.
Choose an editing method
The box with the title 'CSS code' shows the CSS in your custom theme. It begins blank (it doesn't display the CSS from the theme you are extending, only the additional CSS you build on top of this. The additional code will appear after the end of the original theme and override existing definitions).
There are 2 ways to manage your CSS code: put it directly into the box or (which we recommend) keep all the CSS code in a separate special page on your wiki, and use the 'import' button to import it to the box. This way you can easily keep revisions of your theme as you do with wiki pages. The CSS is extracted from the first [[code]] … [[/code]] block in the specified page. The process of taking code from the 'sync' page isn't an automatic one - so each time you change it you have to use the custom theme administration controls and click "import" and "save theme".
So we recommend here to open a new window in your browser and create a (empty) page called css:mytheme (or any other that suits you). Put this name in the theme form.
The “save theme” function will not export the code back in your CSS wiki-page but record the content of the box as a custom theme. If you use this method you must:
- Edit and save your custom CSS code in your css:mytheme wiki page ( this is not an active CSS but just text data)
- Create or select your custom theme from manage site / Appearance / custom themes
- "import" the CSS data from css:mytheme wiki page
- "Save theme" in order to save CSS data in the real custom theme.
Select navigation elements
Decide if you want to use side/top navigation (menu) elements. Select whether your theme will use it or not?
Save the theme
Even if you do not have CSS ready yet - you will write it later.
Step 3: Write CSS for the Theme
This is the most important step. To do this properly you will have to learn first how the theme you are about to extend is implemented.
For the Base theme look at the CSS file: http://www.wikidot.com/common--theme/base/css/style.css
As you can see this CSS imports a few other styles too:
| http://www.wikidot.com/common--theme/base/css/odialog.css | used for dialogs (window pop-ups) |
| http://www.wikidot.com/common--theme/base/css/forum.css | basic forum look definitions |
| http://www.wikidot.com/common--theme/base/css/editor.css | wiki editor |
| http://www.wikidot.com/common--theme/base/css/autocomplete.css | used for autocomplete element - leave this alone |
| http://www.wikidot.com/common--theme/base/css/text_highlighter.css | defines colors for code highlighting (within [[code]] … [[/code]] blocks) |
If you aren't sure of the address of the CSS for the theme you are already using just check the source code on one or your pages (look for 'style type="text/css" id="internal-style")'.
Most probably you will only be interested in forum.css and odialog.css. But not too much anyway.
Structure of the page
Most likely you will need to know the DOM structure of the page i.e. what elements are there, what classes and ids etc. Each of the pages has more or less the same layout. You can learn this by:
- looking at the HTML source code (in your browser) for a page
- reading the Layout Reference document
- using the Web Developer extension for Firefox and clicking Outline » Outline current element
- exploring the DOM structure by using the DOM Inspector (Firefox has it) or equivalent tools
Learn by example
Let us see how the Flannel Ocean theme is defined - it directly extends the Base theme. The CSS is located here.
What the style actually does:
- defines layout for header, footer, side bar and page content
- defines font sizes and colors for elements such as headings, anchor links etc.
- changes colors for the dialog windows
- changes some colors for the forum
If you like the Flannel theme but you just want to change the colors you can simply extend this theme and redefine only the colors! The same for other themes of course. The easiest way in each case is just to copy&paste blocks of code from existing themes to your own theme.
Below is a list of selected themes and their styles
| Flannel | http://www.wikidot.com/common--theme/flannel/css/style.css |
| Flannel (no side bar) | http://www.wikidot.com/common--theme/flannel-no-side-bar/css/style.css |
| Flannel Ocean | http://www.wikidot.com/common--theme/flannel-ocean/css/style.css |
| Flannel Ocean (no side bar) | http://www.wikidot.com/common--theme/flannel-ocean-no-side-bar/css/style.css |
| Flannel Nature | http://www.wikidot.com/common--theme/flannel-nature/css/style.css |
| Flannel Nature (no side bar) | http://www.wikidot.com/common--theme/flannel-nature-no-side-bar/css/style.css |
| Cappuccino | http://www.wikidot.com/common--theme/cappuccino/css/style.css |
| Cappucino (side bar on right ) | http://www.wikidot.com/common--theme/cappucino-right/css/style.css |
Update theme
So let us assume you have embedded the CSS code within the page css:mytheme. Go to Site Manager » Appearance » Custom themes and open your new theme for editing. If you have the source page configured, just click import and see what happens.
Save theme of course.
Preview theme
To begin with a custom theme won't be assigned to any pages, so you won't immediately see the results of your work. You can preview the theme in 2 ways:
- you can assign the theme to a particular page category by going to Site Manager » Appearance » Themes (as you would do for any other theme)
- you can use ThemePreviewer module - just put it on your pages somewhere and it will allow you to preview available themes on your page.
Step 4: Test your Theme!
There are many browser quirks. What some browsers render properly others can not understand at all. Please test your theme with at least major browsers (Firefox, IE, Opera).
CSS Validator
Copy and paste your code into the Validator to check for errors.
Step 5: Assign Themes to Categories
When your theme is ready - go to Site Manager » Appearance » Themes and set the new theme for the page categories you want. And… that should be all!
General tips
- do not use pixel units (px) for font size; wherever possible (font size, layout) use font-based units (em) or percentage (%)
- keep your design clean and readable
- test CSS with different browsers
Authors
michal frackowiak. Please visit his/her userPage.
Yeah, that was helpful to me. Now, at least, I know HOW to get the CSS code onto the wiki… Whether or not it looks any good is a different question… :)
I added some links to the basics section. Maybe one can find the answer to this different question there. ;)
I spent hours looking for this info. Not a single tag mentioning color or how to tweak a theme! I better get studying CSS! Thanks for the free blog!
Just go to http://www.blogger.com/start and sign up for a blog there - they're a great blog provider. Using a wikidot site as a blog would end up being a hassle after a while .. lol
If anyone is interested in contributing to another site dedicated to CSS among other things, check out http://hard-drive.wikidot.com and apply for membership.
Cheers
— Shane | CycloDS Revolution | CycloDS Compatibility
Watch Avatar 3D. It is THE most spectacular film I've ever seen. It is really, genuinely EPIC.
No DVD or even the regular version of the same movie can match this in 3D on the big screen.
er…. how do i do that then?
BHGC NHGC
Yeah, it's been blocked from new membership by the other site admin I am working with. I'll see if I can fix that up now, or at least ASAP. Check back there in a few days.
Sorry about that…
EDIT: ok, ready for new members now :)
— Shane | CycloDS Revolution | CycloDS Compatibility
Watch Avatar 3D. It is THE most spectacular film I've ever seen. It is really, genuinely EPIC.
No DVD or even the regular version of the same movie can match this in 3D on the big screen.
Yeah, me 2!!!!!
Thank you so much!
I'm trying to add a logo to my wiki. I would assume I should do that in the css and I have been messing around wiht it but I can't seem to figure it out. I've tried copying the code for the background image in the header and tried changing the coordinates but my image wont show up.
If anyone is interested in doing it for me :) I just want the image found below in the upper left hand corner of the default Flannel layout.
Thanks much for any help.
In the custom themes section of admin:manage, make a new theme that extends the flannel theme and put the following code:
You will need to re-upload your image and make sure it ends in a valid for (ex: .jpg .gif .bmp) - This is your problem
-Tehraptor
Changed the universal background colour (yes spelt it correctly in the css, US style) and made sure there were no conflicts but refuses to change from default used by co. Any particular reason?
OK, this is basicac CHINESE! I don't get it, it is dificult to navigate.
I have a logo in my computer, how to I attach it next to the name of my wiki??????????
This will do the trick
do the following:
Maybe you need to adjust the width and height that are given by default.
Try it, if it does not work or stops working write me a message
Having struggled a lot to follow these instructions I thought a few extra pieces of information might help - so I've added them. That might be a bit presumptuous, but it's probably simpler than any other options. I won't be offended if someone edits/undoes my changes.
Fine, it is clearer now.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
"Theme" didn't t mean anything to me for a while and neither did CCS ( Cascading Style notes)
It might be good to start this page with something like this.(It may be off base — I am new.).)
A theme is a structured template that provides specific directions that control the appearance of pages. When complete, the template establishes the fount to be used, its size, the location of text, any back ground color, specific images to be used and their location. (and other things that I don't know.)
The theme starts with a basic template and modifies and adds to it, using a markup language called Cascading Style Notes (CSS)
Am I in the ball park? If yes, please modify it and place it at the top of the page.
Regards, Jack
Can we import CSS from other places, or must we use wikidot specific theme modification only? Thanks!
You can import any CSS using
in your CSS.
But remember that any import must go before the rest of the content.
Piotr Gabryjeluk
visit my blog
I don't know anything about CSS, but I managed to change the most colours in the Cappucino theme. But can any one please tell me how I can change the colour of the text on the pages???
Please! I need your help!
Have a look on the howto:
Basics contains some important links for the syntax of CSS:
http://community.wikidot.com/howto:design-your-own-css-theme
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
BHGC NHGC
in the theme creation page in site manager, it says the seperate css file is recommended, here it says directly into the box is recommended.
EDIT: here is the "extra" file named like ( "css:mytheme") recommended!
Both can be correct… the diffrence is the "mass of changes" you want to do in CSS.
If you have only ONE thing changed than the direct entry is enough to key in. For a "howto" it is easier to concentrate on little entries.
If you want to experiment more and more - than it is a very good idea to put your CSS code in extra pages - only to save them and to have the history(!) if something goes wrong. This was the first idea of Michal ( the developer of ikidot).
Hope this makes it clearer.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
Hey i want my wiki site pe egr .wi kidot.com to customize like ht tp: //w ww. c heap t-cav ta.com c hea est-c aver or like http: // ww w. tru harma.com can anyone help me out regarding this and also i want to know that how can i remove the search box from my wiki site, it will be done by customizing theme.
Any suggestions please.
Jeff Turner
Edit: cleared the links and names no spam on our community site forum with adsense to your wiki.
You have to read all about CSS theme. Go to search center ( left menu) and search for CSS or theme . This is the only way to change the layout.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
I am hoping someone can help me troubleshoot my css problems:
I am trying to get the css from RubyX template to work on my wiki: http://crazyhappenings.wikidot.com
Here is what it is supposed to look like: http://www.kendahlin.com/demo/rubyx/index.html#
I attached all the image files to this page: http://crazyhappenings.wikidot.com/css
I then took all the code from main.css and replaced the existing url reference with the urls from my wiki. That part seemed to work.
But, it appears to be the code that is messed up.
Is the base code getting in the way?
How can I troubleshoot this problem?
I've spent a long time reading up on css and I can't seem to get past this!
Any help would be much appreciated. Thanks.
regards, crazyhappenings
by the looks of it, you have just copied and pasted css from elsewhere.
Not a good idea :-(
Have a look at the css here
http://skins.wikidot.com/
replace some of the colours and urls and yourll be halfway there.
there are a number of pointers for sorting out what goes where when and why
this one helped me :-) http://psc2.wikidot.com/
Because the way the Base code is done, youll be hard pressed to get it exaclty the same, but i think you should get it close.
BHGC NHGC
I would recommend that if you are using Firefox 3 that you get the Firebug add-on which allows you to see proposed changes to your CSS on the fly and to try different things before you add these changes to your css:theme page (or whatever you've called it)
Both great suggestions. I thought the Base might be getting in the way, but there's no chance I'd be able to write my own CSS yet. And, I haven dl'ed the Firebug add-on. That's pretty cool. I have no content on the wiki yet though, so it doesn't matter what it's like. I've left my content elsewhere until I can sort this out. thanks again strathview and Phil! And, yes, I did jsut copy and paste the css - I guess I thought that was the point! oh well.
crazyhappenings
Is there a css tag line that wikidot uses for the table headers? Trying to find a way (if there is one) to change the bg color of the header when you do
the header blocks would be green, or red, or blue, or whatever.
A) You can use span tag!
[[span style="color:#F00; background-color: #FFFF00; padding-right:45px"]]Your text [[/span]] instead of CSS if you have only a few tables.
here is an example:
Row 1: Header 3 in green background - red text
Row 2: bla bla n
Row 3, cell 3:
[[span style="color:#F00; background-color: #FFFF00; padding-right:45px"]]Your text [[/span]]
A.1) New Table layout with style attributes:
Only to show what is possible( taken from howto: import-simple-excel-tables-into-wikidot
The King
Kong
Litespeed
S
Litespeed
Litespeed
Done with :
B) Where in the CSS this can be changed ?
I have only found out the css trick with own classes with the specific table layout using:
B.1.) Build an own Class for this and use a little additional "css:table-class" :
(taken from the old post :http://community.wikidot.com/forum/t-44316/custom-css-doesn-t-work )
Have a read!
B2.) Table codings with own classes
B.3) In action:
this is a hard job - where to store the "css:table" page used?:
——
Have a try!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
Yeah, I figured out how to do it that way. Was looking to see if there was a bit that I could put in the css for the theme and just have it be auto though. Like you have:
If you could do:
Just don't know what the <table something> part would be.
Sorry - I cannot detect in CSS any table related pre-defined colors for "headers" ..
Could be you have more chance… use firebug as strathview has mentioned..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
Web Developer (similar tool as Firebug) to the rescue! Here's some CSS to give you a nudge in the right direction.
The limitation you'll have is that you won't be able to use multiple colors in different header cells. You'll have to use one of the other methods described here to have the most control (I like Gerdami's Excel utility).
-Ed
Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog
Thanks so much! That's exactly what I was looking for.
Hi, Where should I get the CSS for Co and Webbish themes?
Any help is appreciated.Thanks
See my post earlier on about Firebug, I really do think that this is the easiest way to view the CSS of a theme and work out which elements to adjust and see the effect if you do change them. It's particularly useful when looking at CSS themes like the ones you've mentioned which lurk in the depths of wikidot and for which there isn't any CSS code printed in the documentation.
Rob
High I am new to wikidot and am trying to build a page. I want to be able to upload a background image and make it repeat over and over. How can I do this without being able to edit an existing code? I know some HTML but not much else.
deleted
i think you are talking about a background image, repeating as in say the quake theme. This is done using css as a background image, in custom themes.
Where you want to place it will depend on how it is done.
If you intend to mess with CSS then as myself and so many others have repeatedly said, get ff with the web dev addon, and start to play :-)
BHGC NHGC
Very helpfull. Thanks. I wish to find other ways to publish Excel. Maybe with "embed"? From zohoo sheets?
This present way asks a lot of work.
An example at http://georges42.wikidot.com/colores at bottom: a zoho sheet.
I wrote a snippet on how to embed zoho sheets here
Rob
Excellent job. Thanks.
I did find a how-to on customizing the input boxes for the editor, however… I was looking to see if anyone knows anything about how to edit other portions of the editor. I have a theme that's light text on a dark background and (I'm guessing) because of that I can't see any of the text in the alt mouseovers and popup windows that work with the wikidot page editor. White on white isn't exactly readable after all. ;) Any thoughts/ideas?
Thanks in advance!
Hi Zorya.
i "think" all the css relating to what you are after is in either:
http://zorya.wikidot.com/common--theme/base/css/editor.css
or
http://zorya.wikidot.com/common--theme/base/css/odialog.css
or both.
BHGC NHGC
I wrote a how to on customising the editor a short while back which is at http://community.wikidot.com/howto:customise-the-wikidot-editor
Edit: oh, re-reading your post I see that you found my how-to on this. I have updated the how-to to show how to change the dialog popup boxes for saving the page and the background colour and text colour of the hover tips.
Rob
Awesome. Thanks much guys!
Yep, was in the odialog.css file just needed to know where to look. The following did it for me. Thanks again!
I need some help on changing the header's picture for the Localize theme.
Could some one help me?
Thanks,
milene
If you just want to change the existing image, it's pretty simple. I would create a replacement for the leaf image with the same dimensions (293x220) and upload it to a page (your start page would be a good place for this since it's unlikely you'll ever delete it). Next, create a custom theme (i.e "Localize-extended") and choose "Localize" as the theme to extend. Then add this to the custom CSS box, changing the background-image:url to point to your new header graphic (I saw that you're using localize on your dimatch-hta site so I could give a good example).
Let us know if you need more help or want to change more of the style.
-Ed
Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog
It worked!
For now, I'm thinking about the site structure (it is supposed to be a site for presenting the study and, if possible, to have some private "working"pages).
But I'll let you know if I need more help (I think I will).
:)
thanks,
milene
I would like to use image files like this:
How can I upload the image files to the themes page?
if I upload to the mytheme page the file link is ../local-files/… but the link required is ../local-theme/… or something similar.
Are you talking about themes.wikidot.com or your own custom theme on your site?
my blog
squarkDesign - grafika komputerowa
rTechnologies - strony www
I am talking about my own custom theme on my site.
If you are adding for example a new image in the header of your site the code would be in the format shown below. I uploaded the .jpg file to my css:theme page and then added the reference to it in my custom CSS.
Rob
I already know that.
The thing is that the theme css is this one:
For the files to be used without the full link there should be a way to upload the files to this location:
<wiki_name> and <custom_theme_name> are generic.
""I already know that.""
No need to jump down my throat, particularly when I don't think you have quite got this right. What I said in my previous post is the correct way to do it. You do not upload the file for your header to a theme, you upload it to a page on your site and reference it in your custom theme CSS which just happens to be named /local--theme/{yourname}/style.css... as shown in my site below:
Rob
I wasn't jumping at you or anything.
Please don't look down on me. I know what I am doing. Although I am new to CSS I am learning fast. The things you told me were known to me. Also I know of Firebug and Web Developer and I am using them.
As a programmer I can come up with solutions myself. If you look at my first post I didn't ask how I can put an image in my css but if there is a way tu use it without the full url. I guess not.
oops! comment withdrawn ;)
Hello everyone.
In customizing my theme I wanted to move the breadcrumbs above the page title. Any suggestion?
Thanks in advance,
~WK
If it's for your Pharmament site, add position: and top: styles to your custom CSS:
-Ed
Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog
Worked like a charm!
As long as we don't change the size of the header it'll do just what I needed. And when we do I should be able to adjust the absolute positioning.
Thank you,
~WK
http://community.wdfiles.com/local--files/howto:design-your-own-css-theme/tema1.JPG
Looks well like a image for the" top"
Do you need a background - picture always available from an "open" storage?
or do you want to give it as a gift to the community?
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Wollen Sie Wikidot helfen im deutschen » Wikidot Handbuch ?
This is all really confusing. I've just managed to work out how to 'access' the code for customising the site (which when you know how…) but shouldn't we offer a separate page explaining how to do a few simple things, step by step? The existing pages sort of lost me where it started saying edit this code, and offered a blank box!
I can help write a really simple page if Michael wants to start one.
Docmartin, as part of a project to re-design the theme for another wikidot member I am currently preparing an online tutorial/walkthrough about getting started with designing themes and making changes to CSS. I am very guilty of taking longer over these things than I should, but before long the how-to page will be updated and hopefully will make it less confusing. I can see however that you have managed to create a new theme and have started to add custom CSS so that's good.
Where did this happen? If there some rogue instruction somewhere we can correct that easily.
Rob
Hi Rob,
Well, let me know if you want any input/ feedback on the page. The 'blank box' riddle appears after you go to:
manage site/
appearence/
custom themes/
create a new theme
The naive user (like me) chooses the theme to follow, eg basic, and then expects the code to appear in the box below. Only 'it never does'! We need some advice on how to get the 'appropriate' code there to edit. How about putting the code from the selected theme straight into the box?
Martin
Martin, ah I see what you mean. That box is blank because what goes in there is the custom CSS that is added to or, more often, changes the base and theme CSS, i.e the "cascading" in cascading style sheets. As you've now realised, that CSS is either typed in or imported from another page on the site (which is how I do it).
I'm not sure the best way of showing the base and theme CSS but I really don't think it should be put into that blank box when you try to create a new theme. It would no doubt cause coding issues and would actually probably confuse more than it would illuminate given that the base CSS and theme CSS run to hundreds and hundreds of lines.
For a new user I can see your point that it would be beneficial for them to see what the code in that blank box will build on. And perhaps the blank box could be re-titled something like "Add/import your CSS to change the theme". Many advanced users are using Firebug to view the CSS code and try changes on the fly and it is an invaluable tool, but most new users probably won't know about that. Unfortunately if the developers put the full CSS of the base and theme on a page it would make for a very long page indeed given the length of the stylesheets. I'll give this some more thought and see if there is something that we might add to the wishlist to show the CSS (perhaps in a new window) that would make this aspect of creating a new theme a bit more understandable.
Rob
"And perhaps the blank box could be re-titled something like "Add/import your CSS to change the theme"
Yes, Rob, I do see the problems with putting all the code in. After all, the aim is to offer something friendly. Retitling the box though would be worth doing. Not quite this, I suggest, as CSS is off-putting to us Dummies!
How about:
'Add additional custom instructions in the box to adapt the existing code of your chosen theme. See this page for more details.'
ie. add an extra guide page straight away. My suggestion is that the code is described with no 'assumptions' at all made! - eg. this (typo corrected) is how I communicated on the topic on the Philosophical Investigations site just:
Best,
Martin
i want this wikidot community theme
There's a bunch of themes available on http://themes.wikidot.com that you might want to look at.
As for using this theme… that's up to the guy that designed most of it! ;-)
— Shane | CycloDS Revolution | CycloDS Compatibility
Watch Avatar 3D. It is THE most spectacular film I've ever seen. It is really, genuinely EPIC.
No DVD or even the regular version of the same movie can match this in 3D on the big screen.
Can't see any reason why he'd say no, to be honest, but will wait anyway.
In the meantime, you should try setting up an admin:themes page for your CSS code. It means that any changes you make to your theme are recorded in the page's history.
— Shane | CycloDS Revolution | CycloDS Compatibility
Watch Avatar 3D. It is THE most spectacular film I've ever seen. It is really, genuinely EPIC.
No DVD or even the regular version of the same movie can match this in 3D on the big screen.
Well I don't know how to make a custom header, but I want to know how.
I do know a bit of CSS, but it's not like the one I do. I usually do CSS on a seperate page, then link it to the HTML file I'm doing.
Is there a way?
Have a look at http://community.wikidot.com/howto:fiddle-with-css-the-easy-way
But is there a way to just type a CSS code then the header image shows up? I just need to change the header, that's all.
There is, but what gerdami is giving you is a link on how to do your whole CSS in a right way, so later can be easier to you to make changes (because you will want to make more changes, for sure).
To change your custom header, you first have to upload the picture you want to be your header. the CSS would be:
#header {
background-color:put the color you want;
background-image: url(url of the picture);
height:8.3em;
padding-bottom:50px;
background-repeat: no-repeat;
}
#header h1 {
padding: 0em 0em 0em 3em;
}
You can change the values according to your needs.
But before doing anything, i suggest to read the link gerdami gave you. It will make your life much easier in the future.
The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell
Doesn't work
#header {
background-color:#000;
background-image: url (http://example.net/img/bg.gif);
height:8.3em;
padding-bottom:50px;
background-repeat: repeat-x;
}
#header h1 {
padding: 0em 0em 0em 3em;
}
@import url(http://www.wikidot.com/common--theme/shiny/css/style.css);
I put that in a wiki page.
its does work, (badly) but you haven't assigned that code block in
admin:manage..themes..apperance..use external theme
(oh… and you need to pet the refence to shinny first, not last.)
eg: http://psc.wikidot.com/css:mineipedia
BHGC NHGC
The black thing on that site is the header?
its your 48 by 48 pic and as you have placed it in the header , then yes its the header :-)
BHGC NHGC
How come I can still see the black-white gradient? You just overlapped it, but not change the whole thing.
You could always add a width:100%; to the #header rule as I've just done on the site that Phil gave the link to. Does that do what you want?
That's ALMOST what I need. :)
But after I put this and did what Phil said, and after I saved it.
The whole theme turns Basic or just plain white theme.
You have an error in your CSS. The @import should be immediately after the code type="css" but you have it before it so the import doesn't happen.
Can you post it here?
You page http://minepedia.wikidot.com/theme currently has this:
as you can see, the @import is before the [[code type="css"]] which is incorrect. It should be:
Ok I did that, but on the front page http://minepedia.wikidot.com/theme
It turns white, like basic plain style. http://i48.tinypic.com/2r5unnm.png
Just looking at this now, but one thing I've noticed: there is a gap between url and the bracket in background-image: url (http: so remove the space.
..apart from that everything seems OK and your code is working on one of my test pages here
Doesn't work… http://minepedia.wikidot.com/theme
I even did your external thinggg.
Make sure that in your admin:manage -> appearance -> themes that you have _default highlighted in the drop down list. Then select "Or use an external theme" and in the box it should be /theme/code/1. Then save the changes. Go back to the page and refresh (F5 or ctrl+r).
I can't believe it takes a week just to do a simple theme. :
Believe me it doesn't take a week to do a simple bit of CSS - if it did I'd be out of work! Though it can take a lot longer to get a successful theme working well. You must have got something wrong somewhere and I suspect it is in your site manager, particularly as using Firebug I can't see the CSS in your theme page being referenced and it should be. Please invite me to be a member of your site, then when I have joined promote me to admin and I'll sort it out for you. then I' will resign from the site.
Or, if you don't want to invite me to be a temporary member and admin of your site, take a screen shot of the themes page on admin:manage ->appearance so I can see what you've put there.
Thanks for making me a temporary admin of your site, it really helps to see what is going on.
In your site manager ->appearance -> themes you had the following in the "Or use an external theme" box:
If you look at my post a couple above you'll see I said that you should enter /theme/code/1 in that box. You hadn't done this which is why it didn't work. I have now changed it and it works.
The reason it needs that /theme/code/1 syntax is that it needs to look at the css in the first codeblock on that page. You had just given a link to the page itself which wasn't enough.
Oh thanks! :)
Thanks for helping me. :D
You're welcome. Now comes the fun with getting the rest of the design as you want it :)
How do you find what "section" the item is?
Like for the background image, it's #header, how do I find those like that?
If you are using Firefox as your browser a good way to do this and to learn CSS is to get an add-in called Firebug from http://www.getfirebug.com. It allows you to see what CSS is controlling what elements and it enables you to make changes on-the-fly and see what the result will be before you put the code into your CSS for real. It is one of the web development tools (along with paint.net and its add-on effects) that I would not want to be without.
How about removing the text on top of the page? I want to replace it with a logo. :)
Which text to you mean? If it is the white "Minepedia" text then this can be removed by adding this to your CSS:
but this will also remove the "minecraft" text as that is a background image on the #header h1 rule.
Check http://minepedia.wikidot.com/theme, the logo is stuck on the top left, how do I make it move myself?
I assume it's the "minecraft" text image which you set using the #header-extra-div-1 rule. You can move this further to the right by adding a margin-left property to your CSS as follows. I have just set it to 20% but you could use px, em or % settings to taste:
Thanks again, I was using padding. XP
How about moving it down a little?
Then use a margin-top property but make sure you also use the position:absolute which is important here:
Well I decided to remove the side-bar, but after I refreshed the theme went blank.
http://www.minepedia.wikidot.com/
Do I have to change the theme import?
Sorry, you've lost me, why are you thinking of changing it?
By the way, you have set an image as a background for the header which you've then used as the background for the top-bar. It would be much more efficient just to add the following to your CSS so that you can then use a different image as the background for the header:
Nah, I have to change the header and the background of the "place where you type."
I just want to remove the side-bar, but then the theme is back to normal.
To remove the side-bar go to admin:manage -> appearance -> navigation elements and remove the "nav:side" from the side-bar box. Then save.
That's the problem, after I did that, the /theme page didn't work with it.
I'd resigned from the site. Invite me again then promote me to admin and I'll have a look.
But apart from removing the space currently occupied by the side bar, what other changes are you expecting to happen. Everything else with your CSS seems to be working normally.
It's working with the CSS you have put into the theme page.
Thanks, it's really hard to know which code you need to use.
That's why in a post yesterday I suggested you get hold of Firebug (for Firefox). You do get to remember what rules and properties are used where, but Firebug makes it all so much easier and allows you to try changes and see the result.
How do you remove or move the search box?
Nevermind. :)