Hintz and Tips On Design

New messages Members Forum rules Search RSS

Page 1 of 1
1

SirDarknight(Tonmoy)

Date: Friday, 06.05.2011, 18:40 | Message # 1

Group: Verified

Posts: 167

Awards: 6

Status: Offline

How to change size of an image\table\other objects?

Size of images, tables and so on can be changed by means of the attributes

Code

width="" height=""

A size may be fixed, i.e. specified in pixels, or floating, specified in percent.

How to change background?

You can change background of the page itself, table cells and the whole table.

To change the color of the whole page find the < body > tag,
then choose the necessary color and add the following to body tag

Code

Example:

Code

If you want to put an image as a background then again find the < body > tag,
Choose the necessary image, upload it to the server, and add the following to

Code

Example:

Code

When using an image as a background there is a method called "substrate" of a background (fixation)
In order to fix your background add the following to

Code

bgproperties="fixed"

Example:

Code

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Friday, 06.05.2011, 18:42 | Message # 2

Group: Verified

Posts: 167

Awards: 6

Status: Offline

Tables

Let’s take as an example an ordinary table 3х3.

Code

So here is a table and we want to change, for example, cell 2.3 (2-row, 3-cell)
We should find cell 2.3. As we know rows are indicated by <tr> tags,
and cells - by <td> tags, so in our table we have 3 pairs <tr></tr> and 9 pairs <td><td> and when looking at the code we can say that we have 3 rows with 3 cells each, and as we are changing 2.3, that means we skip the first pair <tr></tr> and 3 pairs <td><td> and proceed to the second pairе <tr></tr> where all our actions will take place. Here is this pair:

Code

Here we take cell 3 (<td width="34%">Data</td>) and change the background in it as we did it in body – choose the color and add the following

Code

bgcolor="#FF0000"

Example:

Code

The same with the image

Code

Example:

Code

If we want to change the color of the whole table and not of each cell, we should do the following.
Find our table

Code

and add the following to <table> tag

Code

bgcolor="#008000"

Example:

Code

To set an image as a background see the examples above.

Code

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Friday, 06.05.2011, 18:44 | Message # 3

Group: Verified

Posts: 167

Awards: 6

Status: Offline

How to make a link?

The tag of a link:

Code

<a></a>

“href” attribute is responsible for the link address

Code

<a href="http://ucoz.ru/">Create your own site</a>

How to make a scrolling line?

A scrolling line is added by means of the tags

Code

Example:

Code

<marquee>uCoz Web Service</marquee>

There are also such attributes as
scrolldelay="" – delay
direction="" – direction of move

Code

<marquee scrolldelay="80" direction="left">uCoz Web Service</marquee>

If you want it to stop when pointing with cursor, then add

Code

<marquee scrolldelay="80" direction="left" onmouseover='this.stop()' onmouseout='this.start()' >uCoz Web Service</marquee>

How to insert an image?

Use tag which has size attributes (see above) and an image link attribute

Code

How to make a page for different screen resolutions?

You should specify the width of tables (mostly) not fixed, i.e. not in pixels but in percent (width="100%")

How to change text color?

There are two ways - either CSS or tag

- by means of CSS

Code

