Most security breaches don't start with some elaborate hack. They start with a weak password.

Small and mid-sized companies are especially vulnerable targets because attackers know many organizations are still relying on simple, reused, or predictable passwords. It only takes a one compromised login to open the door to email accounts, cloud systems, financial data, or customer information.

i7MEDIA can help companies close the door with smarter login practices--specifically secure passphrases and multifactor authentication (MFA).

What's Wrong with Traditional Passwords?

Passwords like 123456 or Password1 are still incredibly common. Even passwords that look more complex can often be cracked quickly using automated tools. Today's attackers don't sit there guessing manually--they use software that can test thousands or even millions of combinations in minutes.

Once a hacker gains access, the consequences can be tremendous: ransomware infections, data breaches, wire fraud, or stolen customer records. In many cases, the initial entry point was nothing more than a weak or reused password. There have been cases where it has cost a company thousands of dollars to regain access to their systems, files, and/or records.

Why Passphrases Work Better

A passphrase is different from a typical password. Instead of a short string of characters, it's a longer combination of unrelated words, numbers, and symbols that's easy for you to remember but extremely difficult for a computer to guess.

For example:

• Weak password: Summer2026!
• Strong passphrase: BlueCactus!Drives3Moons

When thinking security here, longer is better. A longer passphrase, it increases the complexity dramatically, making brute-force attacks far less effective. And because passphrases tend to be more memorable, people are less likely to write them down or reuse them somewhere else.

MFA is NON-NEGOTIABLE

Even the best passphrase may not be enough. That's where multifactor authentication (MFA), sometimes called two-factor authentication, comes in. MFA requires at least two forms of verification before access is granted. Typically, that includes:

1. Something you know (your passphrase)
2. Something you have (a smartphone app or security token)
3. Something you are (biometrics like fingerprints or facial recognition)

If a password is stolen in a phishing attack or data breach, MFA acts as a second lock on the door. Without that second factor, the hacker can't get in. It is one of the most effective and affordable ways to reduce unauthorized access.

Making MFA and Passphrases Practical for Your Team

Security only works if people actually use it. Rolling out passphrases and MFA throughout your organization needs to be structured and well managed.

A Managed Services Provider (MSP) can help by:

• Enforcing MFA across email, cloud platforms, VPNs, and internal systems
• Help create clear polices around passphrase standards
• Train employees on how to build secure but memorable credentials
• Monitor for compromised accounts and respond quickly

The goal isn't to make life harder for your team, it's to make your environment significantly harder for attackers.

Take the First Step

Cyberattacks are not just a distant possibility anymore--they're a routine part of doing business online. Strengthening your login security is one of the simplest and highest-impact changes you can make.

i7MEDIA, focuses on practical, proactive cybersecurity that protects your business without slowing it down. If you're ready to move beyond weak passwords and put real safeguards in place, now is the time to start, and we can help.

"Here's all the patterns that every project needs!"

"All patterns are bad and you should feel bad if you use them!"

In this post I will talk about what Architectural Patterns are, when they matter, when to use them and when not to.

I will list out a few patterns in a way that I hope will share understanding rather than dogmatic positions that are often held by tech influencers on social media.

What Are Architectural Patterns?

An architectural pattern is a solution to a specific problem that arises in the design of a project. They come in the form of separating concerns, grouping functionality, abstracting implementation details, and dictating conventions for the team to use.

Patterns can be as simple as breaking features into predictable functions, or to complex layers that handle a multitude of use cases.

When Should One Use Patterns?

When you find your code being hard to navigate, disorganized, difficult to maintain, or having trouble on-boarding new developers, using patterns can make some sense of the chaos.

If you find that your project has a problem, sometimes a pattern will resolve your problem. If your project doesn't have the problem that the pattern addresses, or if you don't understand what problem the pattern address, don't use the pattern.

It's as simple as that.

After 16 years of experience with many CMSs (Content Management Systems), I have found that they benefit greatly from Architectural Patterns, or that the lack of patterns can hinder growth and modernization over the years.

Of all the CMSs I have experience with, mojoPortal is the one I know most about, is dearest to my heart, and the CMS that I will use to showcase my position on patterns.

"I Don't Feel Like I Need Patterns"

This is a good indicator that you don't need patterns. If you are a solo developer, are in a small team, or it's just a side project, there might not be a need for you to even consider a pattern.

If you have a project that later in its lifetime you feel like you would benefit from a pattern, refactoring is always an option.

What are Common Patterns and the Problems They Solve?

There are so many that I couldn't possibly list them, but I'll list a few I've had experience with, and some that I believe to have value in the CMS realm.

Layered (N-Tier) Architecture

If you're familiar with mojoPortal, it mostly implements this pattern.

The idea behind this pattern is to separate functionality concerns into these project layers:

The Data Access Layer holds all implementation code for storing and manipulating data. It becomes the only API for the application to interface with your data, be it from a file, a database engine, or another system.

The Business Layer is the only layer that references the Data Access Layer. It holds domain entities (classes that represent tables in a database for instance) and the logic to bring the data together in code representations of the application features.

The Presentation (Web) Layer is the only layer that references the Business Layer. This layer is for "presenting" the features in the application. It could be a Windows Application or a Web Application, but the main thing it does is give a user interface to the code features from the Business layer.

The reason I said mojoPortal "mostly" implemented this pattern is because while the project is split into the proper layers, a lot of the business logic wound up in the Web (Presentation) Layer. This has made it very difficult to attempt to migrate away from the Web Forms framework it was built on to a more modern and capable framework.

The pros of this pattern are everything is grouped in a logical fashion and you know where everything belongs.

The cons of this pattern are that every layer is tightly coupled to the previous layer. This can be difficult later down the road when replacing dependencies or dealing with providers for services throughout the application. This leads into the next pattern.

Clean Architecture

The purpose of this pattern is much like the previous pattern, but with some tweaks and the implementation of another pattern to facilitate changes to make up for the previous pattern's downfalls.

