Forum moderator: bigblog  
uCoz Community » For Webmasters » Design Customization » Hints and Tips on design (Bg, font-colour, box, flash clock, legends, img, tables etc.)
Hints and Tips on design
Sunny
Posts: 9296
Reputation: 456

Message # 1 | 11:32 AM

  • 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
    <body bgcolor="Color number">

    Example:

    Code
    <body bgcolor="#008000">

    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
    <body background="link to the file">

    Example:

    Code
    <body background="http://www.ucoz.com/image/1.jpeg">

    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
    <body background="http://www.ucoz.com/image/1.jpeg" bgproperties="fixed">

    I'm not active on the forum anymore. Please contact other forum staff.
    Sunny
    Posts: 9296
    Reputation: 456

    Message # 2 | 12:22 PM
    Tables

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

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
    </table>

    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
    <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>

    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
    <td width="34%" bgcolor="#FF0000">Data</td>

    The same with the image

    Code
    <td width="34%" background="link to the file">Data</td>

    Example:

    Code
    <td width="34%" background="http://www.ucoz.com/image/1.jpeg">Data</td>

    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
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
         <tr>
          <td width="33%">Data</td>
          <td width="33%">Data</td>
          <td width="34%">Data</td>
         </tr>
    </table>

    and add the following to <table> tag

    Code
    bgcolor="#008000"

    Example:

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#008000">

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

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%" background="http://www.ucoz.com/image/1.jpeg">

    I'm not active on the forum anymore. Please contact other forum staff.
    Sunny
    Posts: 9296
    Reputation: 456

    Message # 3 | 1:53 PM
  • 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
    <marquee></marquee>

    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 <img> tag which has size attributes (see above) and an image link attribute

    Code
    <img src="http://ucoz.ru/image.jpg" width="775" height="328">

  • 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 <font> tag

    - by means of CSS

    Code
    body {color:#FFFFFF}

    - by means of FONT tag

    Code
    <font color="#FF0000">Text</font>

  • 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 <img> tag into the link tag <a></a>
    Example

    Code
    <a href="Link"><img src="http://ucoz.com/image.jpg" width="775" height="328"></a>

    I'm not active on the forum anymore. Please contact other forum staff.
  • Sunny
    Posts: 9296
    Reputation: 456

    Message # 4 | 10:56 AM
  • 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
    <embed src="http://www.clocklink.com/clocks/5010-blue.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    Red

    Code
    <embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    Green

    Code
    <embed src="http://www.clocklink.com/clocks/5010-green.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

    You can also install your own flash clock.

    Code
    <embed src="LINK TO THE CLOCK"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">

  • How to put flash

    Basic code:

    Code
    <object type="application/x-shockwave-flash"
    data="flash.swf" width="300" height="100">
    <param name="movie" value="flash.swf" />
    <param name="quality" value="low" />
    </object>

    And a more complete version:

    Code

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"       codebase="http://download.macromedia.com/pub/shockwave/cabs/      flash/swflash.cab#3,0,0,0" width="100%" height="100%"><param name="SRC" value="filename.swf"><embed src="filename.swf" pluginspage="http://www.macromedia.com/      shockwave/download/" type="application/x-shockwave-flash"       width="100%" height="100%"></embed></object>

    I'm not active on the forum anymore. Please contact other forum staff.
  • Sunny
    Posts: 9296
    Reputation: 456

    Message # 5 | 3:06 PM
  • 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.


    I'm not active on the forum anymore. Please contact other forum staff.
  • Sunny
    Posts: 9296
    Reputation: 456

    Message # 6 | 6:20 AM
  • 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;}

    I'm not active on the forum anymore. Please contact other forum staff.
  • Elarinth
    Posts: 2
    Reputation: 0

    Message # 7 | 10:56 PM
    I need a database where my mods can search users,passwords,ranks,titles,posts and other stuff without the admin panel.
    Sunny
    Posts: 9296
    Reputation: 456

    Message # 8 | 8:33 AM
    I'm afraid it's not possible.
    I'm not active on the forum anymore. Please contact other forum staff.
    Elarinth
    Posts: 2
    Reputation: 0

    Message # 9 | 11:35 PM
    Quote (Sunny)
    I'm afraid it's not possible.

    Can I atleast add a search box which will search something on the page only and not the whole site?

    Kron_old
    Posts: 117
    Reputation: 52

    Message # 10 | 11:02 AM
    Elarinth, http://YOUR_SITE_ADDRESS/index/15-1 - this is the page to search users.

    and you can fond this link in Admin-bar... so please be more attentive.

    Achilles
    Posts: 1
    Reputation: -1

    Message # 11 | 2:12 AM
    why can't u guyz just make video tutorial? no newb can understand this
    Sunny
    Posts: 9296
    Reputation: 456

    Message # 12 | 2:53 PM
    I think that video tutorials will appear in future, we just can't do everything at the same time. I can also address you question - ''why can't you guys just make a video tutorial'' - to you and other experienced users: it would be great help for us if experienced users could help us make video tutorials. By the way, the only video tutorial we have now - you can see the link on our home page - was made by one of our users.
    I'm not active on the forum anymore. Please contact other forum staff.
    Armaros
    Posts: 1424

    Message # 13 | 6:15 PM
  • How to make a new 'box' like calendar, poll etc. ?

    Control Panel -> Customize Design -> Page Editor(Site pages).

    1. Find 'News Calendars' code. It will include $NEWS_CALENDAR$. (Can be any module code.)
    2. Copy from <!-- --> to <!--/-->. The code will look like this:

    Quote
    <!-- -->
    <?if($NEWS_CALENDAR$)?>
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/18.gif') #59B9FF;color:#000000;"><b>News calendar</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">$NEWS_CALENDAR$</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <?endif?>
    <!--/-->

    3. Choose where to paste code. Under which module: Polls, Tag Board, etc.
    4. Paste after <!--/--> of selected module. (Example, Polls - $POLL$)
    5. Remove <?if($NEWS_CALENDAR$)?> & <?endif?> from the code.

    6. Find 'News calendar'. It's a box's tittle. You can replace the tittle with your own.
    7. Find $NEWS_CALENDAR$ & remove it. That's content of your box.
    8. In place where was $NEWS_CALENDAR$, place your own content.

    Example:
    (Red - Content of new 'box', Blue - Tittle of new 'box', Purple - Under where new 'box' is placed)

    Quote
    <!-- -->
    <?if($LOGIN_FORM$)?>
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/21.gif') #59B9FF;color:#000000;"><b>Login form</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">$LOGIN_FORM$</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <?endif?>
    <!--/-->

    <!-- -->
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/18.gif') #59B9FF;color:#000000;"><b>Your Tittle</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">Place Your Content Here</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <!--/-->

  • chechen
    Posts: 1
    Reputation: -1

    Message # 14 | 10:05 AM
    and how do you put some stuff in it the box
    Armaros
    Posts: 1424

    Message # 15 | 10:12 AM
    Quote (chechen)
    and how do you put some stuff in it the box
    That's content, which is explained in point 7 & 8. In example in red colour.
    uCoz Community » For Webmasters » Design Customization » Hints and Tips on design (Bg, font-colour, box, flash clock, legends, img, tables etc.)
    Search: