CherryFramework 4. 如何添加自定义类的短代码和分配自定义CSS规则给他们

本教程将向您展示如何将自定义css类添加到短代码中，并为它们分配自定义css规则 CherryFramework 4 templates.

CherryFramework 4. 如何添加自定义类的短代码和分配自定义CSS规则给他们

Let’s create a new shortcode with custom class:

1. 创建一个新的帖子/页面:

   

2. 选择任何想要的 shortcode. We will insert ‘Team’ shortcode as an example:

   

3. Adjust shortcode 满足您需求的参数. 向下滚动，找到 ‘Class’ box.

4. 为此创建自定义样式类 shortcode, e.g.: ‘new_team’. Click ‘Insert shortcode’ button:

   

5. Custom class 已成功添加到您的 shortcode:

   

我们已经成功添加了new shortcode with custom class ‘new_team’. Let’s see how to 分配自定义CSS规则 to this class:

1. 打开帖子/页面 shortcode 您之前创建了:

   

2. We will use FireBug plugin for Firefox browser 检查元素.

3. 检查元件 you want to edit. 找到所需的样式类:

   

4. Add your custom class 在普通的之前， add/adjust 任何需要的CSS属性:

   

   现在，这些更改将应用于 custom class 只和不会影响普通样式类.

5. Click on the CSS class 用鼠标右键选择 “复制规则声明” 选项将其复制到剪贴板:

   

6. 访问你的WordPress dashboard and navigate to Cherry > Options.

7. 粘贴之前复制的内容 CSS rule to the ‘User CSS’ box:

   

8. 导航到您的站点前端和 refresh the page 要查看变化.

本教程到此结束. 现在您知道了如何向短代码添加自定义类并为它们分配自定义CSS规则.

请随时查看下面的详细视频教程:

CherryFramework 4. 如何添加自定义类的短代码和分配自定义CSS规则给他们