Much like the Layered Architecture pattern, the application is separated into several projects.

It differs on some key points.

1. All interaction between layers is done through the use of contract interfaces.
   What this means is unlike layered architecture, instead of directly referencing the implementation of a service, you reference the interface the service implements. This allows for easily swapping out the implementation if needed.
2. The layer references are moved around a bit. Rather than each project pointing to the previous project, the projects are placed in an encircling shape, all pointing inward or towards each other in their layer.

The Layers are as such:

The Domain Layer is the ultimate authority of the entire application. It contains all the domain concerns and contracts for the application with no references to any internal or external dependencies. All other layers can use this layer. This layer is often coupled with the Domain Driven Design pattern, but it's not required.

The Application Layer contains the business logic of the application and the contract interfaces that are to be implemented in the Infrastructure layer. Often times this is where the CQRS and/or Vertical Slice patterns are used, but it's not required.

The Infrastructure Layer is where all implementations for the contracted services in the Application are kept. All external dependencies/libraries are abstracted here, allowing for easy replacement from one library to another if needed. An example would be if your project started by supporting SQL Server but later a migration to PostgreSQL was in order, the only assembly that would need to be edited or replaced would be the Infrastructure assembly.

Sometimes the Infrastructure Layer will break out only the database concerns into its own Persistence Layer(s), keeping the database specific code in it's own layer(s), but this is not required.

The Presentation Layer brings everything together through the use of the Inversion of Control Pattern. This allows each layer to register services in the IoC container using the interface contracts and keeping the implementation details hidden from the application. The IoC container handles the dependencies for all services that are registered to it, allowing the system to keep track of lifecycles and dispose of objects so that the implementation reference is kept in one location.

A cool thing about Clean Architecture is that one could have multiple Presentation Layers but share all the core functionality from the Application Layer. Do you need a multi-page website but want to administrate it through a mobile app? The answer could be two Presentation Layers, an MVC/Razor Pages layer for the website, and a Web API layer in conjunction with the mobile app for administration.

The pros of this pattern are that it's incredibly versatile while enforcing strict separation of concerns and external dependencies allowing for a very long-lived application.

The cons of this pattern are that it's moderately complicated, where boilerplate could become monotonous if the application doesn't need to use the pattern.

mojoPortal would have benefited a lot from this pattern being implemented properly, as migrating to .NET (Core) from .NET Framework would have consisted of replacing the Infrastructure layer using the same Application Layer contracts, and rebuilding the Presentation Layer in a .NET (Core) UI framework. The majority of the application wouldn't change.

More Reading:

• The Clean Architecture - The Clean Code Blog [Uncle Bob]
• Clean Architecture - Medium
• Domain-driven Design - Wikipedia

The Repository and Unit of Work Patterns

The Repository pattern is an excellent pattern for data access. The Unit of Work pattern compliments the Repository pattern by allowing for bundles transactions for data integrity.

The Repository pattern's goal is to abstract repeated logic for data manipulation and querying. It allows you to have a single "GetById" method that works for all tables with the code being written once. It keeps your code DRY and makes it easy to do things like adding global query filters for features like soft deletion.

The Unit of Work pattern creates a "unit of work" for each action you take when mutating data. If you need to save a blog post, but it needs a new category that does not exist, the UoW will prevent bad data from being saved if creating the category fails by not saving the blog post. It's an interface for database transactions, if you're familiar with how those work.

Some people raise issue to the Repository (and Unit of Work) pattern when using Entity Framework, as Entity Framework implements its own versions of those patterns. This is completely understandable for application that will realistically never wish to change the library that connects to the database. However, from experience, I would rather have everything in my application have its own contracts to facilitate that possibility of change.

mojoPortal's Data Access layers all use ADO.NET, and their contracts are the implementations, which has made changing to something like Entity Framework for easy migrations and multiple database providers very hard. If the Repository pattern was between the layers, replacement would be a much more feasible.

More Reading:

• Repository Pattern - DevIQ
• Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application - Microsoft

The Query Specification Pattern

The Query Specification pattern is another pattern used in tandem with the repository pattern. It allows us to create domain level specifications that we can use in the Application Layer without having to expose an implementation's API.

For instance, we can create a "GetBookWithAuthors" specification that just takes a Book ID, and pass the specification to the Repository's "FirstOrDefaultAsync" method that will be sure that the underlying data access code will return the appropriate Book with Authors for that book.

More Reading:

• The Specification Pattern in DDD .NET Core - Medium
• Specification Pattern - DevIQ

Plugin Architecture Pattern

The Plugin Architecture Pattern is a pattern that facilitates the ability to add or change functionality of the application with the use of third party bundled code. Most CMSs support this pattern, mojoPortal has its own way of handling modules (plugins) that achieve the same goal.

It's quite simple, the main application provides a set of APIs (the Plugin Interface) that a plugin developer can implement in their plugin, and then register their code with the Plugin Manager, which is responsible for loading and running the Plugin code.

More Reading:

• Create a .NET Core application with plugins - Microsoft
• Plugin Architecture Pattern Overview (.NET) - Nash Tech

Bringing it all Together

By using the Clean Architectural pattern, we have a good foundation to allow us to plug and play any implementations through the use of contract interfaces and Dependency Injection. In the event that the database code needs to be swapped out, a third party library needs to be replaced due to a security vulnerability, or having the ability to provide different implementations for selection through the application's settings, this will help facilitate these use cases.

Using the Repository, Unit of Work, and Query Specification patterns we can prevent repeating code for querying data and we abstract away data query implementation, and it allows us to support or swap database providers at runtime.

The Plugin pattern allows for us to expand the application in any way that is needed. Be it adding new features (Blog, Forums, Event Calendar, CRM, etc.) or modifying an existing feature (swapping out authentication methods, listening for events to modify data, etc.) it makes the application as flexible as possible.

Conclusion

