Red Hat Summit Red Hat SummitSupportoConsoleSviluppatoriInizia una provaContatti

Questo contenuto non è disponibile nella lingua selezionata.

Chapter 11. Customizing the Developer Portal layout

You can customize the look and feel of the entire Developer Portal to match your own branding. A standard CSS stylesheet is available to provide an easy starting point for your customizations. To create layout templates, use the code for Main layout as your starting point.

In this tutorial, you’ll add your own CSS customizations to your Developer Portal and reload it to put your new styling changes live.

11.1. Creating a new CSS file
Copia collegamento

There is a default stylesheet, default.css. This is quite large and complex, so rather than extend it, it is better to create your own stylesheet for any of your own customizations to overwrite the defaults. You create a new stylesheet the same way you create a page. Remember to choose an appropriate MIME content type in the advanced page settings.

Important

Make sure that the selected layout is blank. Otherwise the page layout HTML will obscure the CSS rules.

11.2. Linking the stylesheet into your page layout
Copia collegamento

Add the link to your custom CSS in each of your layout templates (or in a partial if you have a common HEAD section) after the link to bootstrap.css. For example: 

<link rel="stylesheet" href="/stylesheets/custom.css">

Now enjoy the beauty of your own unique branding!

11.3. Defining page layout templates
Copia collegamento

The general idea is to define a separate layout for each of the different page styles in your portal. There is one standard layout called Main layout when you start. Do not make any changes to this layout until you are an expert at using the Developer Portal because this layout is used by all system-generated pages.

Typically, you want a unique style for the home page of your portal. The Main layout template is a starting point for your customizations. To create a page layout template:

  1. Open Main layout and copy its code to the clipboard.
  2. Create a new layout, give it a title, a system name, and select Liquid enabled.
  3. Paste the Main layout code into your new layout.

  4. Remove the sidebar menu by deleting this line from your new layout: 

    {% include 'submenu'%}
  5. Customize the code to create your layout template.
Red Hat logoGithubredditYoutubeTwitter

Formazione

Prova, acquista e vendi

Community

Informazioni sulla documentazione di Red Hat

Aiutiamo gli utenti Red Hat a innovarsi e raggiungere i propri obiettivi con i nostri prodotti e servizi grazie a contenuti di cui possono fidarsi. Esplora i nostri ultimi aggiornamenti.

Rendiamo l’open source più inclusivo

Red Hat si impegna a sostituire il linguaggio problematico nel codice, nella documentazione e nelle proprietà web. Per maggiori dettagli, visita il Blog di Red Hat.

Informazioni su Red Hat

Forniamo soluzioni consolidate che rendono più semplice per le aziende lavorare su piattaforme e ambienti diversi, dal datacenter centrale all'edge della rete.

Theme

© 2026 Red HatTorna in cima