CSS help needed - position tags/labels at top of page

[Michelle Rau HP]

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.

[Michelle Rau HP · Accepted solution]

@Stephen Sifers Thank you for this input, it gave me the confidence to tinker more. I ended up removing the "Tags" text and the end result is simpler:

/* move title-heading down to make room for tags */ 
div#title-heading {margin-top: 15px;} 
 
/* put labels (tags) at top of page instead of bottom */ 
div#main-content {margin-top: .12em;} 
/* set distance from top and side of page for labels list and edit labels icon*/ 
div#labels-section {position: absolute; top: .30em; left: 3.0em; width:auto;} 
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: absolute; top: .10em; left: -2.2em;} 
div.breadcrumbs-section {display:inline-table;} 

And the appearance is much more satisfactory:

I may attempt to put some "Add Labels" text at some point, but for now this is much improved over the starting point. Thanks again!

[Stephen Sifers]

Hello Michelle,

I am no CSS expert myself, but I do understand a bit as to how it functions and what items you can shift around. With this said, you have a solid start to your stylesheet, just a few items I would suggest editing. Example code here:

/* 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 */ 
/* Adjust width as well */
div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em; width:500px;} 
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: center;} 
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;} 
/* move title-heading down */ 
div#title-heading {margin-top: 20px;} 

Example screenshot:

The following are edits that were made:

Adjusting labels to center align:

div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: center;}   

Width (set to 500px) was added to the end of this line

div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em; width:500px;}   

Adjusted the title-heading top margin:

/* move title-heading down */  
div#title-heading {margin-top: 20px;}  

Please let us know if this works for you and you're able to accomplish your goal.

Regards,
Stephen Sifers