These are what I believe are the foundational building blocks for a CMS like the next version of mojoPortal could use, and who knows? I might be doing just that. 😉

Does that mean that all applications should use Clean Architecture or the Repository patterns? Clearly not.

Patterns are like shoes, if they fit and do the job that you have a need for, use them, otherwise don't. Just don't make the mistake that if your application doesn't need patterns that no one needs patterns, as many people on the internet so readily declare.

A Brief Look At New Features

Simple, Beautiful Select Elements in 2026

Today we'll be looking primarily at the new options for <select> elements and how they give developers much more control over the element and remove the need for unwieldy JavaScript solutions that would often be used to bring drop-down boxes into alignment with the rest of a site's theme. Many JS solutions that have been popularized over the years are either so heavy that they become a problem for optimization (especially an issue for mobile users), or so light that they didn't properly handle all of the native functionality of a <select> element resulting in lost accessibility functionality.

The browser's in-built <select> element automatically handles many necessary functions for mobile responsiveness, ensuring the drop-down is visible either above or below the element depending on the current view state when the element is interacted with, option readability and browsability via keyboard, alternative select views for small devices (such as the pop-up you get on many phones when pressing a select that is different from the fly-out you might get on a desktop), native indexing, and more. Replacing all of these features with JavaScript just to make something look better has often been a painful choice for developers, because allowing a whole component to just not match the rest of your styles can make your product seem cheap, but having a heavy script to handle all of these features (and making sure that script stays up to date with modern browser features over time) is a high price to pay for appearances.

So it's really good news that this problem is being addressed in CSS itself! Let's look at what can be done with the new features. First, we need to enable the new features with CSS like so:

@supports(appearance: base-select) {
	select,
	select::picker(select) {
		appearance: base-select;
	}
}

This CSS simply enables the new features on your <select> element, and the dropdown ::picker pseudo-element. By default this is a progressive enhancement because browsers which don't support appearance: base-select; yet will simply ignore your styling of the pseudo-elements. If you want to make changes to your select elements directly and worry about any damage that might cause to older browsers, you can be extra safe by including the @supports query as we show here.

Once you've enabled the new features, you can style the ::picker pseudo-element just like you would any other element. Check out some of what we can do in this codepen.

See the Pen Base-Select Feature Fun by Isaac Hall (@Isaac-Hall) on CodePen.

We have total control over the dropdown just like we would if we created our own in HTML and used JavaScript to make it function, but this time all the functionality is already handled by the browser, and our code remains completely accessibility-compliant with no extra work. We can add images, extra elements, descriptions, and anything else we like to the select options and control their display with CSS.

As an added bonus, we used the new sibling-index() feature inside our animation delay to cause each option to fade in at a different speed based on its index in the <select>.

option {
	transition: opacity 200ms ease, translate 500ms ease;
	transition-delay: calc(200ms * (sibling-index() - 2));

	@starting-style {
		opacity: 0;
		translate: 15px 0;
	}
}

Using sibling-index() in a transition delay lets each element get a different delay because they are all at a different index, creating a nice swinging-in effect when the select is opened. There are probably a million better ways to use this feature, but this gets the point across. Note that we arbitrarily offset the index by -2 because we don't want it to count the base <button> element or the first default <option> siblings, so we just subtract them from the count on each option.

Considering all these fantastic tools that were rolled out in 2025, we're excited to see what comes along in 2026.

Note: The CSS features described in this blog were not fully supported in all browsers at the time this post was written. Consider checking in with caniuse.com before using them in production environments.

FOR IMMEDIATE PUBLIC RELEASE:

Microquiz Limited, a website development and hosting company based in Coventry, England and i7MEDIA, an IT Services agency based in Excelsior Springs, Missouri, USA, have entered into an agreement for i7MEDIA to begin servicing Microquiz clients.

Excelsior Springs, Mo (October 30, 2024) - It is an exciting day for i7MEDIA, a longtime provider of mojoPortal development and support services to Microquiz, has entered into an agreement to acquire and service all customers of Microquiz Limited. 

Microquiz has used mojoPortal relied upon i7MEDIA's expertise for building and supporting hundreds of mojoPortal websites over the past decade. Their services include domain registration, website and email hosting, website design, and content management. 

With this acquisition, Microquiz customers will enjoy the full depth of i7MEDIA's proven model for providing great customer support and affordable, comprehensive IT Services. i7MEDIA will be migrating customers to their private cloud service, which will improve security and performance while offering new services and greater control for customers.

i7MEDIA was founded in 2008 as a website design and hosting company and built a portfolio of clients on every continent. Since then, it has expanded its service offerings to include application and database development, cloud provider support services, and managed IT services. i7MEDIA's growth in recent years is attributed to its dedication to building strong relationships with its clients.  

Microquiz customers should contact i7MEDIA with any questions they may have.

Recently, two of the world's largest email providers, Google and Yahoo, announced they will soon require email senders to comply with more stringent email authentication policies—senders not in compliance with the new requirements will see issues getting their emails delivered in 2024.

The good news is that for the vast majority of i7MEDIA customers, there's nothing anyone needs to do to ensure emails are delivered to Google and Yahoo once these rules take effect. We've already been compliant with the rules for years. Additionally, we welcome these new requirements because we have tried to enforce them on emails being sent to our customers in the past but have not been able to because the "big guys" weren't doing it causing our customers to believe our systems weren't working properly. So, we're pretty excited about these changes as they will help us protect our customers Inboxes.

Google and Yahoo have good reason to change the rules for email senders

Properly authenticating emails has been a best practice for a long time, but most providers haven't bothered to ensure their services are using the tools available to protect their emails. That’s a major problem: If emails aren't properly authenticated, it is incredibly easy for bad actors to impersonate domains and to send phishing attacks—that will damage an entire domains sending reputation.

We are focused on protecting our users from spam and unwanted emails, but if other senders fail to properly secure their systems and leave their customers wide open to exploitation, that job is incredibly difficult. Gmail and Yahoo have finally decided that proper email authentication and following deliverability best practices are no longer a nice-to-have (THANK YOU!). To ensure our clients emails continue to make it to the inbox, we have to comply with key best practices for email authentication and spam prevention. That means:

1. Authenticating your emails using DKIM, SPF, and DMARC.

2. Reducing spam and maintaining a spam complaint rate under 0.3%.

3. Allowing people to unsubscribe by clicking just one link, and honor unsubscribes within two days. 
   We handle this automatically for our customers on our "professional" email service plans.

4. RFC 5322 compliance, PTR records, rDNS
   We have our customers covered here.

5. Making sure your sending server IP addresses have valid reverse DNS records.
   We have our customers covered here.

6. Use a TLS connection for transmitting email.
   We have supported opportunistic TLS for all outbound email since we first started hosting email, ensuring messages are encrypted in transit.

These changes benefit all of us

While these new requirements primarily target large bulk senders (many requirements will only apply to high-volume senders who send more than 5,000 emails a day). For smaller senders (most of our clients) sending mostly transactional email (not newsletters), there is less of a chance you're going to be impacted by the changes—but you can't ignore them.

We know from experience that these requirements will likely apply to all senders in the future. Besides, who would want to run their business in a "sort of compliant” and haphazard manner? 

So, whether our clients send just a few emails a day or a few million an hour, protecting their domains, avoiding spam, and following deliverability standards is top priority for us to keep our clients safe and their email delivered reliably.

What our clients can expect

For most of our clients, you can just expect to have your email delivered as always. For some, you will hear from us asking you to create some DNS records (DKIM, DMARC, SPF) or give us temporary access so we can create these records. That's it. We'll handle the rest and that's not much because we've always done this for customers who host their DNS with us and we've always tried to get it done for those who do not.

If you have any trouble with your email or questions about this article and the new requirements, please contact us as we'd be very happy to help you out. If your email provider isn't responsive, hasn't bothered implementing these changes, or doesn't have U.S.-based support, those are all really good reasons to give us a shout! 

FOR IMMEDIATE PUBLIC RELEASE:

Advertinet, Inc., a website development and hosting company based in Carmi, Illinois and i7MEDIA, an IT Services agency based in Excelsior Springs, Missouri, have entered into an agreement for i7MEDIA to purchase Advertinet's assets and customer base.

Excelsior Springs, Mo (January 3, 2023) - It is an exciting day for i7MEDIA, a longtime provider of hosting services to Advertinet, has completed the purchase of assets and customer base from Advertinet, Inc. 

Joe Davis, i7MEDIA Managing Director, has worked with Sam Westgate, Advertinet President, since 2011 when Advertinet moved its hosting services under i7MEDIA's care. Since that time, i7MEDIA has provided development, design, and support services as well.

With this acquisition, Advertinet customers will enjoy the full depth of i7MEDIA's proven model for providing great customer support and affordable, comprehensive IT Services.

Over time we'll be migrating Advertinet's services to our own and we'll do this minimal downtime for all customers. Advertinet customers will see a marked improvement in performance and, for email, a more modern webmail interface with new features, which will better support their businesses. We'll work directly with customers to ensure they do not experience any downtime and we'll train them on the new email system. Best of all, there will be no charge for these upgrades. 

Advertinet customers should contact i7MEDIA with any questions they may have.

Media wishing to learn more about this event, please send all questions to  

FOR IMMEDIATE PUBLIC RELEASE:

i7MEDIA has purchased mojoPortal and all of its commercial modules

Kearney, Mo (Feb 6,  2017) - It is an exciting day for the mojoPortal project! i7MEDIA, a longtime supporter of the mojoPortal project, has completed the purchase of the open source project and the commercial modules available on the mojoPortal website from Source Tree Solutions.

Joe Davis, i7MEDIA President, has been strong supporter of mojoPortal since 2008. Joe built his business around this versatile and user-friendly content management system. i7MEDIA, is dedicated to furthering the development of mojoPortal and its tools.

Rest assured mojoPortal will remain an open source project and there are no plans to change that. However, I7MEDIA has plans for expanding mojoPortal to help it stay relevant and provide the very best .NET CMS platform on the market today. 

Joe Audette, of Source Tree Solutions, is very enthusiastic about the new life of mojoPortal:

Joe Davis and i7MEDIA have always been the most qualified consultants for mojoPortal other than myself, and I've always had great confidence in referring customers and projects to them over the years.  Joe Davis has been a good friend and has been my go to guy when I needed to refer a customer or project that I did not have the capacity for. Whether you need design help, hosting, or custom feature development, i7MEDIA is the team you want with years of experience. mojoPortal was my baby for over a decade, and I am very glad to know my baby is in good hands! Long live mojoPortal! Joe Audette, mojoPortal Founder

mojoPortal has always been easy for users to add and manage their content. Over the past few years, though, it has fallen behind other systems which have taken more modern approaches to management and more fully utilized the capabilities of modern browsers. i7MEDIA has developed add-on features for mojoPortal which make content management easier and they are working on packaging these features for the masses to use.

Development of add-ons for mojoPortal isn't necessarily hard but there is a bit of a learning curve and quite a few steps one must take to prepare a working development environment. The focus will be on cutting down on the number of steps and making the process easier overall. They will also explore possible MVC and WebApi implementations of some features, especially administration features like the File Manager. 

It has always been possible to create beautiful sites with mojoPortal but the built-in skins were not good examples. i7MEDIA is working on providing newer skins to help showcase the power or mojoPotral.  i7MEDIA is committed to making sure that mojoPortal is seen as a designer-friendly CMS. 

A new version of mojoPortal is scheduled for release in the next couple of weeks with several small fixes, a few clean bootstrap-based skins and a brand-new file manager to replace both of the current file managers and the link and image picker used in the WYSIWYG editors. That's right, one file manager that does it all. 

For the latest news, check out mojoPortal’s Facebook and Twitter feeds.

As you may know, Joe Audette, founder and chief developer of mojoPortal, has announced that he will no longer be developing mojoPortal.

In the 7+ years I have known Joe and worked with mojoPortal, i7MEDIA has become the most trusted and experienced mojoPortal consultancy in the world. We have happy clients on every continent except Antarctica ranging in size from small start-ups to major international corporations and organizations. We've built and helped others build hundreds of mojoPortal sites. Most of our projects involving mojoPortal are still operational and we're adding more even as I'm writing this post.

Technology moves fast and that's a good thing, but sometimes it can move at a pace which can cause businesses to lose money if they're not careful. Whether a small company spends a few thousand dollars to build a nice website and customer portal or a large one spends several thousand dollars, scrapping what they have and building new just because there's a new technology (or even not new but more popular) doesn't make business sense.

We have a lot of clients who are using perfectly good and reliable WebForms systems like mojoPortal. We take a great deal of pride in the support we provide to our clients so we will be supporting and even providing enhancements to mojoPortal until we don't have any clients needing it anymore. After speaking with several of our clients over the past couple of months I can tell you, definitively, that we'll be supporting mojoPortal for quite a long while and that's fine by me and my team of mojoPortal experts.

So, if you're using mojoPortal already and you are looking for support, we will help you. If you're considering using mojoPortal because of its rich feature set, we will help you. Contact us today so we can help you!

The Canon

The process for upgrading mojoPortal is no different if you are upgrading from a really old version or a relatively new version. mojoPortal doesn't have "minor" updates or "major" upgrades. The terms update and upgrade can be used interchangeably when referring to mojoPortal. Version numbers don't mean much, version 2.4.0.0 didn't necessarily contain any more new features or bug fixes than 2.3.7.2. The version numbers increase by 0.0.0.1 each time a database change or a set of database changes is needed. There are never "upgrade" or "update" packages released by mojoPortal. All releases packages contain a full installation which if copied to an existing site will upgrade the site. If you do not backup your site and database before upgrading, you are not being responsible.

Process Overview

1. Take the Site Offline
2. Backup the Site Files and Database
3. Prepare the web.config File
4. Copy New Files to the Site
5. Bring the Site Online
6. Run the Setup Page
7. Make Skin Changes if Needed

Take the Site Offline

You want to do this prior to backing up the site because once the site is offline, no one can make any changes to it. If you were to backup the site before taking it offline, someone could make a change which is not backed up.

To take the site offline, add an "App_Offline.htm" file to the root of the site. The root of the site is the same location where the web.config file resides. You can download an example App_Offline.htm here.

Backing up

There are many, many ways to backup files and databases. We will cover two methods for backing up files and two methods for backing up databases (one for MSSQL and one for MySQL).

Backing up Files When You Have Access to the Server's Desktop

Use this method if you have access to the servers desktop. If you don't have access to the servers desktop, use the FTP method.

In general, you will want to browse to the location of your site files. If you do not know what this is, you should contact your server admin or, if you are familiar with IIS, check the physical path for the site in IIS. Once you have located the site files, select all of them and create a zip file of them. We use 7-Zip but you can use whatever you like.

Backing up Files with FTP

Download a good FTP client which provides verbose logging and an easy way to retry operations which may have failed. We use FileZilla and recommend it above any other FTP client.

Open your FTP client and connect to your server. Download all of the files in your site to a directory on your computer. Check the FTP Client's log for any failures and re-download any files which did not download properly.

Backing up MSSQL Database in SQL Server Management Studio

Use this method if you have access to the database using SQL Server Management Studio (SSMS). Some hosting providers provide this access but the more security minded hosting providers (like i7MEDIA) do not. If you cannot access the database with SSMS, use your hosting providers control panel tools to back up your database. If you are an i7MEDIA customer, follow the instructions in our "Backing up and Restoring SQL Server Databases" knowledge base article.

Create the Backup

1. Open SSMS and connect to the database server hosting the database.
2. Right-click the database in the Object Explorer of SSMS and then select Tasks > Back Up. For further instructions, read the "Create a Full Database Backup" article on the MSDN website.

Backing up MySQL Database using MySQL Workbench

Use this method if you have access to the database using MySQL Workbench. Some hosting providers provide this access but the more security minded hosting providers (like i7MEDIA) do not. If you cannot access the database with MySQL Workbench, use your hosting providers control panel tools to back up your database. Many hosting providers do provide access to a tool called PHPMyAdmin which you can use to back up your database as well. If you are an i7MEDIA customer, follow the instructions in our "Backing up and Restoring MySQL Server Databases" knowledgebase article.

Create the Backup

1. Open MySQL Workbench and connect to the database server hosting the database.
2. Select "Data Export" under "Management" in the Navigator.
3. Select the database in the "Object Selection" panel.
4. Select your desired options in the Options section and click the "Start Export" button. Note: do not select the "Skip table data" option because you will not end up with any of your site data if you do select this option.

Prepare the web.config File

You should use the web.config file which comes with the mojoPortal release. This cannot be stressed enough because trying to compare every line of your old web.config file and the new one will take a long time and you may miss something. Nearly all of the settings you might change should be done in the user.config file anyway so you shouldn't have many changes to the web.config file in the first place. A few exceptions to this rule are listed below:

machineKey

The machineKey is used for encryption and decryption of authentication cookie data and view-state data. In mojoPortal it is also used for encryption and decryption of stored passwords if the Password Storage option is set to "Encrypted." You should copy this from your previous web.config file to the new web.config file. Read our "Separating Sections From the mojoPortal web.config File" article if you have a lot of sites and don't want to modify the new web.config for each of them.

Keys Related to Large File Uploads

The httpRuntime and requestFiltering elements in the web.config help with the support of large file uploads. If you have made changes to these elements, you will need to copy those changes to the new web.config file. Read the Supporting Large File Uploads article in the mojoPortal documentation for more information on this topic.

