New Theme

Summary:

My new theme isn't working properly in Wikidot Themes

New Theme

Vibracobra23 01 Oct 2011 22:59

Hi. I'm testing a new theme, and it seems to work very well on both my test site and on one I created for the company that I work for, but when I tried adding it as a new Wikidot Theme it didn't work. The banner was too thin and the top third of it wasn't showing; and, even worse!, it was repeated all the way down the page; even though the css header specifies "no repeat". An additional problem was that the background image didn't appear at all.

For the drop down top-bar menu, the nested elements of the Theme Preview all had the 2px blue border at the bottom and a 1px grey border at the top; which are not supposed to be there, as you can see from the test site. The only ones which are supposed to have the blue bottom border are the ones which are always visible.

I've created a Wikidot Theme before (Woodcut), with few problems and I've created at least 20 Wikidot sites, so I'm surprised that this one didn't work there, and yet seems to work fine on this site. I really don't know what the problem is. Wikidot members have most of the permissions for the test site, so feel free to tinker with it if you want. Any help with this would be much appreciated.

Problems remaining to be resolved on the test site are:

1. Footnotes and Bibliography Note hovertips show up as white on white, so I need to change the background colour to #222222. I would also like to give them a 2px #0A87B7 border. I've got the normal hovertips with #222222 background colour, but I couldn't manage to get the #0A87B7 border to show on those.
2. The Print Page. I've got the text on these to show up as black rather than white, but I need the background to show up as white rather than #222222. This is a major problem as printing of any of the pages would use a lot of ink. Another problem is that as the text is black and the background colour is #222222 the text is only just legible. By changing the background colour of the Print Page to white both of these problems will be resolved.
3. Dropdown menu works well, but any nested elements in the very right hand side appear off the edge of the page.

I haven't noticed any other problems, but let me know if you see any others.

The test site can be found at http://kingfisher-theme.wikidot.com/

Thanks,

Chris Bond

---

"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

Last edited on 02 Oct 2011 18:35 by Vibracobra23 + Show more

Re: New Theme

RobElliott 02 Oct 2011 07:33

That looks good.

when I tried adding it as a new Wikidot Theme it didn't work.

I can't see the theme anywhere on the Themes site. If you did add it to the themes site did you make sure you were basing it on the shiny theme which is the 2nd level css used on your test site (base theme > shiny > custom)? So that it gives you and others what you expect on the themes site I suspect you would need to import the shiny theme as the first rule in your css then add your custom css. When adding themes to the themes site it is often best not to build them up from on a different theme but only work from the base css.

It looks to me like you are copying the code from your css page into the custom themes part of your site manager. You don't need to do this, you can get your site to read the css from the css page.

1) change the [[code]] at the beginning of the page to [[code type="css"]].

2) In site manager -> appearance -> themes make sure the default category is selected, then select the external theme radio button, then in the box that appears type /css/code/1 and save the changes.

Now whenever you make a change to the css on the css page it will be automatically used when you refresh the page or navigate to a different page.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: New Theme

Vibracobra23 02 Oct 2011 10:56

Thanks for that Rob. Will give your suggestions a try. I deleted it from the Themes site until I sorted out the problem. I still have a few minor problems to sort out, mainly the Print page, but nothing major, so I'll try uploading it to the Themes page again.

---

"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

Re: New Theme

RobElliott 02 Oct 2011 09:49

This is off-topic but just to add to my previous post, one big advantage of having the live css on its own page is that you can then easily apply different css to different categories on your site. For example you might want a different header image for each category.

You add an extra codeblock on the css page, import the first codeblock css then add the changes you want to make for that category. In the site manager for the second category you would use /css/code/2 etc. So an example of an extra codeblock from one of my sites looks like this and changes the image in the sidebar for the nature category (the 10th codeblock on the css:theme page)

++ Nature (10)

[[code type="css"]]
@import url("/css:theme/code/1");
#side-bar { background-image: url("/local--files/css:theme/activities_nature.png"); }
[[/code]]

So in my case on the site manager the external theme for the nature category has /css:theme/code/10

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.

Re: New Theme

Vibracobra23 02 Oct 2011 11:22

Have uploaded it to Themes and everything looks ok so far. Thanks for the help Rob. It's been a long time since I last did a theme here (Woodcut, almost 2 years ago), so I guess I'd forgotten about having to import Shiny. I would happily use Base for any further designs (as I did for 99% of this one), but I'm still not sure how to get the header exactly as I want it using Base, and Shiny always works well for me in that respect. As for the live CSS, that would definitely be worth using for the Test Site and any others I might use the theme for.

---

"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

Re: New Theme

Ray Fowler 24 Oct 2011 13:39

does anyone know how to set up a video to the left of the page with a slide show to the right

Re: New Theme

Ed Johnson 24 Oct 2011 14:46

You just need to set up two div blocks side-by-side and place the video in the left-hand div and the slideshow in the right-hand div.

[[div style="float: left; margin: 5px; padding: 0 5px; width: 40%; border: 1px solid #880000;"]]
...
...
...
Your video content goes here...
...
...
...
[[/div]]
[[div style="float: left; margin: 5px; padding: 0 5px; width: 40%; border: 1px solid #880000;"]]
...
...
...
Your slideshow content goes here...
...
...
...
[[/div]]
[[div style="clear: both;"]]
[!-- this "invisible" div clears the floats --]
[[/div]]

…
…
…
Your video content goes here…
…
…
…

…
…
…
Your slideshow content goes here…
…
…
…

Your question is a bit vague. If I missed the mark, it would be helpful if you could link to an example that shows what you're trying to accomplish.

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog