Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Custom CSS broken

KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 14, 2014

I've switched from 4.3 to 5.x and oh boy I'm frustrated. The 5 added no value apart from even less "businness-like" outlook. Yet it managed to move all the buttons around just the way Adobe does with every new version of their stuff, without changing anything. Confluence 5 also has almost all own and plugin generated html-output changed, that includes classes and id's in the page source, without any obvious reason. Now I have to redo dozens of user macros I wrote to overcome Confluence 4 flashy ugliness to make them work in my fresh install (not migration) of Confluene 5.

Anyway, current problem at hand is I cannot get Custom Stylesheet to work.

This what I had in Confluence 4 custom stylesheet for my space:

  1. .wiki-content h1 {color: #365F91;}
  2. .wiki-content h2 {color: #4F81BD;}

I enabled Custom Stylesheets in Admin/Security. I go to Look at feel in Space Admin (theme is Documentation), and add the following custom CSS

  1. .main-content h1 {color: #365F91;}
  2. .main-content h2 {color: #4F81BD;}

It doesn't work. I try this

  1. h1 {color: #365F91;}
  2. h2 {color: #4F81BD;}

It also doesn't work.

Then I go to Custom HTML in Admin and add this to header OR footer:

  1. {style}
  2. .main-content h1 {color: #365F91;}
  3. .main-content h2 {color: #4F81BD;}
  4. {style}

It doesn't work!

I tried adding this directly to the page via html macro, but it just renders it as text.

All I want to do is to make the h1 and h2 headings in content-main less ugly.

Please confirm this feaute evene works in Confluence 5 anymore.

2 answers

1 accepted

0 votes
Answer accepted
Steve Gerstner [bridgingIT]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

Why do you add this to the header or footer and don't use the option to define it in the (space) admin screens: https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS

KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

you didn't read my question, did you? "I enabled Custom Stylesheets in Admin/Security. I go to Look at feel in Space Admin (theme is Documentation), and add the following custom CSS"

also I'm aware of that piece of manual you are refering to. Apart from low quality (opensource project have better writers), it is outdated and even the given example about header image doesn't work.

Steve Gerstner [bridgingIT]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

Ok, then I was a little bit confused from sthe style-tags and your wiki markup.

The custom CSS-page is like an editor for css, you don't need html-tags inside, just plan css.

KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

could you provide code of what exactly should I enter into this css stylesheet to have h1 blue and h2 red?

KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

aaand have you tried it yourself in a Confluence 5.x documentation themed space?

Steve Gerstner [bridgingIT]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

h1 { color: blue !important; }

h2 {color: red !important; }

Steve Gerstner [bridgingIT]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

Yes, and it works as it should.

go to /spaces/viewstylesheet.action?key=<yourSpaceKey>

and enter:

p {color:red !important;}

Take care, that headings in Confluence are often links too, and then the linkcolor wins.

Look at this screenshot, it's a confluenc 5.4 (in German):

KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

yeah important made all the difference. I also like how f... up this screenshot looks if you add another line)

Thank you!

0 votes
Stefan Niedermann February 16, 2014

Maybe the problem is, that you are using Wiki-Markup? Already tried to use

&lt;style type="text/css"&gt;
&lt;/style&gt;
KPAH
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 16, 2014

A nice suggestion indeed.

I added that to Custom CSS in admin. No go.

I also compiled:

&lt;style type="text/css"&gt;
h1 {color: red;}
h2 {color: blue;}
&lt;/style&gt;

and entered in as a html macro on the page with h1 and a h2. they remain black.

Could you try it in your install? May be my hands are totaly out of my butt.

Stefan Niedermann February 16, 2014

Works fine for me, i'm trying to attach a screenshot, but the atlassian answers-wysiwyg-editor is crap...

maybe your css is not important enough?

i tried (to test it) this: <style type="text/css">* {color: red !important;}</style>

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events