Topic: how to "skin" the interface? (Read 5412 times)

lclark · « **on:** March 10, 2004, 12:02:28 am »

can someone please describe how to change the user interface for a coppermine commenting system? i mean, when i look in the root directory, i see like a million little .php files. do i have to edit each one? please be as detailed as possible.

peace, luma

Joachim Müller · « **Reply #1 on:** March 10, 2004, 12:10:34 am »

if you want to change the look of coppermine, you can create your own theme, or edit/modify an existing one. Take a look at the documentation that comes with coppermine. For more detailed answers, post a more detailed question. A link to your gallery might help as well.

GauGau

lclark · « **Reply #2 on:** March 10, 2004, 12:13:48 am »

Quote from: "gaugau"

if you want to change the look of coppermine, you can create your own theme, or edit/modify an existing one. Take a look at the documentation that comes with coppermine. For more detailed answers, post a more detailed question. A link to your gallery might help as well.

GauGau

kay. thanks. here is a link to what i want it to look like. please help, luma

http://sentos.visualthoughts.com/beta

peace

Joachim Müller · « **Reply #3 on:** March 10, 2004, 01:02:52 am »

use this as template.html for a start - you'll have to modify the colors in style.css...

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>
    <title>{TITLE}</title>
                <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
                <meta http-equiv="Pragma" content="no-cache" />
                {META}
    <style type="text/css" media="screen">
<!--

