Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (mgauvin), last modified on Jun 23, 2009

Quick question regarding the use of CSS in Theme Builder:

(question) Is it currently possible to apply custom styles to the display of wiki content in "Edit" mode within the "Rich Text" and "Preview" tabs of a Confluence page so that they mirror a custom CSS theme which has been applied to wiki content once saved/rendered in "View" mode?

If possible, any quick steps that can be proved will be appreciated.

Thanks.

13 Comments

  1. Unknown User (jessica.britton)

    I second this request. We just upgraded from 2.7 to 2.10, and our TB custom CSS is no longer applied to content in preview mode. I don't recall doing anything in particular in 2.7 to have them show up there.

    Am I forgetting something, or did something change?

    1. Unknown User (amoran)

      Yes ... confluence changed (wink)

      Please feel free to bug atlassian into implementing a way of including DYNAMIC css into the RTE, at the moment all they offer is static style sheets, which is useless with a theme like builder.

      1. Unknown User (mgauvin)

        Hi Alain, thanks for jumping in here.

        Any ideas for creative workarounds? (wink)

        Thanks.

        1. Unknown User (amoran)

          You could use the confluence space-level css to @import the builder layout-resources action, however if you change the layout you would need to remember to update the space custom css.

          It should be noted however that doing this will make the browser download two copies of the css data, a better solution would be for Atlassian to provide a way to programatically include to this dynamic css resource.

          It's unlikely to ever happen though, theming confluence is for the most part very much a static affair.

  2. Unknown User (macandron)

    Hi there, I found a way to implement custom styles in both the Rich Text Editor and Preview modes. The way I did it was I copied all custom styles for the content area into Confluence's built-in Stylesheet editor (Stylesheets from the Look and Feel section in Administration).

    This of course requires you to explicitly specify every single font, color, padding and other element of every content area that you wish to change from the original Confluence theme. Fortunately for me, I had most all of them changed in my custom theme, so simply copying & pasting the styles into the Confluence stylesheet fixed the problem for me.

    Naturally if I ever want to change any styles in the content area, I always have to make those changes to both my Theme Builder theme and the Confluence stylesheet. But I don't expect to have to do that very often, so it's no deal-breaker for me.

    Hope this helps someone!

    1. Unknown User (amoran)

      In confluence 3.1 atlassian have finally provided a way of achieving this programatically ... we hope to have this implemented in 4.0.1

      1. Unknown User (macandron)

        Wonderful! As of now, my custom CSS file is rather messy because of much legacy layout markup and styling from site-2.5.css and the CSS for Confluence 2.10 (which the custom style is based on). As you can imagine, page loads are rather slow because of multiple redundant styles, plus it's difficult to read into the styling at all.

        Hopefully thanks to both Atlassian's updates and yours, Confluence 3.1 + Theme Builder 4 will allow me to clean up and simplify my code significantly. (wink)

    2. Unknown User (macandron)

      Just a note to anyone trying this in Confluence 3.1: many of my styles broke because Atlassian changed the id of the content holder to #content and based many new styles on this. I suggest replacing any content-related styles that use #atb-document, #atb-content, .atb-document, .atb-content or .wiki-content to #content instead. This should fix most styles in Rich Text and Preview mode.

      1. Unknown User (amoran)

        We would generally advise against using html id's to style things wherever possible, you are generally able to get similar results by becoming more specific, eg:

        body.atb-document table.atb-shell table.atb-lower .atb-content .myselector {
 color: orange;
}

        The above is ridiculously specific, and should be enough to override almost any other style, however it should be noted that the editor tabs are dealt with using an iframe.

        The css loaded inside the iframe will naturally be more specific than anything coming from outside of it, however in confluence 3.1 atlassian have finally provided a mechanism to allow us to include our own css into that iframe, which should make your lives much simpler over time.

  3. Unknown User (sandra)

    We use Confluence 3.2 with Theme Builder 4.0.2. Unfortunatelly our custom layout css doesn`t work as expected. We like to change the classes .wiki-content h1 and .wiki-content h2 in Edit-mode within the "Rich Text" and "Preview" tabs of a Confluence page like this but nothing happens:

    #com-atlassian-confluence
.wiki-content h1, .wiki-content h2 {
    border-bottom-color:white;
    border-bottom:none;
    background-color:white;
}

    What do we do wrong?

    Thanks & Regards
    Sandra Vogler

  4. Unknown User (adamdry@brightgen.com)

    "In confluence 3.1 atlassian have finally provided a way of achieving this programatically ... we hope to have this implemented in 4.0.1"

    Do I assume then that this just works or do I have to do something to implement it?

    Conf 3.1.2; Theme builder 4.0.2.

    Thanks,

    Adam

    1. Unknown User (amoran)

      Sadly the route that atlassian provided only allows for static resources defined at compile time (sad)

      1. Unknown User (adamdry@brightgen.com)

        Ok. Not perfect, but OK.

        Do you have a link to a page with a "How to" on this by any chance?

        Thanks for your comments.