Hello, I need some CSS advice on how to position the page tags/labels plus the "edit labels" pencil at the top of each page instead of at the bottom.
We are using Confluence server 6.2.3. I am not a space admin, so user macros and changing global layouts aren't an option. I am a beginner at CSS, but learning.
In wiki #1, the former wiki admin added this to the stylesheet, along with some custom fonts and other styling:
/* make labels (tags) prominent */
div#main-content {margin-top: .75em;}
div#labels-section:before {content:"Tags \00a0/ \00a0"; color:#3B73AF; float: left; margin-left:-3.25em;}
div#labels-section {position: absolute; top: .75em; left: 1.5em; width: auto; margin-left:3.25em;}
div#labels-section ul.label-list.label-list-right {text-align: left;}
div.dialog-panel-body div.labels-editor {position: inherit; top: 0; left: 0;}
div.labels-editor ul.label-list.label-list-right li.label-container:nth-child(2){margin-left: 0;}
div.breadcrumbs-section {display:inline-table;}
This puts the page tags up above the breadcrumb, which looks okay on wiki #1.
Wiki #2 does not have custom fonts or styling in its stylesheet.
I tried to use the same css on wiki #2. (same confluence version, same wikispace, different wiki) I was able to do some minor positioning adjustments.
/* put labels (tags) at top of page instead of bottom */
/* set distance from top of page for Tags text */
div#main-content {margin-top: .10em;}
/* set position from left margin */
div#labels-section:before {content:"Tags \00a0/ \00a0"; font-size: 12px; color:#brown; float: left; margin-left:-2.2em;}
/* set distance from top of page for labels list */
div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em;}
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: left;}
div.dialog-panel-body div.labels-editor {position: inherit; top: 0; left: 0;}
div.labels-editor ul.label-list.label-list-right li.label-container:nth-child(2){margin-left: 0;}
div.breadcrumbs-section {display:inline-table;}
However, the original result was a "squashed" narrow area for the tags at the top of the page, which wrapped and obscured the breadcrumb nav, not good. When I tried to adjust the width of the tag listing, the tags stopped wrapping, but now the edit pencil is way, way to the right of the tag listing. I want it right next to the tag listing.
Moving the edit tags pencil to the beginning of the line would be okay, but I am not sure how to do this.
Thoughts, help? Thank you.
