堆栈内存溢出
  简体   繁体   English

通过 CSS 在 ioslides 中更改项目符号类型

[英]Changing Bullet Type in ioslides via CSS

 原文  2021-02-23 02:07:02  5   2    css/ r-markdown/ bullet/ ioslides

问题描述

I would like to be able to change the style of R-Markdown-generated bullets in ioslides document-wide through the CSS file.我希望能够通过 CSS 文件在 ioslides 文档范围内更改 R-Markdown 生成的项目符号的样式。

I understand that I can use HTML to change the format of unordered bulleted lists within the body of an ioslides file in R Markdown, as is discussed here to change the color.我知道我可以使用 HTML 更改 R Markdown 中 ioslides 文件正文中无序项目符号列表的格式，如此处讨论的那样更改颜色。 Doing this for every bulleted list seems kludgy.对每个项目符号列表都这样做似乎很笨拙。

I tried adding this to the CSS file:我尝试将其添加到 CSS 文件中：

ul {list-style-type: circle;}

which adds a, eg, circular bullet in addition to the default bullet placed by ioslides.除了ioslides 放置的默认项目符号外，它还添加了一个圆形项目符号。

It therefore appears the crux may be to find a way to remove bullets from unordered lists in ioslides (after which styled bullets can be added in their stead), but adding this to the CSS file:因此，看来关键可能是找到一种方法从 ioslides 中的无序列表中删除项目符号（之后可以添加样式项目符号代替它们），但将其添加到 CSS 文件中：

ul {list-style: none;}

(with our without the previous attribute) does not remove the bullets. （with our without the previous attribute）不删除项目符号。

Although the ioslides reference manual is quite useful, neither it nor other searches provided further insights.尽管ioslides 参考手册非常有用，但它和其他搜索都没有提供进一步的见解。

Reproducible code for an ioslides presentation in RStudio is: RStudio 中 ioslides 演示文稿的可重现代码是：

CSS CSS

(Saved as style.html into the same directory as the.Rmd snippet, below. The code to tweak the bullets is on lines 65 -- 68. This style sheet comes from the ioslides default given here .) （作为 style.html 保存到与下面的 .Rmd 片段相同的目录中。调整项目符号的代码位于第 65 - 68 行。此样式表来自此处给出的 ioslides 默认值。）

<!DOCTYPE html>
<html$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
<head>
  <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="generator" content="pandoc" />



$if(date-meta)$
  <meta name="date" content="$date-meta$" />
$endif$

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <base target="_blank">

  <script type="text/javascript">
    var SLIDE_CONFIG = {
      // Slide settings
      settings: {
        $if(title)$
        title: '$title$',
        $endif$
        $if(subtitle)$
        subtitle: '$subtitle$',
        $endif$
        useBuilds: true,
        usePrettify: true,
        enableSlideAreas: true,
        enableTouch: true,
        $if(analytics)$
        analytics: '$analytics$',
        $endif$
        $if(logo)$
        favIcon: '$logo$',
        $endif$
      },

      // Author information
      presenters: [
      $for(author)$
      {
        name: $if(author.name)$ '$author.name$' $else$ '$author$' $endif$,
        company: '$author.company$',
        gplus: '$author.gplus$',
        twitter: '$author.twitter$',
        www: '$author.www$',
        github: '$author.github$'
      },
      $endfor$
      ]
    };
  </script>

$for(header-includes)$
  $header-includes$
$endfor$

  <style type="text/css">

ul {list-style: none;}      /* Does not repress ioslides-generated bullets */
li::marker {display: none;} /* Does not repress ioslides-generated bullets */

li {list-style-type: circle;} /* Creates bullest *in addition to* those created by ioslides */

    b, strong {
      font-weight: bold;
    }

    em {
      font-style: italic;
    }

    summary {
      display: list-item;
    }

    slides > slide {
      -webkit-transition: all $transition$s ease-in-out;
      -moz-transition: all $transition$s ease-in-out;
      -o-transition: all $transition$s ease-in-out;
      transition: all $transition$s ease-in-out;
    }

    .auto-fadein {
      -webkit-transition: opacity 0.6s ease-in;
      -webkit-transition-delay: $transition$s;
      -moz-transition: opacity 0.6s ease-in $transition$s;
      -o-transition: opacity 0.6s ease-in $transition$s;
      transition: opacity 0.6s ease-in $transition$s;
      opacity: 0;
    }
