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

[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.

[justin.kelly.org.au]

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

[justin.kelly.org.au]

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

[Alexander Franke]

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):

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">

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

    <web-resource key="conflunceMobileCSS-resources" name="confluenceMobileCSS Web Resources">

        <dependency>com.atlassian.auiplugin:ajs</dependency>

        <resource type="download" name="confluenceMobileCSS.css" location="/css/confluenceMobileCSS.css"/>
<resource type="download" name="conflunceMobileCSS.js" location="/js/confluenceMobileCSS.js"/>

        <context>atl.mobile.confluence.app.frame</context>

    </web-resource> 
</atlassian-plugin>

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.

[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

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