creating a skin, where to start?

[Fking]

I have integrated the CPG with vbulletin3
The skin i'm using for my vbulletin is Utopia, which i converted from vb2 to vb3
now i need to convert it for CGP too
Where do i start? Any directions will be helpful.
I guess it will be better to set the colours and sizes of the tables first...do i have to edit directly the style.css file?


p.s. if someone has already converted the utopia skin, now is the moment to tell me

[Joachim Müller]

In coppermine, we call a "skin" a "theme" - this is how you create your own theme:

• go to the demo page and take a look at the themes that exist for coppermine, using the "Choose a theme" dropdown
  
• Choose a theme that matches most closely your bbs theme (in terms of layout mostly, not so much in terms of colors, as they can be changed later easily) and download it (if it doesn't already come with the coppermine package) from the download section
  
• After downloading and unpacking the theme, start by changing the overall layout of the theme - edit themes/yourtheme/template.html . Make sure to leave the stuff in curly braces intact, and the JavaScript bit
  It's advisable to upload the file you're modifying every now and then to your webserver and preview your theme - you can do so on a "live" coppermine gallery as well (without showing your visitors the new theme that is still under construction) by adding theme=your_theme_name to the url, e.g. http://yourdomain.tld/your_coppermine/folder/?theme=your_theme_name - this will result in coppermine being displayed with your new theme only for you (everyone else will still see coppermine with the theme you set in coppermine's config.
  
• If you want different icons and graphics, it's time to change them now as well by replacing/adding them in your_coppermine_folder/images (for the overall graphics used throughout coppermine) and your_coppermine_folder/themes/yourtheme/images (for the graphics used only in a special theme). You have to keep in mind that the theme files are not actually run in your browser, but being parsed by coppermine's theming engine, that's why reference to any grahpics mustn't contain the relative path from inside the theme sub-directory, but seen from the coppermine root folder. As an example: if you want to use the image "folder.gif" in your template file which comes in coppermine's "images" folder, the html tag mustn't be <img src="../../images/folder.gif" width="16" height="16" border="0" alt="" />, but <img src="images/folder.gif" width="16" height="16" border="0" alt="" />
  
• If the overall layout is fine for you, it's time to change the colors (and some other attributs which are controlled by css) - to do so, edit themes/yourtheme/style.css . Again, upload it frequently to see your changes. To find out what css class controls which part of coppermine's output, you can use the theme styleguide (which comes with the coppermine package and is available on the demo as well) - you can access it by entering an URL like http://yourdomain.tld/your_coppermine/folder/?theme=styleguide
  
• The next step is fine-tuning the look, e.g.if you want to add a link to coppermine's navigation that points to a non-coppermine page, or if you want to get rid of a coppermine menu item, edit themes/yourtheme/theme.php. You'll notice several sections in it that start with a comment (in php files, comments start with two slashes //), followed by a short description of what the code does. In this example, if you want to remove the menu item "last uploads", find the section
  Code Select Expand
  // HTML template for main menu, look at the stuff that comes after it and comment out (or even remove)
  Code Select Expand
  <a href="{LASTUP_TGT}">{LASTUP_LNK}</a>by replacing it with
  Code Select Expand
  <!--<a href="{LASTUP_TGT}">{LASTUP_LNK}</a>-->. Make sure not to remove or modify any html comments that exist (e.g. <!-- END logout -->, as those "markers" are being used by coppermine to do certain things - if you remove them, you will get template errors.
  If you want to modify your theme even further, please search this board first - most questions concerning theme manipulation have been asked (and answered) already

Important: Some WYSIWYG editors like MS Frontpage or Dreamweaver modify code in a way that will stop coppermine from working (they try to "beautify" php code, which is something they haven't been built for). As a result, you mustn't edit your theme files with a WYSIWYG editor. Use a plain-text editor instead (there are many free editors available that feature preview and code highlighting), in most cases, notepad.exe is fine.

Joachim

[Tranz]

To prevent Dreamweaver from editing php code as it sees fit,
go to Preferences / Code Rewriting
to the Never rewrite code list, add .php

While you're at it, might as well add '.html', especially if you plan to edit any of the theme html files.

Make sure to always work in code view and don't edit in design view.

[gcnetwork]

I guess netscape composer 4.6 would be the same as dreamweaver, etc as a WYSIWYG editor?    Netscape does most of my site for me so I'm getting confused as how I would customize it

[Joachim Müller]

don't use a WYSIWYG editor at all, especially not netscape composer nor MS Frontpage. Instead: use a plain text editor (notepad.exe is fine).

Joachim

[Charles Scott]

GauGau, I found the theme I want (Anime) but see no place to download it.

Where do I go from here?

[donnoman]

All of the themes on the demo are available for download from the coppermine sf.net project pages.

You can hit the "downloads" button at the top left of this forum to take you right there.

Here's a link directly to the themes section http://sourceforge.net/project/showfiles.php?group_id=89658&package_id=98541

[Tranz]

The next version of Coppermine will no longer include the styleguide theme since there are web developer tool bars available for IE and Firefox that will help in determining the classes used:

Firefox:
Web developer
ColorZilla

IE:
Web Accessibility Toolbar

[father]

All of the themes on the demo are available for download from the coppermine sf.net project pages.

You can hit the "downloads" button at the top left of this forum to take you right there.

Here's a link directly to the themes section http://sourceforge.net/project/showfiles.php?group_id=89658&package_id=98541

i've been looking for HARDWIRED which is one of the themes on the demo page. it is NOT in the themes section of the download page, yet i hear a lot of people talking about it and have seen it at several sites.

any idea where i can get it? either download or perhaps e-mailed?

thanks.

[edit by kegobeer] Asked and answered in another post - included with Coppermine [/edit]

[SundayNiagara]

I would like to see a definitive guide to changing colors, etc.  So far, all I've been able to do, is change the background color and nothing else.  Everytime I change another color, nothing happens.  A tutorial on this would be very nice.
Mark

[donnoman]

As far as Coppermine goes there is plenty of information to create a custom theme on these boards and in the faq.  Creating a theme beyond the basics of what files to edit, and where they go, theres not a whole lot we can create a tutorial for. The main part of the theme, is your own creativity and ability to put that creativity to work with all of the web development tools you have under your belt.

Themes are based in PHP and HTML, but they can include Flash, CSS, inline-style, Java, you name it, theres probably a way you can incorporate it.

The actual problem that you are encountering doesn't really have to do with Coppermine Themeing per'se.  Most of the coppermine themes use CSS to establish the color schemes and a significant portion of the "style" information that browsers renders.  If you want to be effective in editing/creating themes, there are plenty of CSS tutorials available. Just Google it.  Explaining CSS would be a forum in and of itself, and you can find forums already dedicated to it.  

http://www.htmldog.com/guides/cssbeginner/

Looks like a good reference.

CSS is not simple, it can be quite complex as there is not necessarily a 1 to 1 relation to everything you style in CSS.

Selectors can select parents or children, or the item itself.  Some properties are inheritable, some aren't.  You can style elements multiple times, last writer wins.  You will see examples of all of that if you look through the css of the default themes.

It's very likely that whatever color you are changing on an element, is changed by a more specific element assigment elsewhere in the css.

When dealing with CSS I've found the best troubleshooting tools being the Web Tool Bar's for developers.

Internet Explorer:

Web Accessibility Toolbar (Creative Commons License)

Mozilla Firefox:

Web Developer Extension (GPL)

[Tranz]

Web dev toolbar is a web developer's good friend.

[SundayNiagara]

I am planning on learning CSS, but not just yet and would appreciate a how to.  Yabb's template is similarily confusing and they have a very nice tutorial on how to change everything on it.
Mark

[donnoman]

In coppermine 1.3 there is a theme called styleguide which can assist you to some extent for figuring out what css classes go to what.

I much prefer the web toolbars however, and styleguide won't be in future versions of Coppermine.

[SundayNiagara]

Thanks, I'll give that a try.  However, I'd still prefer a "how-to," written so thje average person can understand it.
Mark

[Jangla]

Er, I've had a crack at this and now I can't turn off the style guide!  No matter what theme I select, it's still there!

[Edit - fixed it.  Nevermind]