A stylesheet or script in your asset library affects a site only after you link it to that site. Linked files load on every page, in the order you set. This article explains how to link, reorder, and unlink files, and how to resolve common styling issues on sites and event microsites.
Prerequisites
- You need the Portals Day-to-Day User Access or Portals Administrator policy to change site settings.
- The stylesheet or script must already exist in your asset library. If it does not, create or clone it there as a CSS or JavaScript asset first. This screen lets you attach a file, not write one.
Linking a File
- Go to Portals & Microsites › Site Settings.
- Open the CSS & Javascript tab.
- On the Linked Files card, select the + beside Stylesheets or Javascript files.
- Choose one or more files from the list, then confirm.
- Select Save Changes.
Result
Every page of the site loads the linked files in the order they appear in the list. The Stylesheets picker shows only stylesheet assets, and Javascript files shows only script assets, so you cannot link the wrong file type from this dialog.
Tip
If page content looks narrower than expected, create a custom stylesheet and link it here. For example, you can set the content container’s max width to 100% to widen the usable content area.
For a focused style change, such as a color update, clone the stylesheet that is already linked, edit the clone, and then swap in the new version here. That way, you are not editing a shared stylesheet live.
Warning
A linked JavaScript file must already live in your asset library. This screen cannot point to a script hosted on an outside domain and load it automatically. If you need to run a script from elsewhere, bring its content into an asset you upload or write here. If the content is a full page instead of a short script, you can host that page externally and embed it into a portal page with an iframe. Customers have used that second approach as a workaround, but it is not an officially supported path, so test it before you rely on it.
Setting the Load Order
Drag a file up or down within its own list to change when it loads. You cannot drag a stylesheet into the script list, or a script into the stylesheet list. The new order takes effect after you save.
Unlinking a File
Hover over a linked file to show its trash icon, select it, and confirm. After you save, the file no longer loads on the site, but it stays in your asset library.
Warning
You cannot delete a stylesheet or script from your asset library while any site still links to it. Unlink it from every site first if you want to delete it.
Drag a file up or down within its own list to change the load order. Stylesheets stay in the stylesheet list, and scripts stay in the script list. The new order takes effect after you save.
When two linked stylesheets set a rule for the same selector, the one that loads later generally wins unless normal CSS specificity gives the earlier rule more weight. That makes the order of this list important. If a stylesheet is shared with other people, such as a consultant’s or vendor’s base stylesheet, add your changes in a second stylesheet linked alongside it instead of editing the shared one directly. This keeps your changes recoverable and avoids overwriting updates the other party makes. If you do edit a shared stylesheet directly, keep a backup copy and a log of what you changed.
Unlinking a File
Hover over a linked file to reveal its trash icon, select it, and confirm. After you save, the file stops loading on the site but remains in your asset library.
Warning
A stylesheet or script cannot be deleted from your asset library while any site still links it. Unlink it from every site first if you want to delete it.
Warning
A linked stylesheet applies to every page of the site, so temporarily unlinking or removing one during troubleshooting can affect unrelated elements. For example, if you are checking whether an icon’s styling lives in that file, menu text colors may also change while you test. Expect other parts of the site to look different until you relink it.
How the Page Designer Uses Linked Stylesheets
When you design a page, the designer uses the site’s linked stylesheets so the page looks close to what visitors will see. The designer uses only published stylesheets, so an unpublished stylesheet does not appear there.
Why an Event Microsite's Template Can Look Wrong
If an event microsite’s pages or menus look broken even though the template is correct, the site is usually missing a linked stylesheet. For example, a menu might display without its intended spacing. Event microsite templates often depend on a stylesheet asset that you must link in that site’s settings. Rhythm does not apply that stylesheet automatically just because the site is an event microsite. Header image sizing and responsive behavior come from the same linked styling, not from a self-service setting, so changing them usually requires a stylesheet or template update.
When you design a page, the designer shows it with the site’s linked stylesheets applied, so your design view stays close to what visitors will see. A stylesheet must be published before the designer can use it; an unpublished stylesheet does not appear there.
The portal’s built-in sign-in page draws its text and link styling from the same shared style settings. Changing the color of one sign-in link, such as Forgot Password, can also change other sign-in links and labels that share the same style property, including Log In. After a styling change there, check the whole sign-in page, not just the link you meant to update.
Why an Event Microsite's Template Can Look Wrong
If an event microsite’s pages or menus look broken even though the template is correct, the most common cause is a missing linked stylesheet. For example, a menu might lose its intended spacing, menu text may be invisible because its color is never set, or a Registration tab label may be effectively invisible. Event microsite templates typically depend on a stylesheet asset that you must link in that site’s settings; it is not applied automatically because the site is an event microsite.
- Go to Portals & Microsites and select the event's site.
- Open Site Settings, then CSS & Javascript.
- Under Linked Files, select the + beside Stylesheets and link the event's stylesheet.
- Save.
Because a linked stylesheet applies across every page that uses it, fixing the link here fixes every page on the site that shares that styling, not only the page where you first noticed the problem.
Related
If the site still does not reflect a stylesheet you published, the asset map may need rebuilding. See Publish, Revert, and Repair Published Assets.
Because a linked stylesheet applies across every page that uses it, fixing it here fixes every page on the site that shares the same styling, not just the page where you first noticed the problem. Menu color is controlled inside that stylesheet asset, so once it is linked, further color changes require editing the stylesheet rather than changing a separate menu setting.
A missing stylesheet is not the only possible cause. A site can also be linked to the wrong stylesheet, which can make the design look inconsistent because your edits do not appear to apply as expected. Check which stylesheet is actually linked before assuming your edits are not saving.
If you cloned or recreated an event microsite, such as from a prior event, do not assume every site-linked asset came with it. Compare the new microsite’s linked stylesheets with a microsite that looks right, and relink anything missing instead of troubleshooting each symptom separately.
Linking the right stylesheet is necessary, but it is not always enough. If a page’s markup does not include the elements or classes a stylesheet’s selectors expect, those rules will not apply even when the stylesheet is correctly written and linked. An older linked stylesheet, especially one that loads before a newer one, can also override styling you expect the newer file to control. If a form or widget renders correctly on one site or in the console but looks wrong on one microsite, the difference is likely in that site’s styling rather than the form’s own definition. Compare the same content across sites before assuming the content itself is broken.
A microsite’s overall page width, margins, and alignment can differ from page to page because of template or stylesheet choices, not because of the page content. A centering rule in a microsite stylesheet can also affect embedded forms and schedule displays, misaligning them with the rest of the page. When that centering rule was the cause, changing it to left-aligned fixed registration, sponsorship, and schedule pages at once. Custom CSS can also control how an image renders inside a fixed layout, such as scaling a wide logo in an exhibitor list so it fits without overlapping nearby text. Users may need to refresh the page or clear their browser cache before they see the new sizing. More generally, if a styling change does not seem to take effect, check whether the browser is still showing a cached copy of the old stylesheet before concluding the change did not save.
Mobile layouts do not always adjust automatically just because the desktop layout looks right. Custom site or microsite styling can leave page content overlapping on narrower screens, and fixing the mobile view can require mobile-specific CSS rules. Site-level CSS adjustments have also been used in some cases to correct overlapping text inside a hard-coded display, such as a financial overview, even when you do not directly control that display’s markup. Treat that as something to try, not a guaranteed fix. Matching one page’s formatting to another’s, such as centering every line and making text styling consistent with a second page, can also require HTML or CSS changes beyond a quick edit, so it may need extra configuration help rather than a simple settings change.
Warning
If an event microsite is configured as a portal integrated site, its registration landing page is not open to styling changes. Unlike the rest of the microsite, you cannot restyle its Home, Rates and Deadlines, or Registration tabs for emphasis.
Related
If the site still does not reflect a stylesheet you published, check whether the asset map needs rebuilding; see Publish, Revert, and Repair Published Assets.