Change Export button color

Comments

5 comments

  • Avatar
    Thomas Rough (K15t)

    Hi Kimberly,

    Thanks for reaching out to us.

    We don't offer a colour customization option via the macro itself, however, on Confluence Server you could add the following code to your Space Stylesheet (via space admin > Look and Feel > Space Stylesheet):

    button[data-macro-name="scroll-exportbutton"] { background: blue; }

    This will render the button in blue (feel free to change this accordingly to your needs). Additionally, this would also work globally if you put it into the corresponding field (global admin > "Stylesheet" in the Look and Feel section).

    I hope this information helps.

    Cheers, Thomas (K15t)

    1
    Comment actions Permalink
  • Avatar
    Kimberly Onnen (Edited )

    Thank you!! This works GREAT! :)

    Question, how would I set this up so that when accessing the Space using Scroll Viewport, the button color is also changed?  I set this up so that the button is (dark) gray with white text. It shows up correctly when I look at the topic without going through Scroll Viewport. But using Scroll Viewport, the button is the default color. I should have mentioned that we were using that too.

    0
    Comment actions Permalink
  • Avatar
    Kimberly Onnen

    Just to add: I made a copy of the Web Help template and am in the Edit mode of the copy. I'm just not sure how to specify the button background color here. 

    0
    Comment actions Permalink
  • Avatar
    Thomas Rough (K15t)

    Hi Kimberly,

    Thanks for your reply.

    In order to style the export button in your Viewport theme you would need to use the classes for the Scroll Export Button macro and reference these in your CSS file within the theme:

    class="aui-button scroll-pdf-launcher conf-macro output-inline"

     

    Had you already tried this? Let me know if this information helps.

    Cheers, Thomas (K15t)

     
    0
    Comment actions Permalink
  • Avatar
    Kimberly Onnen

    Well... I admit that I don't really do much with CSS stuff. 

    I see there are two css files - theme.colors.css and theme.main.css

    I added the following in theme.main.css within the section commented with "K15t specific part", although this didn't do anything.  

    0
    Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk