Design Your Own CSS Theme

Posted by michal-frackowiak on 19 Aug 2006 11:29, last edited by PeterMortensen on 30 Aug 2015 16:30

: color colour css customize layout themes

rating: +134

This document is a work-in-progress. Please contribute if you wish!

This is a how-to 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:

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 two 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:

  1. Edit and save your custom CSS code in your css:mytheme wiki page ( this is not an active CSS but just text data)
  2. Create or select your custom theme from manage site / Appearance / custom themes
  3. "import" the CSS data from css:mytheme wiki page
  4. "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

This base CSS includes styles for dialogs (window pop-ups), forums, the wikidot editor, autocomplete and code highlighting near the bottom of the file, all of which you can style in your custom theme.

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")'.

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

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 two 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, Internet Explorer, and 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 michal-frackowiak . Please visit his/her userPage.

page 1 of 61
Nice
(account deleted) 05 Mar 2007 21:46

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… :)

by (account deleted), 05 Mar 2007 21:46
a different question
Goon Goon 06 Mar 2007 10:53

I added some links to the basics section. Maybe one can find the answer to this different question there. ;)

by Goon Goon , 06 Mar 2007 10:53
Re: a different question
xXx Lofty xXx xXx Lofty xXx 07 Jan 2012 23:53

Can anyone tell me how to simply change the background of an existing CSS theme??

by xXx Lofty xXx xXx Lofty xXx , 07 Jan 2012 23:53
Re: a different question
(account deleted) 08 Jan 2012 00:41

It would be easier to help you if you provided a link to your site or told us which theme you are using.

by (account deleted), 08 Jan 2012 00:41
Re: a different question
Helmut_pdorf Helmut_pdorf 08 Jan 2012 07:26

I assume your site is [http://xplicit.wikidot.com/start] ?

Looks good - what do you want to change ?

Or - have you find it yourself and is the change done ?


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 08 Jan 2012 07:26
Re: a different question
RobElliott RobElliott 08 Jan 2012 08:43

@Lofty, I see you are using the orange-black theme from the Themes site. To change this you will need to set up a page on your own site to hold the changes. You might want to read my post at http://community.wikidot.com/forum/t-422137/need-some-help-with-css#post-1330975 which explains what you need to do.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 08 Jan 2012 08:43
Re: Nice
muneebqadar muneebqadar 30 Nov 2016 09:58

I am really impressed by your research on CSS web design templates. I will definitely looking forward to use this.

by muneebqadar muneebqadar , 30 Nov 2016 09:58
Easy and intuitive...NOT
gently gently 27 May 2007 11:00

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!

by gently gently , 27 May 2007 11:00
Re: Easy and intuitive...NOT
leiger leiger 07 Sep 2007 00:09

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


~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

by leiger leiger , 07 Sep 2007 00:09
Re: Easy and intuitive...NOT
Phil Chett Phil Chett 19 Sep 2007 23:55

check out http://hard-drive.wikidot.com and apply for membership.

er…. how do i do that then?

Last edited on 24 Oct 2007 07:51 by Phil Chett
by Phil Chett Phil Chett , 19 Sep 2007 23:55
Re: Easy and intuitive...NOT
leiger leiger 25 Oct 2007 00:01

er.... how do i do that then?

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 :)


~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Last edited on 13 Nov 2007 11:13 by leiger
by leiger leiger , 25 Oct 2007 00:01
Re: Easy and intuitive...NOT

Yeah, me 2!!!!!
Thank you so much!

by Sharona Zicherman Sharona Zicherman , 31 Dec 2009 18:43
Logo
christmas4kids christmas4kids 31 Dec 2007 21:24

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.

http://christmas4kids.wikidot.com/local--files/start/logo

Thanks much for any help.

by christmas4kids christmas4kids , 31 Dec 2007 21:24
Re: Logo
tehraptor tehraptor 22 Feb 2008 21:37

In the custom themes section of admin:manage, make a new theme that extends the flannel theme and put the following code:

#header{
 /*background: none;*/
 height: 9em;
 border-bottom: 3px solid #800202;
 background-image: url(http://christmas4kids.wikidot.com/local--files/start/logo);
 background-repeat: repeat-x;
 background-position: 0 2.1em; 
}

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

by tehraptor tehraptor , 22 Feb 2008 21:37
Re: Logo

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?

by Lt Commander Chris Lt Commander Chris , 09 Mar 2008 16:23
Re: Logo
Supermom Supermom 02 May 2008 20:46

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??????????

by Supermom Supermom , 02 May 2008 20:46
no title in email

This will do the trick

do the following:

  • Paste the following code in a simple word processor like notepad
[[include :css-competition:include:easylogo |
logo-image = YOUR-URL |
logo-width = 500px |
logo-height = 150px |
header-height = 200px |
]]
  • Replace in the following URL YOURSITE with the name of your site http://YOURSITE.wikidot.com/nav:side
  • Navigate to that link
  • Select "files" from the action-buttons at the bottom of the page
  • Upload (following the instructions) your logo.
  • If the instruction "refresh list" appears click on it
  • Now there is probably a list (One item) with "info|option" at the end
  • Click on info
  • Select from the popup-window the URL from the image, its under the picture on the second line and starts with "http://…"
  • Press ctrl-C to copy it
  • Close this window by pressing the close button
  • Go to the word processor and replace YOUR-URL with what you just copied
  • Now select the code from the word processor and press ctrl-C
  • Go to your browser and select "edit" from the action-buttons at the bottom of the page
  • go to the end of the code
  • Paste (ctrl-V) the the code
  • Save the page, press Ctrl-S or "save"

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


A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

by Steven Heynderickx Steven Heynderickx , 10 Jan 2010 23:08
Re: Logo
Thomas Crage Thomas Crage 11 Mar 2024 00:48

This has no effect if the other members do not have the picture saved.
This is useless

by Thomas Crage Thomas Crage , 11 Mar 2024 00:48
Additional info
Robert W Robert W 13 Mar 2008 13:56

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.

by Robert W Robert W , 13 Mar 2008 13:56
Re: Additional info
Helmut_pdorf Helmut_pdorf 13 Mar 2008 14:24

Fine, it is clearer now.


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 13 Mar 2008 14:24
Definition of theme and CSS
Jack Button Jack Button 23 Mar 2008 16:30

"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

by Jack Button Jack Button , 23 Mar 2008 16:30
Importing CSS themes?
sithkhan sithkhan 24 Mar 2008 10:07

Can we import CSS from other places, or must we use wikidot specific theme modification only? Thanks!

by sithkhan sithkhan , 24 Mar 2008 10:07
Re: Importing CSS themes?
Gabrys Gabrys 26 May 2008 05:33

You can import any CSS using

