Themes (new threads) http://community.wikidot.com/forum/c-11436/themes Threads in the forum category "Themes" - Modifying and creating themes. Tue, 14 Feb 2012 07:22:59 +0000 http://community.wikidot.com/forum/t-436144 CSS Help http://community.wikidot.com/forum/t-436144/css-help Mobile error and fonts. Sun, 22 Jan 2012 20:44:10 +0000 Moschinius 520408 Hello, I'm using the theme Midnight Minimalist which I've had some help making changes to and just now I changed some values myself too.
After refreshing on my iPhone it looks like this though:
http://img9.imageshack.us/img9/907/bild1os.png
There's an obvious error on the right side that only appears on my mobile. What did I miss? Someone might be able to tell right away but I'll put the code is further down.
Before refreshing the site was thinner and centered… I believe search, login, the rightmost border of the white field and the license text further down all should be moved to align with the "Powered by Wikidot" field which seems to have the correct dimensions.

No matter if it's related I'd like to know what this code means, the 480 part sounds mobile-related:

 @media only screen and (max-device-width: 480px) { #container { width: 100%; } }

I'm also interested in knowing how to change fonts and get more correct font sizes on my site.
Take this code piece for example:

 #header h1 a { font-family: Trebuchet MS,Arial,Sans-serif; font-size: 32px; font-style: normal; font-weight: bold; letter-spacing: 1px; line-height: 32px; }

This gives me text that's only size 24 if I copy it and paste into Word… how come? Why isn't it 32?

Also what fonts does Wikidot support? I don't really know anything about how fonts work online. Any? From what I understand you need to have the sites font installed locally in order to view it correctly… which fonts are safe to use?

Anyways here's the full code that I'm using:

+ Show the code



]]> http://community.wikidot.com/forum/t-436121 Changing page width and removing sidebar http://community.wikidot.com/forum/t-436121/changing-page-width-and-removing-sidebar Sun, 22 Jan 2012 17:34:35 +0000 Moschinius 520408 Hello, I haven't used Wikidot in a year and I need some help changing the fixed width of my wiki from 950 to 792 px and also removing the sidebar completely and filling that space with page text.

I'm using an already modified Midnight Minimalist theme:

 @import url(http://themes.wdfiles.com/local--code/midnight-minimalist); #account-topbutton { border: 0; } #login-status #account-topbutton { background-color:transparent; color: black; } #login-status #account-topbutton:hover { color: white; } #account-options li a:hover { color: black; }

I'm not quite familiar with CSS and all, so what exactly do I add, where?

Thanks.

]]> http://community.wikidot.com/forum/t-429298 Two small CSS issues... http://community.wikidot.com/forum/t-429298/two-small-css-issues 1) problems with TOC covering headers, 2) sidebar is slightly off Fri, 06 Jan 2012 06:58:24 +0000 Aidan 12346 1) TOC, images at the top, and other sorts of big blocky things interfere/overlap with the headers in my Forest theme, but I can't for the life of me figure out why.

2) The sidebar dimensions are just a little off: when there's a full page of text, you can see a jag to the left once you've passed your sidebar content. I can't find where that bit is, or how to fix it.

Can anyone help? Let me know what other details I can provide, if any.

I think everything is here: http://themes.wikidot.com/forest

]]> http://community.wikidot.com/forum/t-424524 WebBrand Themes http://community.wikidot.com/forum/t-424524/webbrand-themes Fri, 30 Dec 2011 22:18:42 +0000 Timothy Foster 197988 In just a couple of days, the new year is coming, and with it I decided to release a set of themes I have been working on. Say hello to the WebBrand Themes! As with my other set, the Developer Series, I made a bunch of color variations and am working on a program that will allow you to easily select your own colors if none of the other 11 match your needs (assuming I can get it to function, that is!). I hope everyone has a Happy New Year! brand_demo01.png ]]> http://community.wikidot.com/forum/t-423030 Hover effect not working http://community.wikidot.com/forum/t-423030/hover-effect-not-working CSS applied to images = utter failure Fri, 23 Dec 2011 19:02:12 +0000 Whane The Whip 53390 This isn't a theme per se issue, but CSS so this seemed the best suited forum.

For some reason, I cannot get the opacity to change with a mouse over. For example, I want to take some social media icons, set the opacity to 0.8 then have it go to 1.0 on a mouse over. This was my original code and syntax…

CSS

 .surfimage { display: block; margin-bottom: -10px; opacity: 0.8; } .surfimage a:hover { display: block; margin-bottom: -10px; opacity: 1.0; }