body {color:#FFFFFF}

- by means of FONT tag

Code

Text

I’ve changed site template (not automatically), but the design of the forum hasn’t changed. How to fix it?

The design of each module is changed separately if the feature “apply to all pages” is not enabled.

I’ve inserted chat (Tag Board) into the main page, how can I add it to all other pages without inserting the code to each page separately

You can do it with the help of Templates Builder.

How to make an image instead of “Download”?

You should put tag into the link tag
Example

Code

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Friday, 06.05.2011, 18:46 | Message # 4

Group: Verified

Posts: 167

Awards: 6

Status: Offline

How to put a flash clock on the site?

You can use special service http://www.clocklink.com/

Here is an example

The code to install a clock (I used 3 colors as an example):

Blue

Code

Red

Code

Green

Code

You can also install your own flash clock.

Code

How to put flash

Basic code:

Code

And a more complete version:

Code

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Saturday, 07.05.2011, 06:58 | Message # 5

Group: Verified

Posts: 167

Awards: 6

Status: Offline

How to make blend transition between pages?

By means of meta tags. Add the meta tags from the list below to a template:

Code

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (effect when entering a page)
<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (effect when leaving a page)
<META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (effect when entering a site)
<META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (effect when leaving a site)

Duration sets time in seconds, Transition – number of an effect

List of effects:

0 - Box in
1 - Box out
2 - Circle in
3 - Circle out
4 - Wipe up
5 - Wipe down
6 - Wipe right
7 - Wipe left
8 - Vertical blinds
9 - Horizontal blinds
10 - Checkboard across
11 - Checkboard down
12 - Random dissolve
13 - Split vertical in
14 - Split vertical out
15 - Split horizontal in
16 - Split horizontal out
17 - Strips left down
18 - Strips left up
19 - Strips right down
20 - Strips right up
21 - Random bars horizontal
22 - Random bars vertical
23 - Random

P.S. As far as I know it works in IE only.

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Saturday, 07.05.2011, 06:59 | Message # 6

Group: Verified

Posts: 167

Awards: 6

Status: Offline

How to find and edit CSS class

1) In you browser click View -> Source (How do I view the source code of a web page (in different browsers)?.
2) Find the element you want to change and see what class it has.
3) Copy the name of the class.
4) Open Style Sheets (CSS) in Control Panel -> Customize Design
5) Find this class in CSS.
4) Modify the parameters as you need.

If there is no separate class for the element then add it to the template (via Control Panel) and to the CSS with the necessary parameters.

Example:
Users often want to change font size in forum posts. Open any forum thread and copy a part of the text. Open View -> Source and find this part. See what class it has – post text has the class="posttdmessage".

Open CSS of the forum and find "posttdmessage" in the section /* Posts View */.

Code

.posttdmessage {padding:5px;font-size:8pt;}

We can see that only padding and font size are specified. We can change the size and add color, and the class will look as follows:

Code

.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}

Please Give Me A Reputation or Award If My Post Helps You

SirDarknight(Tonmoy)

Date: Saturday, 07.05.2011, 07:03 | Message # 7

Group: Verified

Posts: 167

Awards: 6

Status: Offline

Forum Legend

How to add 'Legend' ? (re-post)

First: CP -> Customize Design -> Forum(Common view of forum pages) -> Find: $BODY$
(If your site/forum doesn't show birth days, than these legends will be after forum statistic)

Legend -1

To use this variant, copy code bellow & paste after $BODY$.

Code

<table border="0" width="100%" cellspacing="1" cellpadding="0" class="gTable">
<tr><td class="gTableSubTop">Color Legend: [Administrator] [Moderator] [VIP] [Registered] [Banned]</td></tr>
</table>

Legend-2 (Space before legend)

To use this variant, copy code bellow & paste after $BODY$.

Code

<table border="0" width="100%" cellspacing="1" cellpadding="0" class="gTable">
<tr><td class="gTableSubTop">Color Legend: [Administrator] [Moderator] [VIP] [Registered] [Banned]</td></tr>
</table>

Legend -3(In The Middle)

To use this variant, copy code bellow & paste after $BODY$.

Code

<table border="0" cellspacing="1" cellpadding="0" class="gTable">
<tr><td class="gTableSubTop">Color Legend: [Administrator] [Moderator] [VIP] [Registered] [Banned]</td></tr>
</table>

Legend-4 (Displays in the middle & with space before legend)

Code

<table border="0" cellspacing="1" cellpadding="0" class="gTable">
<tr><td class="gTableSubTop">Color Legend: [Administrator] [Moderator] [VIP] [Registered] [Banned]</td></tr>
</table>

Please Give Me A Reputation or Award If My Post Helps You

Hintz and Tips On Design

Page 1 of 1
1