How to modify the mobile css for Confluence?

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

4 answers

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.

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.

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 ?

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

we have confluence installed locally - just a pain in the ass IT department - who restirct everything

re link tag - does that work for the mobile UI (confluce 4.3) as well ? thought the mobile might not use the global header

thanks matt - ive tested adding custom html into the 'Look and Feel'>Custom HTML section - but that doesnt get loaded in the mobile UI

does anyone know which files (css) on the server that the mobile UI uses?
- so i can edit those directly - as it doesnt seem that it can be done via the admin site

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

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;}
 }

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

or

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 11, 2018 in Confluence

What are your project planning tips?

Hello Community,  Jessica here from the Confluence product marketing team! Today I wanted to get your takes on project planning –– what works, what doesn’t, how do you know if you’re doing it r...

320 views 1 4
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you