Content Formatting

Comments

16 comments

  • Avatar
    Jens Rutschmann

    Hi Graham,

    it should work by adding this to the CSS box in the "Content Formatting" section of the template editor:

    div.panel {
      background-color: #FF0000;
    }

    You can do the same for "div.admonition-info" and so on.

     

    Best regards,
    Jens

  • Avatar
    Graham Mueller

    This seems to be working for some things, but not all. For example, I want to modify panel headers and tables, so I have tried

    .panelHeader, div.panelHeader
    .th .table th, .panelContent th, div.panelContent

    Certain styles also seem to not be coming through like border-radius (curved borders).

  • Avatar
    Jens Rutschmann

    For the panel title you can use this:

    div.panel .title {
      font-style:italic;
    }

    You should always use the "div." in front of the classes, as our main CSS uses this. If you omit it the PDF renderer will value the default CSS higher than yours, so it will be omitted.

    Concerning the rounded corners that's because they are CSS 3 and the PDF renderer only supports CSS 2.1

  • Avatar
    Graham Mueller

    Is there any chance you could present me with a full list of the targets available? I have to make a lot of changes, and am basically just guessing around for anything. The div.panel .title targets things like notes, infos, etc as well, which is a bit surprising and concerning.

    Too bad about the CSS 3. I wasn't aware of that, but that's really a minor issue at this point.

    Sorry to be a pain, but like I said at the top, our publications team is feeling the crunch :/

  • Avatar
    Jens Rutschmann

    The other titles of the notes etc. are also targeted because you nested them into a panel (didn't you ?).

    You can adapt the CSS like this:

    div.panel > div.title {
      font-style:italic;
    }

    Concerning the list I am collecting the info now and will give you another message once I have done it.

    Btw. we got a technical writer starting on October 1st who will improve the documentation :-)

  • Avatar
    Graham Mueller

    Thanks a lot. We really appreciate all of your help.

    Great news about the writer, I'm really looking forward to having documentation so we don't have to bother you guys anytime we have a little issue

  • Avatar
    Jens Rutschmann

    Have a look here: http://www.k15t.com/display/PDF/Content+Formatting
    It should cover most of the elements that are decorated with custom classes.

    Best regards,

    Jens

  • Avatar
    Stefan Kleineikenscheidt

    Btw: I have attached the default CSS to that page. It may be useful to understand what and how things get formatted in the default setting.

    -Stefan

  • Avatar
    Graham Mueller

    These have all worked very well, thanks. I have two remaining issues that I cannot seem to solve (I've attached a picture to show).

    For the table one, I'm trying to target a table heading. I noticed in your examples you referenced thead, but I wasn't able to get to that (or th). I tried div.tablewrap > thead, div.tablewrap > table th, etc, but haven't figure that one out yet.

    Secondly, the panel header (blue) I can't seem to scoot up to the top all the way. I've tried margin-top: -xxx which worked up to a point, but then couldn't seem to go any further.

    Any thoughts?

    Graham




    remainingissues.png
  • Avatar
    Stefan Kleineikenscheidt

    Can you post the wiki markup producing this output? That will make it easier to understand what elements are used here.

    Thanks,

    -Stefan

  • Avatar
    Graham Mueller

    I believe this is it, though the panel was a series of multi-excerpts to begin with, so it was a little tricky to piece together

    {panel:title=AIX 6 Requirements|borderStyle=solid|borderColor=#c4c1ba|bgColor=#ffffff|titleBGColor=#005072|titleColor=#ffffff}
    \\
    {table:width=100%}
    {tr}{th:colspan=2|bgcolor=#6e6e6e}{color:white}Platform{color}{th}{tr}
    {tr}{td:colspan=2}IBM pSeries{td}{tr}
    {tr}{th:colspan=2|bgcolor=#6e6e6e}{color:white}System{color}{th}{tr}
    {tr}{td:nowrap=nowrap|width=20%}{*}Operating System*{td}{td}AIX 6.1 with Technology Level 6 or later and Service Pack 5 (6100-06-05) or later{td}{tr}
    {tr}{td:nowrap=nowrap|width=20%}{*}Minimum CPU*{td}{td}POWER4 or later chipset{td}{tr}
    {tr}{td:nowrap=nowrap|width=20%}{*}Minimum Disk Space* {td}{td}75 MB {td}{tr}
    {tr}{td:nowrap=nowrap|width=20%}{*}Minimum Memory* {td}{td}256 MB {td}{tr}
    {tr}{td:nowrap=nowrap|width=20%}{*}Recommended Memory* {td}{td}1 GB {td}{tr}
    {tr}{th:colspan=2|bgcolor=#6e6e6e}{color:white} Software {color}{th}{tr}
    {tr}{td:colspan=2}* IBM 32-bit and 64-bit SDK for AIX, Java Technology Edition, Version 6, Service Refresh 9 Fix Pack 2 or later; available from IBM developerWorks at [http://www.ibm.com/developerworks/java]
    * IBM XL C/C+\+ Enterprise Edition for AIX 9.0
    * Apache Ant 1.8.1 or later; available at [http://ant.apache.org]* Apache HTTP Server 2.2 or later
    * PHP (PHP: Hypertext Preprocessor) 5.2.5 or later (but not 5.3.x){td}{tr}
    {table}{panel}

  • Avatar
    Jens Rutschmann

    Hi Graham,

    concerning the white text inside the boxes, the following CSS is as far as we can currently get. Unfortunately we cannot address the {th} elements at this moment. This means there is no possibility to change the background only for these "heading cells".

    div.panel td span {
      color: black !important;
      font-weight: bold;
    }

    div.panel td strong {
      font-weight: normal;
    }


    To remove the spacing at the top of the boxes, you may use something like this. Pleas note that you may need to adapt the selector if you wish to remove the spacing only in context of specific parent elements.

    div.confbox {
        margin-top: 0;
    }

     

    Please have a look at this ticket: http://k15t.jira.com/browse/PDF-240
    This will allow you to specify specific classes for example for the "heading cells" to give only these table cells an individual background color.

     

    Best regards,
    Jens

  • Avatar
    Graham Mueller

    Thanks for all the help, guys. We've reached a point where we are at least minimally releasable. I'm very much looking forward to that PDF-240 issue's completion.

  • Avatar
    Graham Mueller

    One more quick (and rather minor) question. I'm trying to target h4's to affect their font-size a bit. What should the class look like?

    Tried h4, h4.heading, div.h4, div.h4.heading, div.content h4, div.title, etc. No luck yet

  • Avatar
    Jens Rutschmann

    Hi Graham,

    something like this should work:

    h3.heading {
      color:red;
    }

    The h4. from Confluence is actually converted to a HTML h3 during the export because of the way pages are merged / concatenated. I guess the best way to find out which one to use is to export the document and then check the numbers in one of the headings you want to style, i.e. "1.1.1" -> h3, "1.2.3.9" -> h4

    Best regards,
    Jens

  • Avatar
    Graham Mueller

    Ah, good to know, thanks. However, I'm not sure I understand your last sentence.

Please sign in to leave a comment.

Powered by Zendesk