How to modify the mobile css for Confluence?

justin.kelly.org.au February 6, 2013

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

2 votes
Matthew J. Horn
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 6, 2013

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 6, 2013

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 February 6, 2013

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 6, 2013

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

justin.kelly.org.au February 6, 2013

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 February 7, 2013

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

1 vote
Alexander Franke April 13, 2016

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.

1 vote
Paul Ayling March 30, 2014

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

0 votes
Stefan Baader September 23, 2013

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events