/* https://github.com/ropensci/plotly/pull/524#issuecomment-468142578 */
slide:not(.current) .plotly.html-widget{
  display: block;
}

    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    span.underline{text-decoration: underline;}
    div.column{display: inline-block; vertical-align: top; width: 50%;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    $if(quotes)$
    q { quotes: "“" "”" "‘" "’"; }
    $endif$
    $if(highlighting-css)$
    $highlighting-css$
    $endif$
    $if(displaymath-css)$
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
    $endif$

$if(logo)$
    slides > slide:not(.nobackground):before {
      font-size: 12pt;
      content: "";
      position: absolute;
      bottom: 20px;
      left: 60px;
      background: url($logo$) no-repeat 0 50%;
      -webkit-background-size: 30px 30px;
      -moz-background-size: 30px 30px;
      -o-background-size: 30px 30px;
      background-size: 30px 30px;
      padding-left: 40px;
      height: 30px;
      line-height: 1.9;
    }
$endif$
  </style>

$for(css)$
  <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
$endfor$

</head>

<body style="opacity: 0">

$if(widescreen)$
<slides class="layout-widescreen">
$else$
<slides>
$endif$

$if(include-before)$
  $for(include-before)$
    $include-before$
  $endfor$
$else$
  <slide class="title-slide segue nobackground">
    $if(logo)$
    <aside class="gdbar"><img src="$logo$"></aside>
    $endif$
    <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
    <hgroup class="auto-fadein">
      <h1 data-config-title><!-- populated from slide_config.json --></h1>
      $if(subtitle)$<h2 data-config-subtitle><!-- populated from slide_config.json --></h2>$endif$
      <p data-config-presenter><!-- populated from slide_config.json --></p>
      $if(date)$
      <p style="margin-top: 6px; margin-left: -2px;">$date$</p>
      $endif$
    </hgroup>
  </slide>
$endif$

RENDERED_SLIDES

$for(include-after)$
  $include-after$
$endfor$

  <slide class="backdrop"></slide>

</slides>

$if(mathjax-url)$
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "$mathjax-url$";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
$endif$

<!-- map slide visiblity events into shiny -->
<script>
  (function() {
    if (window.jQuery) {
       window.jQuery(document).on('slideleave', function(e) {
         window.jQuery(e.target).trigger('hidden');
      });
       window.jQuery(document).on('slideenter', function(e) {
         window.jQuery(e.target).trigger('shown');
      });
    }
  })();
</script>

</body>
</html>

.Rmd ioslides code .Rmd ioslides代码

(Saved as, eg, test.Rmd into the same directory as style.html, above. This code comes from the ioslides manual .) （例如，保存为 test.Rmd 到与上面的 style.html 相同的目录中。此代码来自ioslides 手册。）

---
title: "Habits"
author: John Doe
output:
  ioslides_presentation:
    template: style.html
---

# In the morning
    
## Getting up
    
- Turn off alarm
- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

# In the evening

## Dinner

- Eat spaghetti
- Drink wine

TYIA蒂亚

2 个解决方案

解决方案1
 1  2022-02-15 10:18:58

What seems to work, and may be a bit more simple than editing the actual slideshow.html is the following:什么似乎有效，并且可能比编辑实际的幻灯片更简单。html 如下：

Firstly, include a style.css file in your.Rmd:首先，在 your.Rmd 中包含一个 style.css 文件：

output:
  ioslides_presentation:
    css: styles.css

Secondly, create the styles.css file (same folder as your.Rmd) and add the following to it:其次，创建 styles.css 文件（与 your.Rmd 相同的文件夹）并向其中添加以下内容：

ul li ul li:before {
  content: "\25CB";
}

ul li:before {
  content: "\25CF";
}

This changes the bullet style type for first level (using the hex code 25CF for a filled circle) and the second level (25CB, empty circle).这会更改第一级（使用十六进制代码 25CF 表示实心圆）和第二级（25CB，空心圆）的项目符号样式类型。

解决方案2
 0 已采纳  2021-03-21 22:28:03

TL;DR: TL;博士：

To the best of my knowledge, bullets (and many other stylistic elements) can only be changed in the header of the slideshow that is knit from the "CSS" and.Rmd ioslides files.据我所知，项目符号（和许多其他风格元素）只能在从“CSS”和.Rmd ioslides 文件编织的幻灯片的 header 中更改。

Overall Explanation整体解释

(Nb: for ease, I'll refer to the "CSS" file as style.html , the.Rmd file first created in RStudio as draft.Rmd , and the final slideshow knit from those two files as slideshow.html . Not that the names of all of these files can be changed by the user.) (Nb: for ease, I'll refer to the "CSS" file as style.html , the.Rmd file first created in RStudio as draft.Rmd , and the final slideshow knit from those two files as slideshow.html . Not that用户可以更改所有这些文件的名称。）

My first clue (noted early on and then more or less ignore) was that the "CSS" file is not a cascading style sheet per se.我的第一个线索（早期注意到然后或多或少忽略）是“CSS”文件本身不是级联样式表。 Although by default named "style," the extension is correctly ".html"---not ".css": It's in fact an.html file---although one that contains elements relegated to headers.虽然默认命名为“style”，但扩展名是正确的“.html”——而不是“.css”：它实际上是一个.html 文件——尽管它包含归为标题的元素。

ioslides takes the information in the style.html file and integrates it into different parts of the final slideshow file that is creates from the style.html and draft.Rmd file. ioslides 获取style.html文件中的信息，并将其集成到从style.html和draft.Rmd文件创建的最终幻灯片文件的不同部分。 The formatting elements for the slideshow.html are all in the header of that file. slideshow.html的格式化元素。html 都在该文件的 header 中。 Ie, there is no separate.css file that slideshow.html accesses for styles.即，没有单独的.css 文件可供slideshow.html .html 访问styles。

This means that some (arguably many) stylistic elements can be modified within the style.html file but any other elements must be modified within the final slideshow.html .这意味着可以在style.html文件中修改一些（可以说是许多）风格元素，但必须在最终的slideshow.html中修改任何其他元素。

Of course, changing elements in style.html is easy and allows for quick re-knits to test those changes.当然，更改style.html中的元素很容易，并且允许快速重新编织以测试这些更改。 It also means that that style.html file can be reused with other.Rmd files for consistent formatting.这也意味着style.html文件可以与其他 .Rmd 文件重复使用以实现一致的格式。

Any other stylistic elements must be changed in the slideshow.html that is (re)knit after any changes to either the style.html or 'draft.Rmd` file.在对style.html或“draft.Rmd”文件进行任何更改后（重新）编织的slideshow.html中的任何其他风格元素都必须更改。 This can be a simple search/replace operation, so far from impossible---just less obvious or automated.这可以是一个简单的搜索/替换操作，远非不可能——只是不太明显或自动化。

Answering My Particular Question回答我的特定问题

Searching through the header generated in the slideshow.html file, I found:搜索slideshow.html中生成的header.html文件，发现：

ul li ul li:before {
content: '-';
font-weight: 600;
}

ul > li:before {
content: '\00B7';
margin-left: -1em;
position: absolute;
font-weight: 600;
}
  • Replacing content: '\00B7';替换content: '\00B7'; with list-style-type: circle;使用list-style-type: circle; in ul > li:before { replaces the first-order bullets with circles.在ul > li:before {用圆圈替换一阶项目符号。

The second- (etc.) order bullets will still be dashes, so:第二（等）顺序项目符号仍将是破折号，因此：

  • Replacing content: '-';替换content: '-'; with list-style-type: circle;使用列表样式类型：圆形； in ul li ul li:before {` replaces the second-order dashes with circles. in ul li ul li:before {` 用圆圈替换二阶破折号。

Common regex could expedite this with, viz., searching for content: '.*';常见的正则表达式可以加快这一点，即搜索content: '.*'; and replacing that with something/nothing else.并用一些东西/没有别的东西代替它。 Of course, one could choose different bullets for the two levels as ioslides does by default with dots and dashes.当然，可以为两个级别选择不同的项目符号，就像 ioslides 默认使用点和破折号一样。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS：更改列表中项目符号的颜色？ - CSS: changing the color of a bullet in a list? 使用css配置ioslides后台 - configuring ioslides background with css Rmarkdown ioslides更改表头 - Rmarkdown ioslides changing table headers 将自定义 CSS 应用于单个 ioslides - Applying custom CSS to individual ioslides CSS 去除了 ioslides 中的 Kable 样式 - CSS strips Kable Styling in ioslides 在R中使用CSS自定义ioslides - Using CSS to customize ioslides in R 通过JS更改CSS - Changing CSS via JS 闪亮的演示文稿（幻灯片）：自定义CSS和徽标Windows 7/8 - Shiny Presentation (ioslides): Custom CSS and logo Windows 7/8 是否有任何 RMarkdown “ioslides-CSS”参考指南？ - Is there any RMarkdown “ioslides-CSS” reference guide? 通过 css 更改 JavaFX 微调器 - changing JavaFX spinner via css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM