1 Reply Latest reply on Jun 3, 2013 2:29 PM by Peter Grainge

    Editing multilevel lists in CSS

    perrin319 Level 1

      We have a CSS file in our RH10 project that we've been editing to fit our own in-house styles.


      The latest issue we're having is trying to get Multilevel lists to match our style. When you click the Multilevel list button in RH, a multilevel list is inserted into the topic, and that is fine, but we're trying to make the first bullet be a graphic that we have defined for bullets that fits our theme.


      We were able to define the graphic for single unordered lists, but we can't figure out how to insert the image in multilevel lists. The code RH inserts into the CSS looks proprietary, and I can't decide what would allow me to define an image URL:


      x-lvl-1-format: "<x>";

                x-lvl-2-format: "<x>";

                x-lvl-3-type: circle;

                x-lvl-3-format: "<x>";

                x-lvl-4-format: "<x>";

                x-lvl-5-format: "<x>";

                x-lvl-6-type: square;

                x-lvl-6-format: "<x>";

                x-lvl-6-margin: 100px;

                x-lvl-7-type: circle;

                x-lvl-7-format: "<x>";

                x-lvl-7-margin: 120px;

                x-lvl-8-type: diamond;

                x-lvl-8-format: "<x>";

                x-lvl-8-margin: 140px;

                x-lvl-9-type: disc;

                x-lvl-9-format: "<x>";

                x-lvl-9-margin: 160px;

                x-lvl-9-pfx-class: rls-9-Bullets;

                x-lvl-1-pfx-class: rls-1-Bullets;

                x-lvl-2-pfx-class: rls-2-Bullets;

                x-lvl-3-pfx-class: rls-3-Bullets;

                x-lvl-4-pfx-class: rls-4-Bullets;

                x-lvl-5-pfx-class: rls-5-Bullets;

                x-lvl-6-pfx-class: rls-6-Bullets;

                x-lvl-7-pfx-class: rls-7-Bullets;

                x-lvl-8-pfx-class: rls-8-Bullets;

                x-lvl-4-type: "En Dash";

                x-lvl-4-margin: 60px;

                x-lvl-4-p-class: BodyPara;

                x-lvl-4-p-tag: p;

                x-lvl-5-type: diamond;

                x-lvl-5-margin: 80px;

                x-lvl-5-p-class: BodyPara;

                x-lvl-5-p-tag: p;

                x-lvl-2-type: "En Dash";

                x-lvl-2-margin: 65px;

                x-lvl-2-text-indent: -20px;

                x-lvl-2-p-class: BodyList;

                x-lvl-2-p-tag: p;

                x-lvl-3-margin: 60px;

                x-lvl-3-text-indent: -20px;

                x-lvl-3-p-class: BodyPara;

                x-lvl-3-p-tag: p;

                x-level-count: 9;

                x-lvl-1-type: square;

                x-lvl-1-margin: 35px;

                x-lvl-1-text-indent: -13px;

                x-lvl-1-p-class: BodyList;

                x-lvl-1-p-tag: p;



      Any help would be appreciated....thanks!