Design FAQ

Zoetko's guide to 4 sided borders

feeds@yuku.com (Yuku Support) — Fri, 30 Oct 2009 09:46:15 GMT

Zoetko's guide to 4 sided borders.

Please note, if your not well versed with DIV's, you should read my guide to DIVS before this guide.

Today we are going to make a more complicated table design using a 4 sided border, but first, lets go over the requirments to make such a border.

Requirements

1) You will need 4 images to create the initial...

Stop here first

feeds@yuku.com (Yuku Support) — Wed, 28 Oct 2009 15:15:38 GMT

This forum will have various code snippets and tutorials to help you with your skin design. It will be a work in progress. The forum is set to "read only". If you have questions, please post them in the Domain Skins Assistance or Profile Skins Assistance
forums. If you have a requests...

MSN Style Main Page

feeds@yuku.com (Arizona) — Sat, 24 Oct 2009 15:58:02 GMT

First of all a bit of preface. When we change your main (default) page to look similar to an MSN opening page we are not actually changing your board content. All of your categories and forums are still there, you just will not see them on this new page we create.

Example of finished skin click here: MSN Skin

What we do is make a new skin that hides...

Styling Subforum Dropdowns

feeds@yuku.com (Yuku Support) — Sat, 24 Oct 2009 13:57:08 GMT

On Yuku, you can choose between 3 types of Subforum Dropdowns from your Display Settings.
They are Html Select, Yuku dropdown or List.

Html Select appears on your board like this closed:

And this opened:

Depending upon your browser the...

Changing the quote boxes

feeds@yuku.com (Yuku Team) — Tue, 20 Oct 2009 16:11:09 GMT

How to customize your quote boxes.

The box around the quotes can be customized to your liking.

Here is an example of a quote box, let's start from this one and build on to it a bit.

(Change the hex codes to your liking)

Adding this to your css:

blockquote {
...

Zoetko's guide to understanding DIV Type Tables

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 14:30:23 GMT

Zoetko's guide to understanding DIV Type Tables

DIV BASICS 101 - What is a DIV?

A DIV is a square container, or for those of you used to tables, a DIV is like a cell. Anything within the DIV can be controlled by Styling the DIV. There are various options that can be used to style the DIV.

BORDER - This is outer most part of our DIV, it can be used to draw lines around our DIV, with various sizes and types.
...

Moving your Tool-box to the page bottom

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 13:08:21 GMT

The tool-box appears at the top of your page and houses your invite, contribute, search, feed and breadcrumb links.

You cannot really move it to the bottom, but you can hide the top box and it's elements in your CSS and then re-add the
links to the bottom of your page.

In the custom footer of your skin, add this code:

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 12:37:16 GMT

If you have a free board, then you will have ads on your topic pages. They appear like this (click the thumbnail to see):

They are in the top right corner of the first post and then every 3 or so posts (depending on how many posts) they...

Buttons

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 12:16:13 GMT

Many buttons can be added to your board by placing the image url in the image list of the skin, but not all. The three buttons you see when you start a new topic, reply, poll etc. can not. However, you can add background button images in the CSS. You can add a generic background to all buttons like this:

.button, a.button {
background: #EBF3FA url(http://images.yuku.com/image/jpeg/58324448decab32845666c43a34d6fdae7209d.jpg);
padding: 3px;
...

Multi-level dropdown styling

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 11:44:11 GMT

In your board's script library there is a script to make a Multi Level Menu

The following code will help you to style that script once you have it in place.

/* SUCKERFISH MENU STYLES ---- */

/* 2 options for width, full or fixed (delete unneeded style) */

/* 1) full width:
divide # of top level items by 100 for % width */
body .suckerfish-holder li
{width: 20%;
margin: 0;}
...

Post wysiwyg editor

feeds@yuku.com (Yuku Support) — Tue, 20 Oct 2009 11:31:15 GMT

The wysiwyg post editor (the reply box you type in here) can be styled somewhat. The gray tool bar cannot but the textarea can. To add different text color, font styles and backgrounds, add the following to the Advanced CSS box on your skin:

.wysiwyg-editor {
font-family: "Comic Sans MS", "Brush Script MT", cursive;
font-size: 12px;
font-weight: bold;
color: #ffffff;
background: #0000ff; }...

Skin wysiwyg editor hints (under construction)

feeds@yuku.com (Yuku Support) — Fri, 10 Apr 2009 09:30:41 GMT

The wysiwyg editor in your skin list can be used to help you create a new skin or change an existing one.

Go to your Community Skins list ( Admin - Design - Skins - Customized Skins )

You should see something like this:

When the page opens you will see a split screen. The Category page of your skin will display on the top and the
General tab of...