Create custom designs

New version!

Several Issues regarding the design editor where resolved in the 3.0.2 version of the theme. Please make sure that you are using RefinedWiki Original Theme 3.0.2 or above.

Create a custom design!

The design editor is an online code editor which allows you to create your own designs with the use of RefinedWiki components. Start from scratch or from one of our system designs. Check out the Demo design to learn how to use the new design editor.

Go to: Browse > Confluence Admin > RefinedWiki Original Theme > Manage Designs

Screenshots

Check out the demo design!

Tutorials

Using images

Using RefinedWiki velocity macros

Using Confluence macros

RefinedWiki JavaScript API

 

On this page:

 

Design editor sections

Details

Configure the design details.

ParameterDescription
NameThe name of the design
Name keyA name key is a short version of its name. It must be globally unique.
Icon

An icon representing the design. Upload the image at the Images
 section.

Size

Width: 200px

Height: 100px

 

Top and Bottom section

Edit the top and bottom section of your design with HTML and velocity. 

Resources:

 

 

Styles

Edit the styles(CSS) of your design. You can upload as many style sheets you want. You can sort the order of the stylesheets with drag and drop.

Resources:

Scripts

Edit the scripts(JS) of your design. You can upload as many JavaScripts as you want. You can sort the order of the scripts with drag and drop.

 

Images

Upload Images to your design.

Resources:

Color Variations

A color variation is a stylesheet including small CSS changes to your design.

Resources:

Labels
  • No labels

19 Comments

Hide/Show Comments

  1. Christian Neureiter

    Hi guys!

    Looking forward to use refined wiki 3 together with confluence 4. will there also be a list of css which can be edited?

    thanks,

    christian

    1. Emil Sjödin

      You can upload as many css document as you want to the design editor. The Design CSS are loaded after the base Confleunce + RefinedWiki styles are loaded so you can override them with your own styles if you want.

       

      Please note that this documentation space is under construction. It will be much more extensive.

      1. Christian Neureiter

        Thanks, cool. So there will also be some kind of documentation, which CSS to be used to achieve a certain result.
        By the way, is there also a plan when v3 is released? I am waiting for your release to upgrade to confluence 4.

        thanks

        1. Emil Sjödin

          We released it yesterday, you can download it from here: https://plugins.atlassian.com/plugin/details/15231

  2. Christian Neureiter

    Hi Emil!

    I am trying to use an image to the full screen so that it can be used as background image. The original image is only around 100x100px. My normal code using HTML and CSS does not work as I have no idea where to put normal HTML code. Can you maybe add an example how to add a background image which is streteched to 100% of the screen? (all for Refinedwiki 3)

    thanks,
    Christian

    1. Emil Sjödin

      Hi Christian,

      Create a custom design at the manage design page in the admin section. Start from a system design of your choice. HTML code are added in the top section, Styles in the Styles section and Images are uploaded at the image section. Please see the documentation above for more information about linking images in the Styles section.

      After you have saved you new design you have to apply it on the Theme configuration page.

      Cheers, 

      Emil

      1. Christian Neureiter

        Hi Email!

        Sorry, need to ask again. This is the code I want to use to stretch the background image to the entire browser window:

        <body>
          <div id="background">
            <img src="myimage.png" class="stretch" alt="" />
          </div>
        </body>
         
        CSS:
        #background {     width: 100%;      height: 100%;      position: absolute;      left: 0px;      top: 0px;      z-index: -1; }  .stretch {     width:100%;     height:100%; } 

        This code normally works perfect. But unfortunately I have no idea where to put which section of the code to get this to fly. I have now tried several posibilities but no one was delivering the expected result...
         
        Maybe you can send me a theme with a customized stretched background image as example? christian.neureiter@n.roteskreuz.at
         
        thanks a lot,
        Christian

        1. Emil Sjödin

          Hi Christian,

          I've just send you a mail.

           

          1. Christian Neureiter

            Hi Emil!

            thanks, works perfect!

            Christian

          2. James Lyons

            Hello, 

            attempting something similar and i'd be really grateful if you could dig that mail out and forward it to me (smile)

            at the moment i'm trying to do it with rw_wrapper but not having any joy.

            james

             

            edit

            this worked, sort of:

            then all other spaces inherit unless bg is specified in the space stylesheet (which i do by referencing a space homepage attachment)

            1. Emil Sjödin

              Hi James,

              You are on to the same solution.

               

               

  3. Daniyal Syed

    Hi Emil, really like the blue buttons and textbox you are using... how do i use them on the latest version of refinedwiki? is it possible for you to share your code?

     

    Thank you!

    1. Emil Sjödin

      Hi Daniyal,

      They are part of a new plugin which we will release soon. The plugin will contain a lot of good looking UI elements. And it will be free!

      Cheers

      1. Daniyal Syed

        Thanks Emil, look forward to the plugin release.. hopefully it is soon (smile)

      2. Mike Osswald

        This sounds great! With the cat out of the bag, can you provide a date or closer timeframe for release (so I don't try to make these myself) — we're getting ready for a big relaunch. Thanks so much!

        1. Emil Sjödin

          Glad you liked it! The first release could be expected in a month or two. I'm afraid I can't give you an exact date.

  4. James Lyons

    Hello, 

    couple of questions, hope it's not too blindingly obvious where i'm going wrong, here goes....

    customise individual spaces:
    I want theme spaces individually, seems that the only way to do that, other than applying piles of css in the space admin, is to :

    Create the design
    Associate the design with a category
    Place the space in the category

    but we don't use categories (and likely don't intend to). So, i assume i can remove #originaltheme_category_menu() from my top section and go ahead (i display:none at the moment).

    Just curious, is there any other way to break the connection between designs and categories. It is convievable that you may want to have spaces in categories that are very similar in design but require changes that are a cinch in the editor that would otherwise be a PITA applying css in space admin. I suppose what i'm really after is being able to apply a design to a space irrespective of the category, essentially break the category, or override the category design when i want to.  

    Is that a reasonable request or would it break too much other stuff, I would argue that categories and designs should be seperate although i can see the logic in the way you've built it. 

    Is that clear, seems so, if not i'm happy to elaborate.

     

    Thanks,

     

     

    james (smile)

    1. Emil Sjödin

      Hi James,

      Yes, you can remove the #originaltheme_category_menu(), that method only include the category menu visually. All our velocity macros are optional when creating a design.

      Right now we are not planing on including support for designs on space level. But I've added your request to our feature wish-list. 

      Cheers

      1. James Lyons

        Thanks Emil, 

        appreciate the reply, and thanks for raising the wish list (i ought to have done it myself). I could see some advantage being able to break away from the category design, suggest that it would be on a space level, within space admin, perhaps in the change category  section, with the option being to "break from category design" as an explicit option to the side of the category lists and perhaps a drop down pre-populated with a list of existing designs (so it could be performed by space administrators but designs would remain the concern of sys admins).

        In my our case (the company i work for) we have distinct expertise areas that we would like to keep grouped but would like to have colour/background context cues. 

         

        thanks again.

         

        james

         

        PS also, what i'm suggesting would mean that you could use a design on spaces withouth them being in the same category without having to duplicate the design. Not sure how much of a benefit that is in general but i know i'll use it.

Explore our designs! Change design