CSS only works in Preview

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?

4 answers

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.  

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!

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">
  <link rel="stylesheet" href="https://confluence.au/download/attachments/862684293/bootstrap.min.css?api=v2">
  <script src="https://confluence.au/download/attachments/862684293/jquery.min.js?api=v2"></script>
  <script src="https://confluence.au/download/attachments/862684293/bootstrap.min.js?api=v2"></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>

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.

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

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.

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,041 views 2 13
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