Wikidot Markup

 [[image http://hbcult.wdfiles.com/local--files/social2/fb.png width="55px" link="http://www.facebook.com/pages/HB-Cult/176391372377987" class="surfimage"]]

But that didn't work. I also tried it without the display:block… that was a nogo. Then I looked at my theme css because in it, I have the site logo go from a 0.8 opacity to 1.0 PLUS a webkit transform of about 8 in rotation with no apparent issues. I noticed that in this case the image that gets transformed is the background image so then I tried creating the same css that worked in the theme header but for my social icons….

new test CSS

 .surftest { display: block; margin: 0; padding:0; background-image: url(http://hbcult.wdfiles.com/local--files/social2/fb.png); width: 61px; height: 215px; opacity: 0.8; } .surftest a:hover{ display: block; margin: 0; padding:0; background-image: url(http://hbcult.wdfiles.com/local--files/social2/fb.png); width: 61px; height: 215px; opacity: 1.0; -webkit-transform: rotate(-5deg); }

Wikidot Markup for new test

 [[div class="surftest"]] [[/div]]

The image appeared but once again there was no hover effect. After that I tried changing the way I apply the class to the image with:

 [[div class="surfimage"]] [[image http://hbcult.wdfiles.com/local--files/social2/fb.png width="55px" link="http://www.facebook.com/pages/HB-Cult/176391372377987"]] [[/div]]

That also did not work. I don't know what else to try.

Any help would be appreciate. My test page is here: http://hbcult.com/social2 and this is for the site http://hbcult.com/

]]> http://community.wikidot.com/forum/t-422288 Footer Problems http://community.wikidot.com/forum/t-422288/footer-problems Mon, 19 Dec 2011 14:46:02 +0000 Timothy Foster 197988 I hope I'm not going crazy. Is it just me, or is the #footer and #license-area ids now inside the #content-wrap block rather than outside, like it had been for years?

If you all are also detecting this, I'll file a bug report. This might have something to do with what Wikidot said in the little Twitter field on the left about some sort of code leak.

]]> http://community.wikidot.com/forum/t-422137 Need some help with css http://community.wikidot.com/forum/t-422137/need-some-help-with-css I need to modify only one thing about a basic theme, but don't seem to be able to do it. Sun, 18 Dec 2011 22:44:37 +0000 Ren Rumenoff 1263853 Hi there :)

This is our brand new page http://torchvendor.wikidot.com/ at Wikidot.com and we are very pleased so far.

There is only one little thing I'd like to change about the image of the website. The title and subtitle would look better directly above the menu and in the center. How can I do that? I have some experience with css, but nothing too serious. I can't understand how to modify the theme, though.

Thank you.

]]> http://community.wikidot.com/forum/t-412029 How to create CSS http://community.wikidot.com/forum/t-412029/how-to-create-css Can I use dreamweaver to create a css theme? Wed, 16 Nov 2011 21:21:06 +0000 CreatiVitality 1243786 I'm new to Wikidot and to web design as a whole but I wanted to create my own theme from scratch for my site. I was wondering if I could use Dreamweaver to create the CSS code for it and if so how I would go about doing that (not actually creating it, just getting the code from the program to my site). If not how can I create the code and is there an easier way to create it than in Dreamweaver? What draws me to dreamweaver is that it is visual, I come from a photoshop and illustrator background, and I feel more comfortable with that then with code.

]]> http://community.wikidot.com/forum/t-401957 Creative Wikidot Theme http://community.wikidot.com/forum/t-401957/creative-wikidot-theme Tue, 18 Oct 2011 07:08:15 +0000 Matt Gentile 427229 CREATIVE_PREVIEW.png
CREATIVE_PREVIEW_2.png
CREATIVE_PREVIEW_3.png
CREATIVE_PREVIWE_4.png

Click Here For a Better Live Preview than Wikidot Themes

Click Here For Documentation

This is the theme I've been meaning to release for the past two days. This is a theme that has been in development for over 2 or 3 weeks, started off putting things together piece by piece, then finally figured out the direction to go for this theme.

It includes custom CSS3 3D buttons, a custom message notification, custom photo gallery, custom file uploaders and tons more! It also is compatible in all major Browsers, Google Chrome, Apple Safari, Mozilla Firefox, Internet Explorer, and Opera!

In order to get this theme to work with your Wikidot site, just copy and past the entire code below into the stylesheet when you create a new theme. If you don't feel like copying the whold code, here is a smaller version of the code so you don't have to do anything:

The Short CSS (use this if you do not want to copy the big code below):

 @import url(http://icondeposit.wdfiles.com/local--theme/creative/style.css);

The Full CSS:

Show The Full CSS Code +