{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Logos","type":"text"}]},{"type":"paragraph","content":[{"text":"While logos are typically implemented using ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" tags, using background images instead makes it very simple to substitute a different version of the image when a high-contrast theme is used. The following example shows how this can be done. ","type":"text"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"50%

HTML

\nhtml

\n\n]]>

The site's logo is implemented as a background image on a link to the site's home page. The original style for the image specifies the image file and positions it as desired. The high-contrast images are substituted by using the same selector prefaced with the theme class, and specifying only the new image file. All other styles remain the same.

\n\n

When a user selects a high-contrast theme using UI Options, the theme class will be added to the <body> of the document and the high-contrast logo will automatically be loaded.

\n\n

Note that the high-contrast logos are implemented using a transparent background so the black logo can be used for both the black-on-white theme and the black-on-yellow theme.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"50%"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"paragraph","content":[{"text":"HTML","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"\n\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The site's logo is implemented as a background image on a link to the site's home page. The original style for the image specifies the image file and positions it as desired. The high-contrast images are substituted by using the same selector prefaced with the theme class, and specifying only the new image file. All other styles remain the same.","type":"text"}]},{"type":"paragraph","content":[{"text":"When a user selects a high-contrast theme using UI Options, the theme class will be added to the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" of the document and the high-contrast logo will automatically be loaded.","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that the high-contrast logos are implemented using a transparent background so the black logo can be used for both the black-on-white theme and the black-on-yellow theme.","type":"text"}]}]}],"version":1},"reason":"A column macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"

CSS

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"paragraph","content":[{"text":"CSS","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"\n.site-logo {\n background-image: url(\"images/logo.png\");\n background-position: 4.1em 0;\n background-repeat: no-repeat;\n height: 4.3em;\n margin-left: auto;\n margin-right: auto;\n\n}\n/* white logo for white-on-black theme */\n.fl-theme-uio-wb .site-logo {\n background-image: url(\"images/logo-white.png\");\n}\n/* yellow logo for yellow-on-black theme */\n.fl-theme-uio-yb .site-logo {\n background-image: url(\"images/logo-yellow.png\");\n}\n/* black logo for black-on-white and black-on-yellow themes */\n.fl-theme-uio-bw .site-logo,\n.fl-theme-uio-by .site-logo {\n background-image: url(\"images/logo-black.png\");\n}\n","type":"text"}]}]}],"version":1},"reason":"A column macro in a rich body macro can't be created or edited in the new editor."}}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Icons","type":"text"}]},{"type":"paragraph","content":[{"text":"Icons, for example on navigational tabs, are often implemented as background images. When they are, it's extremely easy to define a high-contrast version. The following example shows how this can be done.","type":"text"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"

\nhtml

About
People
News

\n\n]]>

In this example, the 'current page' tab has inverted colour scheme, as shown in the following image:
\n

\n\n

The high-contrast version of the theme also inverts the colour, so in the "black-on-white" theme, for example, the icon will actually be white:
\n

About
People
News

\n","type":"text"}]},{"type":"paragraph","content":[{"text":"In this example, the 'current page' tab has inverted colour scheme, as shown in the following image:","type":"text"},{"type":"hardBreak"},{"text":"\n","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"fb6b5cdf-098b-48aa-887f-1a10c8a5785a","collection":"contentId-9470818","height":""}}}]},{"type":"paragraph","content":[{"text":"The high-contrast version of the theme also inverts the colour, so in the \"black-on-white\" theme, for example, the icon will actually be white:","type":"text"},{"type":"hardBreak"},{"text":"\n","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"","id":"0fab4807-8587-4e0b-b0f2-bf7817f48743","collection":"contentId-9470818","height":""}}}]}]}],"version":1},"reason":"A column macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"

High contrast background images

Logos

Icons