Keys Related to Error Pages

The configuration of custom and http error pages for a website hosted in IIS is saved in the web.config file. If you have changed these settings from the default values, you'll need to copy them over to the new web.config file. The customErrors element contains the settings for handling .net related errors and the httpErrors element contains the settings for handling http errors (e.g., 404). Tip: take a look at our article "Pretifying the mojoPortal Error Page" for information on how to modify the .net error page.

If you have several items which cannot go in the user.config file, you should keep them saved in some kind of notes file with the site. For best security, save your notes file with a .config extension to prevent it from being download via the web.

Note: this is an upgrade, not a new install so you should not copy create a new user.config file.

Copy New Files to the Site

If you have access to the servers desktop you can simply copy the files from the release (with changes made to the web.config) to the location of your site files in the order listed below. When prompted to with the option merge existing folders or not, select "yes." When prompted to "Copy and Replace" for existing files or "Don't copy," check the "Do this for all conflicts" checkbox and then click the "Copy and Replace" option.

If you are accessing the site with FTP, again be sure you are using a good FTP client. Using the FTP client, upload all of the files in the order listed below. When prompted to overwrite existing files, choose whichever option overwrites the existing files.

Order to Copy or Upload New Files/Folders

1. Setup folder
2. ClientScript folder
3. Data folder
4. All other files and folders

Bring the Site Online

The site was taken offline by adding the App_Offline.htm file to the root of the site. To bring the site back online, all you need to do is rename or move the file. We generally customize our App_Offline.htm files with customer logos so we simply rename the file to App_Offline.config instead of moving it elsewhere.

Run the Setup Page

The setup page runs all of the database scripts for all of the features which have database changes. It also processes all of the feature configuration files which control what settings you see on the settings page for module instances.

To run the setup page, open a web browser and go to http://www.yourwebsite.url/Setup/Default.aspx. Once all of the scripts run, you will see a summary at the bottom of the page along with a link to the site.

If you see any errors, you will need to address them. Generally, you shouldn't see any errors but we have compiled a short list of the most common errors.

Setup is disabled. To continue, please set DisableSetup to false in Web.config.

This is showing up because the DisableSetup key in the web.config or user.config file has been set to true. If you were logged in to the site prior to upgrading, you will not see this error. To get around this, open the user.config file and change the setting to false. Next, open the web.config file and add a space to the bottom of the file. Finally, reload the setup page.

The system cannot connect to the MSSQL database. Please check your connection string.

The Connection String key in the user.config file is not correct. This error is always accompanied by more detailed information to help you troubleshoot the problem. If the database server can be accessed, it will state something to the effect of "...error occurred while establishing a connection..." If the database name, username or password is incorrect, it will state something to the effect of "the login failed."

Make Skin Changes if Needed

The skins in the mojoPortal release packages are not copied over the skins used by sites (located in \Data\Sites\[sitenum]\skins). The skins located \Data\Skins are updated or appended with the updated or new files from the release package. If you are using a skin which came with mojoPortal and have not modified it, you can copy it from \Data\Skins to \Data\Sites\[sitenum]\skins.

If you are using a custom skin or you have modified a packaged skin, you should check the "Important Skin Changes" article in the mojoPortal Documentation for details on any changes you need to make to your skin to support the new release. You will want to check the details of every version between your old version and the new version you are installing. This is rather easy as the changes are listed in descending order in the article and there aren't very many.

Summary

See, it's rather simple. You don't need to worry about database scripts, different methods for minor or major versions, lots of file merging or anything like that. Really, all you need to do is create a backup and copy over the new files.

If you run into problems, check out the mojoPortal Forums. Do a search for your issue before posting because someone else may have already reported the problem and resolution has been provided by the community.

Want someone else to do it?

If you would rather have someone else handle upgrades for you, check out our Upgrade Service.

Want to learn more about mojoPortal?

If you enjoyed this guide and would like to learn more about mojoPortal, check out our Training Classes.

Now, it gets the job done but it's kinda plain so we revamped it on our site:

Is it better? Well, it's still an error message but at least it has some character. :-)

It's actually quite simple to accomplish as well:

1. Create a new file in the root of your site, we'll call it Oops.htm.
2. Add the following to it:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Error</title>
		<link href='https://i7media.com//fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			body {
				background: #f2f5f6; /* Old browsers */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiNlM2VhZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzhkN2RjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
				background: -webkit-radial-gradient(center, ellipse cover,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
				background:    -moz-radial-gradient(center, ellipse cover,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
				background:		-ms-radial-gradient(center, ellipse cover,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
				background:		 -o-radial-gradient(center, ellipse cover,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 12+ */
				background: 		radial-gradient(ellipse at center,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
				display: table;
			}

			div.wrap {
				display: table-cell;
				vertical-align: middle;
			}
			
			div.inner {
				margin: 0 auto;
				width: 50%;
			}

			h1 {
				font-size: 40px;
				font-family: 'Architects Daughter', cursive;
				margin-top: 0;
				text-align: center;
			}

			p {
				font-size: large;
				font-family: Arial, Helvetica, sans-serif;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				<h1>
					Ouch! That Hurt!
				</h1>
				<p>
					So sorry for the inconvenience but an error has occurred while trying to process your request.
				</p>
				<p>
					The error has been logged and will be reviewed by our staff as soon as possible. It's possible the error was a momentary hiccup and you may wish to use the back button to try your request again, or you can to the <a href="default.aspx">home page</a>.
				</p>
			</div>
		</div>
	</body>
</html>

3. Open your web.config file and locate the line which looks like this:
   <customErrors mode="RemoteOnly" defaultRedirect="Error.htm">
4. Replace Error.htm with Oops.htm
5. Save your web.config file.

Don't forget to make this change to your web.config each time you upgrade mojoPortal.

Happy mojo-ing!

jQuery is a JavaScript library, mostly used for expediting script writing. jQuery UI is a user interface built with jQuery. In the words of jQueryUI.com:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Now you might think "hey, that sounds nice!", and "how do I use it on my website?". You can find instructions on how to use jQuery UI on their website, here.

But, lucky for those of us using mojoPortal, jQuery is already built in — and so is jQuery UI. This post will explain how to use it with mojoPortal.

Creation

The first thing you need before you can integrate a new UI style into mojoPortal, is a new UI style. I highly suggest using the jQuery UI Themeroller, as it is much easier than manually changing the CSS and images for an old UI theme.

Before you start, you might find it helpful to click the "gallery" tab on the left and look through the native themes to see if they have something a little closer to what you want. Once you've found one that you like, click the "edit" button under it in the gallery, and you're ready to begin making changes.

When I do this, I usually go to my mojoPortal site design and use a color-picker to pick out the primary colors from the skin, then add them to my UI theme until it matches the skin pretty well. Hint: The parts of mojoPortal that use the UI tend to use it very heavily, so you'll want to go easy on the bright colors.

Once you have the theme the way you like it, click the "download theme" button. This will bring you to a page that lets you pick what UI features you need. You can disable these as you like, but if you don't care about the file size just leave it all on the defaults and scroll to the bottom of the page, where you can name your theme and then click download again.

Encouragement

The next part can be a little confusing the first time you do it (which is why I wrote instructions), but after you get through it once you'll realize it's actually quite easy. Working for i7MEDIA, I do it on a regular basis and now the whole process only takes me 5 minutes.

I've written detailed instructions below, if you follow them it shouldn't take you too long either. Have fun!

Installation

Once you've gotten your theme downloaded, you'll need to extract the zip file into some folder on your computer. Next, navigate within that folder to the "css" folder, and then to the folder named whatever you named the theme (default is "custom-theme"). Now just follow these instructions:

1. Inside of the "custom-theme" folder, there are two css files and a folder.
2. Before putting them in your skin, you'll want to rename "jquery-ui-#.#.#.custom.css" to "style-jquery.css", and rename the "images" folder to "jquery-images".
3. Copy the renamed images folder and css file into your skin.
4. Open the "style.config" file within your skin and add a line that corresponds with the name of the new file.
   In example: <file>style-jquery.css</file> — where "style-jquery.css" is the name of the css file you copied from the folder.
5. Now there's some slight editing you need to do within the jquery css file. Open it and do a "find-and-replace" (usually ctrl+f or ctrl+h) for the following keys:
   • Find: (images/ — Replace with: ('jquery-images/ [1].
   • Find: .png) — Replace with: .png') [2].
   • Find: (opacity — Replace with: ('opacity.
6. Now for the next one, you can't automate the find and replace because the numbers at the end of the "opacity" rule are always different. You'll need to look for any rules like this: filter:Alpha('Opacity=#), and replace them with this: filter:Alpha('Opacity=#') — The only difference being the new apostrophe before the last parenthesis.
7. Next, open your "layout.master" file, and search for: <portal:StyleSheetCombiner. Once you've found it, check for the following key inside of it: IncludeJQueryUI="false". If this is set for "false", you'll be okay — if it is "true", change it to "false".

Hopefully, now your new UI theme works. However, if you have a really old version of mojoPortal, or are using a really old skin, you might need to read the next section, too.

Changing mojoPortal's native jQuery version

As of this writing, the latest version of jQuery UI is 1.9.2. The latest version of mojoPortal (2.3.9.4) ships with UI version 1.9.0 — as you can imagine, this could be a problem.

Usually, your particular skin will be configured to use the version of the UI that its theme was built to use when it was created. However, if you try to upload a new UI theme as per the instructions above, but find that it is not displaying properly or certain features of the UI are buggy/broken, you might need to force the mojoPortal installation you have to use a new version of the UI.

To do this, simply follow these instructions:

1. Open the layout.master file in your skin.
2. Search for the following line: <portal:ScriptLoader.
3. Make sure that the ScriptLoader has the following key: AssumejQueryUiIsLoaded="true"
4. Once that's done, add the following line somewhere under the ScriptLoader:
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> - [3]
5. The numbers in that link can be changed from "1.9.2", to whatever is the latest version of jQuery UI. You can find what the latest version is and easily find the google CDN link at the bottom of this page, under "quick access".

You might also find this article helpful: http://www.mojoportal.com/self-hosting-jquery-jquery-ui-files

Help

If you've read this article, followed the instructions, and ripped out your hair trying to figure out why something is still broken… Well, you might need a psychiatrist — but you can also just try asking us for help in the comments section below!

[1] In this case, "jquery-images" is the name of the "images" folder that you renamed before putting it in your skin.
[2] The apostrophes are necessary to stop the StyleSheetCombiner from failing to combine the CSS properly.
[3] If your site has SSL, or if you just prefer not to call the script this way, you can call call it via the web.config.

Earlier this year we released a free skin called SwiftBlue. Now we're happy to announce that we've just released another HTML5 mojoPortal skin called Mocha. Mocha is SwiftBlue's Sister skin, and more are to come. It was designed as a contribution to the mojoPortal community and the html5mojo project. Like SwiftBlue, Mocha was created with semantics-friendly HTML5 Markup.

Check out the live demo website to see what your mojoPortal website could look like today!

Features

As with all i7MEDIA Skins, Mocha has detailed style for every feature found in mojoPortal, most notably for the Event Calendar, Event Calendar Pro, Blog, Forums, Feed manager, and jPlayer Media Players.

Other features include:

• Mocha includes support for a few basic content templates, including a fancy content slider. Making use of these templates will help you to create easy and professional content formats, so that you can spend less time worrying about layout and more time perfecting the content that your viewers came to see.
• We've created a custom design for the dedicated Sign in and Register pages on Mocha. This way it is easier for your users to interact with the site, without having to sort through other page content.
• Mocha utilizes a fancy User Bar based on Twitter Bootstrap. The bar includes a lot of features, links to mojoPortal, member profiles, and the ability for administrators to toggle the settings and edit links - this way you can see your site the way your users do. But mostly it's just beautiful.
• HTML5 is an important new language that is of high interest to website owners, this is because of the implications for SEO, among other things. Mocha is HTML5 Friendly. Not sure what this means? We explain more on the live demo site.

Support

The Mocha help center is built to ensure that your time working with Mocha is successful.
The skin help center covers topics like:

• Installation of Mocha
• A basic introduction to CSS Classes and how they effect you in mojoPortal
• An explanation of how to use the Mocha Content Templates
• A FAQ to answer common questions about Mocha
• A form so that you can request help, and get answers to questions that weren't answered on the FAQ.
• Another form so that you can report any bugs you find. This is important because we'll be trying to keep the skin up to date. We feel that getting input from the users of the skin is the best way to make sure the skin is maintained well over the course of mojoPortal updates.

Check out the Mocha Skin-Help center now.

Mocha and SwiftBlue are just another way you can make your mojoPortal site shine with a little help from i7MEDIA. Keep your eyes out, we'll be releasing more free skins soon!
Interested? Check out the Mocha live demo site

.prettycyclenav .cyclenav {
	margin: 5px 0;
	text-align: center;
}
	
.prettycyclenav .cyclenav a {
	text-indent: -9999px;
	line-height: 40px;
	background-color: #A5A5A5;
	width: 14px;
	height: 14px;
	overflow: hidden;
	display: inline-block;
	margin: 0 5px;
	text-decoration: none;
}
	
.prettycyclenav.withnumbers .cyclenav a {
	padding: 3px;
	font: 14px/1 'Rationale', Charcoal, serif;
	text-indent: 0;
	color: #fff;
}
	
.prettycyclenav .cyclenav a:focus,
.prettycyclenav .cyclenav a.activeSlide {
	background-color: #e26917;
}	

.prettycyclenav .cyclenav a:hover {
	background: #636363;
}

SwiftBlue is the first in a series of template skins developed by i7MEDIA for mojoPortal. It was designed as a contribution to the mojoPortal community and the html5mojo project. SwiftBlue has been created with semantics-friendly HTML5 Markup.

Check out the live demo website to see what your mojoPortal website could look like today!

Features

As with all i7MEDIA Skins, SwiftBlue has detailed style for every feature found in mojoPortal, most notably for the Event Calendar, Event Calendar Pro, Blog, Forums, Feed manager, and jPlayer Media Players.

Other features include:

• Support for a number of content templates is included in SwiftBlue. Using these templates makes it easy to make your data appear on the page in a nice professional format. It doesn't cover everything, but it will help you with the basics so you can spend more time perfecting your content and less time worrying about basic layout.
• SwiftBlue is HTML5 friendly. Not sure what this means? We explain more on the live demo site.
• Custom styled dedicated Sign in and Register pages, this way potential users don't have to sort through the regular page content to find what they need to interact with the site.
• A fancy User Bar based on Twitter Bootstrap. The bar includes a lot of features, links to mojoPortal, member profiles, and the ability for administrators to toggle the settings and edit links - this way you can see your site the way your users do. But mostly it's just beautiful.

Support

The SwiftBlue help center is built to ensure that your time working with SwiftBlue is successful.
The skin help center covers topics like:

• Installation of SwiftBlue
• A basic introduction to CSS Classes and how they effect you in mojoPortal
• An explanation of how to use the SwiftBlue Content Templates
• A FAQ to answer common questions about SwiftBlue

And if that's not enough, we've set up an easy way for you to request help or report a bug. Check out the SwiftBlue Skin-Help center now.

SwiftBlue is just another way you can make your mojoPortal site shine with a little help from i7MEDIA.
Interested? Check out the SwiftBlue live demo site

Well, here's an extremely easy way to hide the links without sacrificing the usability of mojoPortal. This solution is completely skin based so it doesn't require any additions to the mojoPortal core.

First, we add the following to our skin script (see "Optimize Your mojoPortal Skin Scripts" for more info):

function HideEditLinks() {
	$(".modulelinks").hide();
	$(".ModuleEditLink").hide();
}

function ShowEditLinks() {
	$(".modulelinks").show();
	$(".ModuleEditLink").show();
}

$(document).ready(function() {
	var editLinksState = Get_Cookie('editLinksState');
	if (editLinksState != null) {
		if (editLinksState == 'hidden') {
			HideEditLinks();
		}
		if (editLinksState == 'visible') {
			ShowEditLinks();
		}
	}

	$("a#togglemodulelinks").click(function() {
		editLinksState = Get_Cookie('editLinksState');
		if (editLinksState == null || editLinksState == 'visible') {
			HideEditLinks();
			Set_Cookie('editLinksState', 'hidden')
		} else if (editLinksState == 'hidden') {
			ShowEditLinks();
			Set_Cookie('editLinksState', 'visible')
		}
	});
});

Second, we add the following inside the AutoHidePanel in the layout.master:

<a href="#" rel="nofollow" id="togglemodulelinks">Toggle Edit Links</a>

The code above simply hides the links if they're shown and displays them if they're hidden.

Placement of the "Toggle Edit Links" link can be done with CSS but it should definitely be inside of the AutoHidePanel. The AutoHidePanel will ensure that the link isn't shown unless one of the Admin Toolbar items is shown. You could add another AutoHidePanel to the layout.master but there's no point in increasing page load if you don't have to.

Happy mojo-ing!

Here's the code for it:

<portal:WelcomeMessage id="WelcomeMessage" runat="server"
	CssClass="greetinglink"
	RenderAsListItem="true"
	OverrideFormat="Welcome, <a id='lnkMyAccount' href='https://i7media.com/Secure/UserProfile.aspx' title='Manage your User Account'>{0}</a>" />

The {0} is where the user name will be placed.

And that's that. Happy mojo-ing!