Custom CSS for Columns - WordPress Snippet Generator

Nimbus Themes / Magazine / Code / Custom CSS for Columns – WordPress Snippet Generator

Selector/s
Text Options
Code

Preview Window

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Selector/s

Item

Input

Req.

Valid

Notes

Codex

Selector:

Columns

Item

Input

Req.

Valid

Notes

Codex

Number of Columns:

Copy Code

Your customized code snippet is below. Be sure to fully read the instructions that follow before adding this code to your WordPress theme.

Your Custom CSS

Add this code to your style.css file. Scroll down to learn more.

       
{{cssSelector || '.class'}}{
        -moz-column-count: {{numberOfColumns || '3'}};
        -webkit-column-count: {{numberOfColumns || '3'}};
        column-count: {{numberOfColumns || '3'}};
}

Evan ScoboriaFeb 17 2017Comments

One of the most basic web design elements are columns. They allow web designers to divide big blocks of content into digestible chunks and increase the layout’s visual appeal. Although it is possible to create custom columns for your WordPress theme’s posts and pages using tables, it’s far from ideal. A much better solution is to create columns using HTML and CSS.

Read on to learn how to identify a CSS selector and how to use this snippet generator tool.

How Do I Identify a CSS Selector?

The first thing you’ll need to do is determine which part of your theme you’d like to alter. Once you’ve selected a page element, you’ll need to identify its class (.class-name) or ID (#id) using Chrome’s Inspect tool. Here’s how:

Right-click the page element you wish to inspect.
Click the Inspect menu item (in case of the Chrome browser).
The CSS styles for each element are shown in a separate preview pane on the right side of the browser window.
The most dominant selector (.class or #id) will be shown first in the list.

How Do I Use This Custom CSS for Columns Snippet Generator Tool?

We’ve put together this custom CSS for columns snippet generator to help both developers and web designers divide blocks of text into multiple columns easily in their WordPress themes. All you have to do to use this tool is enter the selector of the page element you’re targeting and specify how many columns you’d like to divide it into. The code generator will output a custom code for you that will work seamlessly on all major web browsers.

Let’s go over the individual fields one at a time:

Selector/s Tab
- Selector: Enter the selector you want to target here. It should be in all lowercase letters and hyphens e.g. .class-name. We outlined how to find a CSS selector in your WordPress theme in the previous section. For more information on how to identify a selector, please visit the WordPress Codex.
Text Options Tab
- Number of Columns: Specify the number of columns you want to divide the page element into. By default the value is set to 3.
Code Tab
- Once you’ve entered all of the required fields, head over to the Code tab. You’ll see that the Your Custom CSS area is populated with a custom code snippet for styling text with CSS in your WordPress theme.

How Do I Add the Code Snippet to My Website?

The quickest way to add the generated code snippet to your site is by pasting it directly into your current theme’s style.css file. You can edit it directly by navigating to Appearance > Editor from the WordPress admin panel.

Alternatively, you can download the theme’s style.css file to your desktop via an FTP client. Next, open it up in a text editor and paste the generated custom code snippet at the bottom of the file. Hit the Save button and re-upload it to your theme’s directory when you’re done.

Conclusion

Creating custom columns for your WordPress themes can increase its visual appeal and make the content you publish on it stand out. We hope that this code snippet generator tool helps you style your pages’ layout and saves you the effort of having to write code (that’s compatible with all major web browsers) by hand.

Do you have any questions about how to use the Custom CSS for Columns code snippet generator tool? Let us know in the comments section below!