@import url(http://some.place.com/style/some-stylesheet.css);

in your CSS.

But remember that any import must go before the rest of the content.


Piotr Gabryjeluk
visit my blog

Last edited on 26 May 2008 05:34 by Gabrys
by Gabrys Gabrys , 26 May 2008 05:33
Re: Importing CSS themes?
(account deleted) 13 Dec 2010 18:14

Hey I think you mentioned that when we import CSS from other places the import should go before the rest of content. I am trying to import CSS themes i downlaoded from otehr websites, but i do not know how to upload the entire content as i know that for the theme to work all files (not jsut the CSS) should be uploaded while keepign structure of folder. Can you tell me how i should proceed.?

Thanks

by (account deleted), 13 Dec 2010 18:14
Re: Importing CSS themes?
RobElliott RobElliott 13 Dec 2010 18:45

You can't use a folder structure on Wikidot sites as you would do with a "normal" website.

To use a theme from another site you would need to import the CSS as a file on your site somewhere and then point to it in the @import rule at the top of your custom CSS. (Although I would normally put the CSS rules onto their own page inside [[code type="css"]] .. [[/code]] tags and point to the codeblock on that page).

You would also need to upload to the page holding your imported CSS any images that the theme required and make sure that in the CSS the links to them - ackground-image:url (/local--files/pagename/imagename.jpg) - is correct.

You then need to bear in mind that importing CSS from another site will almost certainly not work without quite a bit of manual work after that: the rule names we use here are usually different and I have never known an imported css from outside Wikidot work first time.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 13 Dec 2010 19:54 by RobElliott
by RobElliott RobElliott , 13 Dec 2010 18:45
Re: Importing CSS themes?
RobElliott RobElliott 13 Dec 2010 20:29

Have a look at http://vineyard.wikidot.com/supernatural:css which is just a test page. It imports its css from http://vineyard.wikidot.com/supernatural:css2 then adds a bit more. You'll see the syntax used for the @import.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 13 Dec 2010 20:29
Text Colour?
CTexT CTexT 20 Jun 2008 07:20

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!

by CTexT CTexT , 20 Jun 2008 07:20
Re: Text Colour?
Helmut_pdorf Helmut_pdorf 20 Jun 2008 07:58

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 20 Jun 2008 07:58
Re: Text Colour?
Phil Chett Phil Chett 20 Jun 2008 08:19
#main-content{
 margin-right: 0;
 margin-left: 16em;
 padding: 0 1em;
 color:green;
}
Last edited on 20 Jun 2008 08:20 by Phil Chett
by Phil Chett Phil Chett , 20 Jun 2008 08:19
mistake
wowstrategy wowstrategy 02 Jul 2008 06:44

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.

by wowstrategy wowstrategy , 02 Jul 2008 06:44
Re: mistake
Helmut_pdorf Helmut_pdorf 02 Jul 2008 07:11

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 02 Jul 2008 07:31 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 02 Jul 2008 07:11
Themes
(account deleted) 04 Aug 2008 18:33

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.

Last edited on 05 Aug 2008 06:47 by Helmut_pdorf
by (account deleted), 04 Aug 2008 18:33
Re: Themes
Helmut_pdorf Helmut_pdorf 05 Aug 2008 06:49

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 05 Aug 2008 06:49
Looking for help troubleshooting CSS
crazyhappenings crazyhappenings 06 Aug 2008 20:22

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

Last edited on 06 Aug 2008 20:23 by crazyhappenings
by crazyhappenings crazyhappenings , 06 Aug 2008 20:22
page 1 of 61

Related articles

Comments

page 1 of 61
Nice
(account deleted) 05 Mar 2007 21:46

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… :)

by (account deleted), 05 Mar 2007 21:46
a different question
Goon Goon 06 Mar 2007 10:53

I added some links to the basics section. Maybe one can find the answer to this different question there. ;)

by Goon Goon , 06 Mar 2007 10:53
Re: a different question
xXx Lofty xXx xXx Lofty xXx 07 Jan 2012 23:53

Can anyone tell me how to simply change the background of an existing CSS theme??

by xXx Lofty xXx xXx Lofty xXx , 07 Jan 2012 23:53
Re: a different question
(account deleted) 08 Jan 2012 00:41

It would be easier to help you if you provided a link to your site or told us which theme you are using.

by (account deleted), 08 Jan 2012 00:41
Re: a different question
Helmut_pdorf Helmut_pdorf 08 Jan 2012 07:26