BODY { color: #4F4545; font-family: Lucida Sans Unicode, Lucida Console, Arial, Helvetica, Sans-Serif; font-size: 10pt; text-decoration:none }
<!--
  .roll { font-family: Lucida Sans Unicode, Lucida Console, Arial, Helvetica; text-decoration:none; }
  p { color: #4F4545; font-size: 10pt; font-family: Lucida Sans Unicode, Lucida Console, Arial, Helvetica, Sans-Serif; text-align: justify }
  A.roll:hover { color: #D4D6FF; }
-->
</style>
<link rel="stylesheet" href="themes/default/style.css" />
<script type="text/javascript" src="scripts.js"></script>
    <csscriptdict import>
      <script type="text/javascript" src="../CSScriptLib.js"></script>
    </csscriptdict>
    <csactiondict>
      <script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
  if (document.images) {
    over_menu_gallery_off = newImage(/*URL*/'images/menu_gallery_on.jpg');
    over_menu_about_gal_off = newImage(/*URL*/'images/menu_about_gal_on.jpg');
    over_menu_contact_off = newImage(/*URL*/'images/menu_contact_on.jpg');
    preloadFlag = true;
  }
}

// --></script>
    </csactiondict>
  </head>

  <body onload="preloadImages();" bgcolor="#ffffff" background="../images/bg.jpg" link="#23397B" alink="#23397B" vlink="#23397B" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <table width="100%" height="106" cellpadding="0" cellspacing="0" border="0" background="images/top.jpg">
      <tr>
        <td align="left" valign="top">
          <img src="../images/spacer.gif" height="103" width="1" alt="love">
        </td>
      </tr>
    </table><br>

    <center>
      <table width="392" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="center" valign="top">
          <img src="../images/spacer.gif" height="125" width="1" alt="{--_--}"><br><img src="../images/hello.jpg" alt="Hi!" height="182" width="392">
          </td>
        </tr>
        <tr>
          <td align="center" valign="top">
            <table width="392" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="center" valign="top">
                  {MAIN_MENU}
                  {ADMIN_MENU}
                  {GALLERY}
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td align="center" valign="top">

          <br><br>

          <img src="../images/div.jpg" alt="{--_--}" height="8" width="410"><br>
            <img src="../images/menu_gal_01.jpg" height="28" width="170" border="0"><a onmouseover="window.status='You Are Here - Gallery';changeImages( /*CMP*/'menu_gallery_off',/*URL*/'images/menu_gallery_on.jpg');return true" onmouseout="window.status='';changeImages( /*CMP*/'menu_gallery_off',/*URL*/'images/menu_gallery_off.jpg');return true" href="#"><img src="../images/menu_gallery_off.jpg" name="menu_gallery_off" height="28" width="80" border="0"></a><a onmouseover="window.status='About';changeImages( /*CMP*/'menu_about_gal_off',/*URL*/'images/menu_about_gal_on.jpg');return true" onmouseout="window.status='';changeImages( /*CMP*/'menu_about_gal_off',/*URL*/'images/menu_about_gal_off.jpg');return true" href="about.html" target="_top"><img src="../images/menu_about_gal_off.jpg" name="menu_about_gal_off" height="28" width="51" border="0"></a><a onmouseover="window.status='Email To: luma at visualthoughts dot com';changeImages( /*CMP*/'menu_contact_off',/*URL*/'images/menu_contact_on.jpg');return true" onmouseout="window.status='';changeImages( /*CMP*/'menu_contact_off',/*URL*/'images/menu_contact_off.jpg');return true" href="mailto:lumaATvisualthoughtsDOTcom"><img src="../images/menu_contact_off.jpg" name="menu_contact_off" height="28" width="91" border="0"></a><br>
            <img src="../images/spacer.gif" height="125" width="1" alt="love">

          </td>
        </tr>
      </table>
      `</center>

    <table width="100%" height="79" cellpadding="0" cellspacing="0" border="0">

      <tr>
        <td align="right" valign="bottom">
          <img src="../images/bottom.jpg" alt="&copy; 2004 Luma Clark. Thank You Very Much" height="79" width="457">
        </td>
      </tr>
    </table>
  </body>

</html>

We're providing support on this site, but we're not doing your work. If you want your coppermine gallery to look special, you'll have to do some efforts as well instead of relying on others to do the work for you...

GauGau

P.S. your code is not standards compliant and will most probably not render as expected on non-IE browsers...
P.P.S. Over-usage of nested tables is not recommended at all

lclark · « **Reply #4 on:** March 10, 2004, 01:12:13 am »

i was told that the code on my site was w3c complient. i've tested it on ie and opera and both work like a dream. also, my friend who is on a mac g5 had no problems at all either. :x

thanks. peace, luma

Joachim Müller · « **Reply #5 on:** March 10, 2004, 01:17:20 am »

no, it's not - see for yourself: http://validator.w3.org/check?uri=http%3A%2F%2Fsentos.visualthoughts.com%2Fbeta%2Findex.html ,but hey, who can code standard compliant pages that are beautiful as well? :lol:
Nevermind, if it works for you OK...

GauGau

lclark · « **Reply #6 on:** March 10, 2004, 01:22:07 am »

Quote from: "gaugau"

no, it's not - see for yourself: http://validator.w3.org/check?uri=http%3A%2F%2Fsentos.visualthoughts.com%2Fbeta%2Findex.html ,but hey, who can code standard compliant pages that are beautiful as well? :lol:
Nevermind, if it works for you OK...

GauGau

you're too kind.

lclark · « **Reply #7 on:** March 10, 2004, 05:27:38 am »

Quote from: "gaugau"

use this as template.html for a start - you'll have to modify the colors in style.css...[...]

hey thanks for the great starter. but this is the result i get. does it have to stay the name "template.html" or something? cause all i did was copy it into the directory and it dosen't seem to work right. please help, luma

lclark · « **Reply #8 on:** March 10, 2004, 05:31:24 am »

ok. apparently, it does have to stay the same name. but then how do i clean up my url? it's supposed to be http://sentos.visualthoughts.com NOT http://sentos.visualthoughts.com/comments

please help. thanks again. peace, luma

lclark · « **Reply #9 on:** March 10, 2004, 06:38:58 am »

hello again. there appears to be something wrong with the code you gave me. i copied and pasted it into the template page and it dosen't show the main menu. it just says main menu. no links. here is a link: http://sentos.visualthoughts.com/comments

please help and thank you for your help so far.

peace, luma

Joachim Müller · « **Reply #10 on:** March 10, 2004, 08:48:45 am »

Quote from: "gaugau"

[...] Take a look at the documentation that comes with coppermine. [...]

Please take a look into the docs, as advised. Please do not quote my entire posting when replying - this makes this thread unnecesarily large and difficult to read (I edited your posting and removed the quotes).

The code I posted was only meant as a starter, make sure to understand the concept. I will not create a theme for you - maybe someone else will...

GauGau

News:

Author Topic: how to "skin" the interface? (Read 5412 times)

lclark

how to "skin" the interface?

Joachim Müller

how to "skin" the interface?

lclark

how to "skin" the interface?

Joachim Müller

how to "skin" the interface?

lclark

how to "skin" the interface?

Joachim Müller

how to "skin" the interface?

lclark

how to "skin" the interface?

lclark

how to "skin" the interface?

lclark

how to "skin" the interface?

lclark

how to "skin" the interface?

Joachim Müller

how to "skin" the interface?