futurepress/epubjs-rn

some html tag not override in code

Closed this issue · 1 comments

hi want change theme of epub book but some tag not change , i checked html source of epub . i see some parameter set in html not change like body background . but some parameter not define change correctly , any way i override parameter was set in html file .

epub html source

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="generator" content="Aspose.Words for .NET 16.3.0.0" />
    <title></title>
    <!--[if gte mso 9]><xml><o:DocumentProperties><o:Revision>0</o:Revision><o:TotalTime>0</o:TotalTime><o:Created>2017-08-02T09:09:18Z</o:Created><o:Pages>0</o:Pages><o:Words>0</o:Words><o:Characters>0</o:Characters><o:Lines>0</o:Lines><o:Paragraphs>0</o:Paragraphs><o:CharactersWithSpaces>0</o:CharactersWithSpaces><o:Version>0.0000</o:Version></o:DocumentProperties></xml><![endif]-->
</head>

<body style="background:#ffffff">
    <div>
        <h1 id="navPoint_1"
            style="margin-top:23.25pt; margin-bottom:6pt; text-indent:18pt; page-break-after:avoid; widows:0; orphans:0; font-size:18pt">
            <span style="font-family:'Liberation Sans', sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Nunc ac faucibus odio. </span></h1>
        <p style="margin-top:6pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt"><span
                style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">Vestibulum neque massa, scelerisque sit amet ligula eu,
                congue molestie mi. Praesent ut varius sem. Nullam at porttitor arcu, nec lacinia nisi. Ut ac dolor
                vitae odio interdum condimentum. </span><span
                style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Vivamus dapibus sodales ex, vitae
                malesuada ipsum cursus convallis. Maecenas sed egestas nulla, ac condimentum orci. </span><span
                style="font-family:'DejaVu Sans', sans-serif">Mauris diam felis, vulputate ac suscipit et, iaculis non
                est. Curabitur semper arcu ac ligula semper, nec luctus nisl blandit. Integer lacinia ante ac libero
                lobortis imperdiet. </span><span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nullam
                mollis convallis ipsum, ac accumsan nunc vehicula vitae. </span><span
                style="font-family:'DejaVu Sans', sans-serif">Nulla eget justo in felis tristique fringilla. Morbi sit
                amet tortor quis risus auctor condimentum. Morbi in ullamcorper elit. Nulla iaculis tellus sit amet
                mauris tempus fringilla.</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">Maecenas mauris lectus, lobortis et purus mattis,
                blandit dictum tellus.</span></p>
        <ul style="margin:0pt; padding-left:0pt">
            <li
                style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <span style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Maecenas non lorem quis tellus
                    placerat varius. </span></li>
            <li
                style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nulla facilisi. </span></li>
            <li
                style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt; text-decoration:underline">Aenean
                    congue fringilla justo ut aliquam. </span></li>
            <li
                style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <a href="https://products.office.com/en-us/word" style="text-decoration:none"><span
                        style="font-family:'DejaVu Sans', sans-serif; text-decoration:underline; color:#000000">Mauris
                        id ex erat. </span></a><span style="font-family:'DejaVu Sans', sans-serif">Nunc vulputate neque
                    vitae justo facilisis, non condimentum ante sagittis. </span></li>
            <li
                style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <span style="font-family:'DejaVu Sans', sans-serif">Morbi viverra semper lorem nec molestie. </span>
            </li>
            <li
                style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
                <span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt">Maecenas tincidunt est efficitur
                    ligula euismod, sit amet ornare est vulputate.</span></li>
        </ul>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <img src="image.001.png" width="431" height="217" alt=""
                style="-aw-left-pos:92.5pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:8.5pt; -aw-wrap-type:square; float:left" />
        </p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">In non mauris justo. Duis vehicula mi vel mi pretium, a
                viverra erat efficitur. Cras aliquam est ac eros varius, id iaculis dui auctor. Duis pretium neque
                ligula, et pulvinar mi placerat et. Nulla nec nunc sit amet nunc posuere vestibulum. Ut id neque eget
                tortor mattis tristique. Donec ante est, blandit sit amet tristique vel, lacinia pulvinar arcu.
                Pellentesque scelerisque fermentum erat, id posuere justo pulvinar ut. Cras id eros sed enim aliquam
                lobortis. Sed lobortis nisl ut eros efficitur tincidunt. Cras justo mi, porttitor quis mattis vel,
                ultricies ut purus. Ut facilisis et lacus eu cursus.</span></p>
        <p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">In eleifend velit vitae libero sollicitudin euismod.
                Fusce vitae vestibulum velit. Pellentesque vulputate lectus quis pellentesque commodo. Aliquam erat
                volutpat. Vestibulum in egestas velit. Pellentesque fermentum nisl vitae fringilla venenatis. Etiam id
                mauris vitae orci maximus ultricies. </span></p>
        <p style="margin-top:11.25pt; margin-bottom:23.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
            <span style="font-family:'DejaVu Sans', sans-serif">&#xa0;</span></p>
    </div>
</body>

</html>

my theme code

  themes={{
                        "custom_theme": {
                            "p": {
                                "background-color": "purple",
                                "font-size": "15px"
                            },
                            "h1": {
                                "color": "red",
                            },

                            "li": {
                                "background-color": "yellow",
                                "color":"red",
                            },
                            "body": {
                                "background": "#ffff00",
                            }
                        }
                    }}
                    theme="custom_theme"

in li tag color is set in html , and that's not change by code too!

most be use !important in css tag