I assume your site is [http://xplicit.wikidot.com/start] ?

Looks good - what do you want to change ?

Or - have you find it yourself and is the change done ?


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 08 Jan 2012 07:26
Re: a different question
RobElliott RobElliott 08 Jan 2012 08:43

@Lofty, I see you are using the orange-black theme from the Themes site. To change this you will need to set up a page on your own site to hold the changes. You might want to read my post at http://community.wikidot.com/forum/t-422137/need-some-help-with-css#post-1330975 which explains what you need to do.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 08 Jan 2012 08:43
Re: Nice
muneebqadar muneebqadar 30 Nov 2016 09:58

I am really impressed by your research on CSS web design templates. I will definitely looking forward to use this.

by muneebqadar muneebqadar , 30 Nov 2016 09:58
Easy and intuitive...NOT
gently gently 27 May 2007 11:00

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!

by gently gently , 27 May 2007 11:00
Re: Easy and intuitive...NOT
leiger leiger 07 Sep 2007 00:09

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


~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

by leiger leiger , 07 Sep 2007 00:09
Re: Easy and intuitive...NOT
Phil Chett Phil Chett 19 Sep 2007 23:55

check out http://hard-drive.wikidot.com and apply for membership.

er…. how do i do that then?

Last edited on 24 Oct 2007 07:51 by Phil Chett
by Phil Chett Phil Chett , 19 Sep 2007 23:55
Re: Easy and intuitive...NOT
leiger leiger 25 Oct 2007 00:01

er.... how do i do that then?

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 :)


~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Last edited on 13 Nov 2007 11:13 by leiger
by leiger leiger , 25 Oct 2007 00:01
Re: Easy and intuitive...NOT

Yeah, me 2!!!!!
Thank you so much!

by Sharona Zicherman Sharona Zicherman , 31 Dec 2009 18:43
Logo
christmas4kids christmas4kids 31 Dec 2007 21:24

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.

http://christmas4kids.wikidot.com/local--files/start/logo

Thanks much for any help.

by christmas4kids christmas4kids , 31 Dec 2007 21:24
Re: Logo
tehraptor tehraptor 22 Feb 2008 21:37

In the custom themes section of admin:manage, make a new theme that extends the flannel theme and put the following code:

#header{
 /*background: none;*/
 height: 9em;
 border-bottom: 3px solid #800202;
 background-image: url(http://christmas4kids.wikidot.com/local--files/start/logo);
 background-repeat: repeat-x;
 background-position: 0 2.1em; 
}

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

by tehraptor tehraptor , 22 Feb 2008 21:37
Re: Logo

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?

by Lt Commander Chris Lt Commander Chris , 09 Mar 2008 16:23
Re: Logo
Supermom Supermom 02 May 2008 20:46

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??????????

by Supermom Supermom , 02 May 2008 20:46
no title in email

This will do the trick

do the following:

  • Paste the following code in a simple word processor like notepad
[[include :css-competition:include:easylogo |
logo-image = YOUR-URL |
logo-width = 500px |
logo-height = 150px |
header-height = 200px |
]]
  • Replace in the following URL YOURSITE with the name of your site http://YOURSITE.wikidot.com/nav:side
  • Navigate to that link
  • Select "files" from the action-buttons at the bottom of the page
  • Upload (following the instructions) your logo.
  • If the instruction "refresh list" appears click on it
  • Now there is probably a list (One item) with "info|option" at the end
  • Click on info
  • Select from the popup-window the URL from the image, its under the picture on the second line and starts with "http://…"
  • Press ctrl-C to copy it
  • Close this window by pressing the close button
  • Go to the word processor and replace YOUR-URL with what you just copied
  • Now select the code from the word processor and press ctrl-C
  • Go to your browser and select "edit" from the action-buttons at the bottom of the page
  • go to the end of the code
  • Paste (ctrl-V) the the code
  • Save the page, press Ctrl-S or "save"

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


A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

by Steven Heynderickx Steven Heynderickx , 10 Jan 2010 23:08
Re: Logo
Thomas Crage Thomas Crage 11 Mar 2024 00:48

This has no effect if the other members do not have the picture saved.
This is useless

by Thomas Crage Thomas Crage , 11 Mar 2024 00:48
Additional info
Robert W Robert W 13 Mar 2008 13:56

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.

by Robert W Robert W , 13 Mar 2008 13:56
Re: Additional info
Helmut_pdorf Helmut_pdorf 13 Mar 2008 14:24

Fine, it is clearer now.


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 13 Mar 2008 14:24
Definition of theme and CSS
Jack Button Jack Button 23 Mar 2008 16:30

"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

