在前面的视频里我们使用视图模块创建了一个幻灯片区块，你应该能看到视图的灵活性，不过目前来说，并不是所有的事情都能通过视图完成，很多时候我们都需要自己写一些 CSS 样式，所以，使用 Drupal 创建网站，不一定要懂网页程序语言，但是最好先学会 CSS。

下面我们手工为这个幻灯片添加一些 CSS 样式。先说一下大概的思路，我们要做的就是让控制栏，显示在幻灯片内容的上面，包括图片分页器，还有这些控制的链接，可以使用 CSS 的绝对定位属性，然后再给控制栏添加一个半透明的黑色背景。

我们还要让图片分页里的项目显示成一排… 还要修改一下 后退，前进，暂停/恢复 的样式。

使用 Chrome 浏览器的开发者工具，可以查看一下幻灯片区块上的元素…

点击右键，选择 审查元素 …

大体了解一下幻灯片上的元素，幻灯片区块里的内容会用一个带有 .skin-default 类的 <div> 标签包围住，在这个 <div> 标签里，又分成了两部分，一部分是幻灯片的主要内容，另一部分是幻灯片的控制栏内容。

注意幻灯片区块里的元素上都定义了很多 CSS 类，你可以根据需求，选择特定的类做为样式的选择器。

下面我直接把事先写好的样式，粘贴到主题的样式表里 …

打开资料包里的 04-06 里的文件，复制一下这里面的样式 …. 再打开当前使用的主题的某个 CSS 样式表…. 把样式粘贴到这里面。下面我们解释一下…

.skin-default 是包装幻灯片所有内容的元素，这里我们设置了它的位置属性为相对，还有一个下边的外边距…

.views-slideshow-controls-bottom 是在包装幻灯片控制栏的元素上定义的类，我们设置它的位置属性的值为绝对，这样它会相对于 .skin-default 元素进行绝对定位，width 属性设置它的宽度，还用 background-color 属性添加了一个半透明的黑色背景。

.views-slideshow-pager-field-item 是用来包装每一个分页器里的项目，我设置了浮动属性为向左浮动，这样图片分页器里的缩略图会显示成一排。然后用 margin-right 属性添加了一个 20 像素的外边距，cursor 属性设置了鼠标指针的样式，这样用户把鼠标移到图片分页器上，鼠标指针会变成指示状态，提示用户可以点击这个元素。

.views_slideshow_pager_field .active img 这段样式定义了激活状态下的图片分页器项目的样式，播放到哪个幻灯片，就在相应的图片分页器项目的元素上添加一个 .active 类，所以我们可以添加点样式，让用户很容易通过图片分页器看出当前显示的是那一个幻灯片。

这里我们在激活状态的图片分页器项目的下边添加了一个3像素的蓝色的实线。

下面定义了鼠标悬停在前进和后退按钮上面时的变化。

下面这块是前进按钮和后退按钮的样式，这里我借用了 Bootstrap 架构旋转木马插件的样式，这段样式让后退和前进的链接看起来像是一个按钮。

其它的样式都是跟前进，后退还有暂停恢复按钮相关的样式。

保存一下，然后我们可以回到前台页面去看一下…

这里我们可以看到幻灯片区块的变化… 下面我们可以再改进一下这个前进和后退按钮，我们把前进和后退用符号来代替。

打开配置，翻译，打开 翻译 选项卡，搜索 后退 … 确定是在幻灯片模块里使用的字符，点击 编辑，把 后退，用这个符号代替：&lsaquo;

保存…

再搜索一下 前进 … 编辑， 用 &rsaquo; 代替前进这两个字儿… 保存 …

再回到幻灯片所在的页面上，刷新。

现在我们才真正算是创建了一个可以在正式网站中使用的幻灯片区块。