Forums
Home Product Q&A Discussion groups Articles Ask a question Search
Learning
Events
Champions

Forums

Articles
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

CSS only works in Preview

John van Kaam
John van Kaam
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Get involved
May 16, 2014

I'm not an adminstrator and fairly new to Confluence. I'm trying to add a simple page that looks fine in a browser and not so great when added through an html macro but still. I attached a css file and made a reference to this document and in Preview mode it seems the html is 'listening' to the style sheet. However when I save the page it seems the css is no longer used.. could my style sheet be overruled in some way?

Answer
Watch
Like # people like this
2056 views

4 answers

2 votes
Orlando Escobales
Orlando Escobales
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Get involved
March 15, 2016

So, My team and I recently ran aground on this same issue.  did you check to see if your Styling is in the head of your HTML file?  If so, move that into the body.  the HTML macro does not read the header of the HTML file.  

View More Comments
libertum
libertum
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Get involved
September 4, 2017

Once I put what I need in the body it works. We need to use div otherwise the formatting will affect confluence itself and create a mess. Thank you!

Like
rohit patel
rohit patel February 25, 2019

Hi Daniel, 

I have added the styling within <div> under the <body> but still there is an effect to the confluence page; It does not show other panels within the page and also effects the side bar functionality. 

I have used the below code and pasted it in a HTML macro on the page. 

I do not have admin rights to the space, so i am doing the styling within the page:

 

<!DOCTYPE html>
<html lang="en">
<body>
<div><meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </script></div>
<div class="container">
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table  align="left"; class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Title1</th>
        <th>Title 2</th>
              </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>Name</td>
        <td>212356</td>
              </tr>
      <tr>
        <td>Name2</td>
        <td>226549</td>
              </tr>
      <tr>
        <td>Name3</td>
        <td>228056</td>
        
      </tr>
      
    </tbody>
  </table>
  
</div>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>


</body>
</html>

 

Like
Reply
0 votes
Steffen Heller
Steffen Heller
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.
Get recognized
May 18, 2014

I talked nonsense. The CSS macro does actually change the page itself. I didn't even know that.

@John: When I try, it works: Including formats with the {CSS} macro, the styling both shows in preview mode and when the page is saved.

Reply
0 votes
John van Kaam
John van Kaam
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Get involved
May 18, 2014

I tried several ways. The CSS macro and inline CSS. Both work in preview mode but once saved all styling is gone.

Reply
0 votes
Steffen Heller
Steffen Heller
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.
Get recognized
May 18, 2014

How did you attach the file: Did you use the CSS macro and choose a CSS file at "Import"?
If so, this only works for PDF exports but doesn't change the appearance of the confluence/html page.

Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
AUG Leaders

Atlassian Community Events

    See all events
    Community
    Forums
    FAQs Forums guidelines
    Learning
    About learning Resources
    Events
    Champions
    Copyright © 2025 Atlassian
    Privacy Policy Terms Security
    Welcome illustration

    Welcome to the new Atlassian Community

    Online forums and learning are now in one easy-to-use experience.

    By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.