Skins
Skins determine the appearance and layout of the main module's front-end album list page. This page covers the skin list, skin options and skin styles.
Two skins ship with the module, and more can be installed:
| Skin | Description |
|---|---|
| Skin_01_Portfolio | Portfolio-style skin |
| Skin_02_Default | Default-style skin |
Skin List
Open the Skin List page in the management menu. Each skin in the list shows:
- Preview image — the skin preview (from
preview.jpgin the skin folder). - Skin name and version — e.g.
Skin_02_Default (01.00.00). - Demo Url — opens the sample page of this skin on the official demo site so you can see it before applying.
- Action — skins that are not applied show a green apply button (play icon); click it to make that skin the list page skin of the current module. For the currently applied skin the button is disabled (stop icon), and a gear button appears next to its name, linking directly to that skin's Skin Options page.
Skin files live in DesktopModules\DNNGo_PhotoAlbums\Skins; you can modify existing skins in this folder.
Continuous updates
We release new album skins regularly — available free of charge after purchase. If the module reports that you are on the single effect version, purchase the full version to unlock all skins and effects.
Skin Options
After a skin is applied, the Skin Options page configures its appearance details. Options differ slightly between skins; the following uses Skin_02_Default as the example. The page has five panels with Update / Cancel buttons at the bottom.
General Settings
- Theme Name — dropdown to choose a theme of the current skin; a preview image is shown below after selecting.
Basic Options
- Accent color — pick the skin's accent color (e.g.
#e70430).
Photo List Settings
| Option | Description |
|---|---|
| Fade Show | Fade animation duration in milliseconds (default 100) |
| Column Style | List layout: one / two / three columns (column_one / column_two / column_three) |
| Thumbnail Width | Thumbnail width in pixels (default 400) |
| Display Categorie Nav | Whether to show the category navigation |
| Display Right Nav | Whether to show the right-side navigation |
| Display RSS | Whether to show the RSS icon |
| Display Title | Whether to show album titles |
| Display Left Icon / Display Right Icon | Whether to show the left/right arrow icons |
| Display Categories | Whether to show the album's categories |
| Display Date | Whether to show dates |
| Display Summary | Whether to show summaries |
PhotoAlbums Detail
Display switches for the album detail page:
- Display Title — title
- Display Prev / Next — previous/next navigation
- Display Author / Display Author Avatar — author / author avatar
- Display Categories — categories
- Display Publish Time — publish time
- Display Comments Count / Display View Count — comment count / view count
- Display Return Icon — return icon
- Display Tags — tags
- Display Share — share buttons
Related
| Option | Description |
|---|---|
| Enable Related Albums List | Whether to show a related albums list on the detail page |
| Enable Random Albums | Whether related albums are picked randomly |
| Related Albums Number | Number of related albums to show (default 4) |
| Number columns | Columns of the related albums list (1 ~ 12) |
Skin Effect
Each skin can also pick a photo list presentation effect (SkinEffect) in its Effect List. The list uses the same card layout as Skin List: each card shows a preview image (from preview.jpg in the effect folder), name and version, a description (for some effects, e.g. UnoSlider) and a Demo Url link. Effects that are not applied show a green apply button; the currently applied effect shows a disabled stop button and a gear button (labeled with the current theme name) next to its name, linking to that effect's Effect Options page.
Built-in skin effects:
- Effect_01_ImagesLoaded — progressive image loading
- Effect_02_Gallery / Effect_03_Gallery — gallery
- Effect_04_ArticleList — article-list style
- Effect_04_Carousel — carousel
- Effect_05_UnoSlider — UnoSlider sliding
After choosing an effect, its appearance and animation parameters can be configured in Effect Options (the page structure matches Effects → Effect Options: theme selection plus an effect-specific parameter panel).
Skin Style
The Skin Style page is an online CSS editor: the Theme Content textarea in the Basic Settings panel loads the full CSS stylesheet of the current skin theme. Edit it directly and click Update to save, or Cancel to discard — fine-tune the skin to match your site design without touching files on the server.
The stylesheet is organized in sections so the part you need is easy to find:
| CSS section | What it controls |
|---|---|
| Button / search | Buttons and the search box |
Gallery List (.gallery_list) | Album list page: list items, thumbnails, column_one/two/three layouts, category navigation, etc. |
Gallery Detail (.galler_datail) | Album detail page: title, meta, tags, author, share area |
comment Form / Comment (.comment_form, .comments_list) | Comment form and comment list |
PagingTable (.galley_page) | Paging buttons |
Validation (.formError) | Form validation error bubbles |
| jQuery UI section | UI components such as the date picker |
AlbumDetail_RelationList | Responsive column layout of the related albums list (with media query breakpoints) |
WARNING
Before editing the CSS, copy everything and keep a local backup; if the styles break, paste the backup back into the textarea to restore. After saving, force-refresh the browser (Ctrl+F5) to see the result.
Next Steps
- Effects — configure the photo presentation on the album detail page
- General Settings — list paging and sorting