How to Customize Themes in MojoPortal — Step-by-StepMojoPortal is a flexible, .NET-based content management system that offers a wide range of built-in features and extensibility. Customizing themes in mojoPortal lets you control the look and feel of your site — from layout and colors to fonts and widget placement. This guide walks you through the process step-by-step, covering theme selection, creating a child theme, editing templates and skin files, adjusting CSS, working with client scripts, and deploying changes safely.
What you’ll need
- A mojoPortal installation (local or on a server) with administrative access.
- FTP or file system access to the site files (or a hosting control panel file manager).
- A text/code editor (Visual Studio Code, Visual Studio, Notepad++, etc.).
- Basic knowledge of HTML, CSS, and some familiarity with ASP.NET Web Forms (ASPX) will help.
1 — Understand mojoPortal’s theme structure
Before making changes, know how mojoPortal organizes themes:
- Themes are stored in the /Skins folder inside your website root. Each theme has its own subfolder, e.g., /Skins/DefaultSkin or /Skins/YourThemeName.
- A theme folder typically contains:
- .skin files (template fragments used by ASP.NET Web Forms pages).
- CSS files (often skin.css and/or style.css).
- Images, JavaScript files, and subfolders for layouts or module-specific files.
- Optional .master or .ascx files for server controls in some setups.
- mojoPortal also supports configuration through the admin UI where you can select the active skin for a site or page.
Tip: Rather than editing the default theme directly, create a copy (a child theme) so you can revert if needed.
2 — Create a child theme (recommended)
- Connect to your site files via FTP or file manager.
- Navigate to /Skins.
- Duplicate an existing skin folder (for example, copy /Skins/DefaultSkin to /Skins/MyCustomSkin).
- In the new folder, rename files if needed and open skin.css (or the main CSS file) to start customizing.
- In the mojoPortal admin area, go to Settings → Site Settings → Skins/Themes and select your new skin for the site or a particular page.
Creating a child theme preserves the original and isolates your changes.
3 — Identify layout regions and skin files
- Open the .skin files in your new theme folder. These files contain placeholders and markup that mojoPortal uses to render pages. Common placeholders include content zones and module wrappers.
- Look for comments or tokens like asp:ContentPlaceHolder or special mojoPortal tokens that indicate where modules render.
- If your theme includes an .master file, that controls the overall page skeleton — header, footer, main content area.
Make small edits and refresh your site to see changes.
4 — Edit CSS for colors, fonts, spacing
Most visual changes come from CSS. Common edits:
- Color scheme — modify background, text, link, and button colors.
- Typography — set font-family, sizes, line-height for body, headings, and module titles.
- Spacing — adjust margins and padding for layout balance.
- Responsive behavior — ensure media queries are present or add them for mobile screens.
Example: change the main font and primary color in skin.css
body { font-family: "Segoe UI", Arial, sans-serif; color: #333333; } a { color: #1e73be; } .header { background-color: #f5f7fa; } After edits, clear any site cache and refresh pages.
5 — Modify markup in .skin or master files
To change structure (move header elements, add secondary navigation, alter footer), edit the .skin or master template files:
- Make a backup before editing.
- Keep server controls intact (asp: controls). Changing their IDs or typing can break functionality.
- Use semantic HTML where possible (nav, header, footer, main).
- For adding widget zones, consult mojoPortal documentation for the correct placeholders and tokens.
Example: adding a simple hero region in a .skin file
<div class="hero"> <div class="wrap"> <h1><%: Page.Title %></h1> <p class="lead">Welcome to our site — customize this text in the CMS.</p> </div> </div> 6 — Customize module skins and templates
Modules (e.g., HtmlContent, Forum, News) often have their own skin files and templates:
- Look inside module-specific folders under /Skins or /Modules.
- You can override module output by creating a module-specific skin in your theme folder.
- For richer customization, some modules expose templates in the admin UI.
Test module changes on a staging site when possible.
7 — Add or customize JavaScript
For interactive behavior (menus, sliders, modals):
- Place scripts in your theme’s scripts folder or reference CDN libraries in the master/.skin files.
- Avoid conflicts with existing libraries (jQuery version mismatches are common). mojoPortal typically includes jQuery; check which version.
- Prefer unobtrusive JavaScript: add classes or data-attributes and attach behavior in a separate .js file.
Example: initialize a simple slider in theme/scripts/main.js
document.addEventListener("DOMContentLoaded", function() { const slides = document.querySelectorAll('.hero .slide'); // simple slider logic... }); 8 — Make theme settings configurable (optional)
To let site editors toggle options (colors, logo, hero text) without editing files:
- Use CSS variables and expose editable values via the CMS (for example, store values in site settings) and inject them into pages via a small inline style block or a generated CSS file.
- Some themes provide a settings.ascx or admin UI panel. Check docs or community plugins.
Example: using a CSS variable for primary color
:root { --primary-color: #1e73be; } a { color: var(--primary-color); } Then set –primary-color dynamically from a site setting.
9 — Test across browsers and devices
- Check major browsers (Chrome, Edge, Firefox, Safari) and mobile devices.
- Validate HTML/CSS where possible.
- Test accessibility basics: headings order, alt attributes on images, sufficient color contrast, keyboard navigation.
10 — Version control and deployment
- Track your theme folder in Git if possible.
- Work on a staging/development environment and deploy to production when ready.
- If using a deployment pipeline, include steps to clear mojoPortal cache and app pool recycle if needed to pick up file changes.
11 — Troubleshooting common issues
- Changes not appearing — clear browser cache, server cache, and restart the app pool.
- Broken layout after editing .skin — revert from backup; validate ASP.NET control syntax.
- JavaScript errors — check console, ensure scripts load in the correct order.
12 — Resources and further customization
- mojoPortal documentation and community forums are helpful for module-specific guidance and examples.
- Inspect an existing theme to learn best practices.
- Consider hiring a developer experienced with ASP.NET Web Forms for complex changes.
By following these steps — create a child theme, edit CSS and skin files carefully, test thoroughly, and deploy with version control — you can safely and effectively customize the look and behavior of a mojoPortal site.
Leave a Reply