CSS only works in Preview

John van Kaam 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?

4 answers

2 votes
Orlando Escobales 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.  

libertum 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!

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>

 

0 votes
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.
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.

0 votes
John van Kaam 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.

0 votes
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.
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.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events