- jQuery UI Cookbook
- Adam Boduch
- 214字
- 2021-08-13 16:40:49
Controlling spacing with themes
The space between accordion sections is controlled by the CSS theme framework. In particular, the visual structure for the accordion is defined by a set of CSS rules that can be modified to control the spacing between accordion sections. We could override the accordion theme CSS to adjust for more or less spacing between sections.
How to do it...
We're going to supply an additional CSS module to our UI—one that overrides the accordion structure supplied in the theme we happen to be using. There's no need to fret, however, our change is a simple one. We're going to update the margin-top
property. In a new CSS file called theme.accordion.css
, let's add the following style rules:
.ui-accordion .ui-accordion-header { margin-top: 4px; }
Now that we have the CSS, we need to include it in our HTML header. It should look something like this:

How it works...
We're copying the same CSS selector as is found in any jQuery UI theme. The particular property we've just changed alters the space between the accordion sections. Since we're overriding the default theme value, it's important to include our CSS files after the default theme file. This allows us to override the default theme instead of the default theme overriding our modifications.
- Linux設(shè)備驅(qū)動(dòng)開(kāi)發(fā)詳解(第2版)
- Ansible權(quán)威指南
- Arch Linux Environment Setup How-to
- 曝光:Linux企業(yè)運(yùn)維實(shí)戰(zhàn)
- 嵌入式應(yīng)用程序設(shè)計(jì)綜合教程(微課版)
- Ganglia系統(tǒng)監(jiān)控
- Kubernetes從入門到實(shí)踐
- Linux運(yùn)維最佳實(shí)踐
- 細(xì)說(shuō)Linux基礎(chǔ)知識(shí)
- OpenStack系統(tǒng)架構(gòu)設(shè)計(jì)實(shí)戰(zhàn)
- NetDevOps入門與實(shí)踐
- Hands-On UX Design for Developers
- Linux應(yīng)用大全 基礎(chǔ)與管理
- Agile IT Security Implementation Methodology
- OpenStack Essentials(Second Edition)