by Jack Button Jack Button , 23 Mar 2008 16:30
Importing CSS themes?
sithkhan sithkhan 24 Mar 2008 10:07

Can we import CSS from other places, or must we use wikidot specific theme modification only? Thanks!

by sithkhan sithkhan , 24 Mar 2008 10:07
Re: Importing CSS themes?
Gabrys Gabrys 26 May 2008 05:33

You can import any CSS using

@import url(http://some.place.com/style/some-stylesheet.css);

in your CSS.

But remember that any import must go before the rest of the content.


Piotr Gabryjeluk
visit my blog

Last edited on 26 May 2008 05:34 by Gabrys
by Gabrys Gabrys , 26 May 2008 05:33
Re: Importing CSS themes?
(account deleted) 13 Dec 2010 18:14

Hey I think you mentioned that when we import CSS from other places the import should go before the rest of content. I am trying to import CSS themes i downlaoded from otehr websites, but i do not know how to upload the entire content as i know that for the theme to work all files (not jsut the CSS) should be uploaded while keepign structure of folder. Can you tell me how i should proceed.?

Thanks

by (account deleted), 13 Dec 2010 18:14
Re: Importing CSS themes?
RobElliott RobElliott 13 Dec 2010 18:45

You can't use a folder structure on Wikidot sites as you would do with a "normal" website.

To use a theme from another site you would need to import the CSS as a file on your site somewhere and then point to it in the @import rule at the top of your custom CSS. (Although I would normally put the CSS rules onto their own page inside [[code type="css"]] .. [[/code]] tags and point to the codeblock on that page).

You would also need to upload to the page holding your imported CSS any images that the theme required and make sure that in the CSS the links to them - ackground-image:url (/local--files/pagename/imagename.jpg) - is correct.

You then need to bear in mind that importing CSS from another site will almost certainly not work without quite a bit of manual work after that: the rule names we use here are usually different and I have never known an imported css from outside Wikidot work first time.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 13 Dec 2010 19:54 by RobElliott
by RobElliott RobElliott , 13 Dec 2010 18:45
Re: Importing CSS themes?
RobElliott RobElliott 13 Dec 2010 20:29

Have a look at http://vineyard.wikidot.com/supernatural:css which is just a test page. It imports its css from http://vineyard.wikidot.com/supernatural:css2 then adds a bit more. You'll see the syntax used for the @import.


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 13 Dec 2010 20:29
Text Colour?
CTexT CTexT 20 Jun 2008 07:20

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!

by CTexT CTexT , 20 Jun 2008 07:20
Re: Text Colour?
Helmut_pdorf Helmut_pdorf 20 Jun 2008 07:58

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 20 Jun 2008 07:58
Re: Text Colour?
Phil Chett Phil Chett 20 Jun 2008 08:19
#main-content{
 margin-right: 0;
 margin-left: 16em;
 padding: 0 1em;
 color:green;
}
Last edited on 20 Jun 2008 08:20 by Phil Chett
by Phil Chett Phil Chett , 20 Jun 2008 08:19
mistake
wowstrategy wowstrategy 02 Jul 2008 06:44

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.

by wowstrategy wowstrategy , 02 Jul 2008 06:44
Re: mistake
Helmut_pdorf Helmut_pdorf 02 Jul 2008 07:11

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 02 Jul 2008 07:31 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 02 Jul 2008 07:11
Themes
(account deleted) 04 Aug 2008 18:33

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.

Last edited on 05 Aug 2008 06:47 by Helmut_pdorf
by (account deleted), 04 Aug 2008 18:33
Re: Themes
Helmut_pdorf Helmut_pdorf 05 Aug 2008 06:49

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.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 05 Aug 2008 06:49
Looking for help troubleshooting CSS
crazyhappenings crazyhappenings 06 Aug 2008 20:22

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

Last edited on 06 Aug 2008 20:23 by crazyhappenings
by crazyhappenings crazyhappenings , 06 Aug 2008 20:22
page 1 of 61
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.

AltStyle によって変換されたページ (->オリジナル) /