Styling a single page with CSS

Hi!

I thought i've already read something about the possibility to customize even single pages.
Unfortunately a can't find the info anymore if i am not even wrong at all.

So here's the humble question:

- Is there a possibility to style single or special pages in Confluence Wiki (Version 4.0)?
- Where can i find documentation on this special topic?

What i want to achieve:

In my case i would like to place a background picture into the Blog-Summary-Page. But i can't find any special page IDs or something to let this happen.

Now i created a DIV-Container inkl. ID within the custom HTML-Section. But of course this picture shows up on every wiki-page now when i don't have something unique to connect with.
Or is this something I need to solve via Javascript? (hopefully not ^^)

thanks in advance
(sorry for my buggy english)

3 answers

1 vote
Davin Studer Community Champion May 05, 2017

An easier way would be to add the html macro to your page and then you can put in some CSS only for that page. Be default the HTML macro is turned off, so you would need to enable it.

I've never seen docs that relate to styling a single page like that (which is not to say they don't exist, just that I've never seen them :)

You can certainly create CSS that works over an entire space - https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS

You could also edit all the stylesheets that Confluence uses and insert some special stuff of your own, but

(a) they're cascading stylesheets and are really complex

(b) you absolutely need to know what you're doing before you attempt anything like that

(c) do it in a test version, not your production wiki

(d) you need to have access to the server where they're stored -- (edited note): Sorry, just noticed that you're talking about On Demand - you won't be able to do any of that stuff. My bad!

Hi, just for people that might search for the same question.

I solved my question above with Javascript in the html head section.

		<SCRIPT type="text/javascript">
			<!-- 
			URL = document.URL;
			list = URL.split('/');
			candidate = list[list.length-1].split('.')[0];
			
			if (candidate == 'yourdesireduniquewordinyoururladressbar') {
				document.write('HelloWorld');
				document.write('<link rel="stylesheet" type="text/css" href="yourstlye.css">');
			}
			
			
			
			-->
		</SCRIPT>

the script is looking for a unique keyword in the addressbar. if its there your css will be loaded.

as for single pages.. depends on your user-rights.. you can insert a html-macro within the page.

Like 1 person likes this

Is there code to just highlight the background of one word in the sentence?

One minor speeling errur [sic] : "yourstlye" --> "yourstyle". Otherwise, nice script!

@KP11:

Use {span} or {div} macro, define a background colour and put the one word inside the macro.

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Dec 18, 2018 in Confluence Cloud

Happy holidays from our team to yours!

Hi Community!  2018 was filled with changes for our team, both big and small, and we've taken a lot of time to both celebrate our wins and recognize areas of improvement. One thing that we're a...

496 views 3 18
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you