Thanks to everyone in advance for their time and help.
I am currently trying to insert an image that serves as a Legend for a page in Confluence. I would like this image to be fixed so that it can be seen from any part of the page. My hopes is that it would remain static on the right as you scrolled through to asist with any confusion on the end users part.
I've been having some trouble finding options as to what macros would allow me to fix the image in such a way.
Any help or suggestions would be greatly appreciated.
Thank you!
Community moderators have prevented the ability to post new answers.
OK, we've made this work! :) Here's how we did it using the CSS Stylesheet, Panel and TOC macros:
In our example, the TOC and its panel stay in the top right of the page whikle everything else moves up and down. I also found that if you add content under the TOC and its panel, this also scrolls up and down. However the TOC itself stays still and therefore obscures the content below a little.
One problem I found with this is that when I added a very long set of headings and text, the floating TOC expanded off the page and wouldn't scroll, so you can't see what's at the end or use that link to jump to the heading. That said, you have to added a few dozen for this to happen, so it shouldn't be an issue.
Cheers.
I thought they were the ones that come with Confluence (download 5.4.3).
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I think I figured it out. The only thing is that I could I apply it to my test space, but when I went to apply it to the desired space, I don't see a Save button under CSS Stylesheet. Any guess as to why that might be?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
No need to add a CSS Stylesheet macro. The `div` macro has a Style option to apply inline styles, which is perfect for a case like there where there are only a few to apply.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
When it comes to CSS it is typically best to not put the style directly on the element. By doing that you trump any other CSS.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Generally I'd agree (keep styles to CSS, not inline) but it's option and it made sense in my case. I have no use for a CSS Stylesheet macro on my page--only the floating div element.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
How do you prevent the object from scrolling over the footer? Looking for a solution to indicate a stopping point on the page - stop at a certain distance from the bottom so that the object does not scroll over tags/footer/other content. Thoughts?
Thanks!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@Mick Davidson hoping you're still around, because the floating TOC you've provided a solution is just about what I've been looking to implement in Confluence for weeks now.
While it seems to work as intended, there happens to be a minor issue; when the browser window is resized, particularly when made narrower, the TOC tends to overlap on the first column's content.
What sort of CSS voodoo would fix this? Thanks.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I've moved on job-wise, and away from Confluence as an admin/evangelist. Still use it, but I now leave the problems to other people. :)
Thanks though. :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Gina,
You can add a custom css to the page by:
1. Adding a css stylesheet macro like this below:
.aui-tabs.vertical-tabs>.tabs-pane { background-color: #303030; } #splitter-content { background-color: #000000; }
2. using the floating image css
http://www.iamchristinabot.com/blog/20120119/how-do-i-get-an-image-to-float-on-my-website-even-when-scrolling/
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I would get the content formatting macros if you don't already have it. This will gave you a stylesheet macro that you can put into any page. Once you have that addon just create your legend somewhere on the page and wrap it in a div macro (also included with the content formatting macros) and give the div a unique id so that you can target it wil css easily. Then add a style macro and put in some css to target that div. Specifically you want to set the position property on the div to fixed. Here is an example of some css. Play around with the top and right values to get it right for you.
#lengendWrapper { position: fixed; top: 200px; right: 100%; }
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thank you, from 2018! :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.