- 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設備驅動開發詳解(第2版)
- 嵌入式Linux開發技術
- Implementing Cisco UCS Solutions
- Learning Windows Server Containers
- Persistence in PHP with the Doctrine ORM
- Linux性能優化
- 精解Windows8
- Dreamweaver CS5.5 Mobile and Web Development with HTML5,CSS3,and jQuery
- 完美應用RHEL 8
- NetDevOps入門與實踐
- Kali Linux高級滲透測試
- 寫給架構師的Linux實踐:設計并實現基于Linux的IT解決方案
- 電腦辦公(Windows 10 + Office 2016)入門與提高(超值版)
- Linux內核修煉之道
- Linux指令從初學到精通