nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to modify the mobile css for Confluence?

justin.kelly.org.au

Hi Guys,

We've got out own custom theme for the desktop browser version of Confluence but we are now looking to modify the css for the Mobile view

Is this possible?

We just want to change a few colours etc.. nothign to major - but havent seen anywhere in tha Admin UI to do this

Thanks - any help would be greatly appreciated

Cheers

Justin

Accepted answers

All comments

Matthew J. Horn

Sure it is. You can do it all within CSS using the @media tag. You'll need a very good understanding of CSS to implement it, but adding new stylesheets to Confluence is a snap. Just drop the file or files in the /includes/css directory, and then add a <link> tag that points to it in the global header.

Matthew J. Horn

Oh, are you using OnDemand or in some other way restricted? You can load external style sheets through the admin UI by adding a link tag in the header, or you could just add a style block, although it would get pretty big, I think, depending on the number of devices you're looking to support.

justin.kelly.org.au

thanks matthew - what if we are only restricted to doing stuff through the confluence admin UI - and can't upload new files onto the server ?

Matthew J. Horn

Hm, not sure. Hopefully someone else will weigh in.

Stefan Baader

Justin,

as Matthew allready told:

CSS3 Stylesheet and the Responsive Web Design could be a solution.

http://alistapart.com/article/responsive-web-design

So you can define several layouts and styles for several devices (orientation and screen size).

Here the CSS3 media queries as an example:

You defines this in the admin area in the "Stylesheet":

.../admin/viewstylesheet.action

@media (min-width: 950px) {
   /* wide Screen */
      h1 {font-size:x-large;}
 }
 @media (min-width: 450px) and (max-width: 950px) {
   /* Screen of Netbooks */
     h1 {font-size:large;}
 }
 @media (max-width: 450px) {
     /* Screen of a Mobile Device */
     h1 {font-size:small;}
 }

Paul Ayling

Hi Justin

Our new add-on "Mobile Themer for Confluence" allows you to use the desktop colour scheme and custom site logo from the standard/desktop Confluence interface in the Confluence mobile theme.

It's really new, but please try it out and give us any feedback. It's available in Atlassian Marketplace now

Thanks, Paul from mobilethemer.io

Alexander Franke_nughrm

The only way I found which does not involve a external plugin is an own one but it is pretty easy to create.

Download the Atlassian SDK, create a confluence plugin, go to src/main/resources, edit the atlassian-plugin.xml and edit the context of the automatically generated web resources to

atl.mobile.confluence.app.frame

atl.mobile.confluence.view.content

The first one has worked for me, but the other should do the trick aswell.

Your file will look similar to this (different names):

&lt;atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2"&gt;

    &lt;plugin-info&gt;
        &lt;description&gt;${project.description}&lt;/description&gt;
        &lt;version&gt;${project.version}&lt;/version&gt;
        &lt;vendor name="${project.organization.name}" url="${project.organization.url}" /&gt;
        &lt;param name="plugin-icon"&gt;images/pluginIcon.png&lt;/param&gt;
        &lt;param name="plugin-logo"&gt;images/pluginLogo.png&lt;/param&gt;
    &lt;/plugin-info&gt;
    &lt;!-- add our i18n resource --&gt;
    &lt;resource type="i18n" name="i18n" location="confluenceMobileCSS"/&gt;
    &lt;!-- add our web resources --&gt;

    &lt;web-resource key="conflunceMobileCSS-resources" name="confluenceMobileCSS Web Resources"&gt;

        &lt;dependency&gt;com.atlassian.auiplugin:ajs&lt;/dependency&gt;

        &lt;resource type="download" name="confluenceMobileCSS.css" location="/css/confluenceMobileCSS.css"/&gt;
&lt;resource type="download" name="conflunceMobileCSS.js" location="/js/confluenceMobileCSS.js"/&gt;

        &lt;context&gt;atl.mobile.confluence.app.frame&lt;/context&gt;

    &lt;/web-resource&gt; 
&lt;/atlassian-plugin&gt;

You can now write all the CSS you want to have for the mobile view in the /css/whatever.css and if you need some javascript into the /js/whatever.js.

Compile with atlas-package and upload to your confluence.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

mobile