full list of CSS Classes and what they look like

[jeststeve]

I have just purchased Denali and it is a great theme. While setting up a new page i used the ‘starting point’ of the Denali Home Page. A great feature. While looking through the fields that are in the custom layout i see that each Element subsection has it’s own css-class – as you would expect.

What i would like to know is if there is a page where i can choose a class (e.g. ‘home-boxes’) and see it in action. I see that in my ‘starting point’ page i can view it in preview or live and see what those elements look like, but i’m looking for an independent list of included classes with how they appear in a live page.

Does this exist?

Topic

[Jason Bobich]

Hi,

Thanks for the kinds words. No, there isn’t any kind of full-list, but I think there’s probably less classes than you’re thinking.

When you see the long list of sample layouts, those are all mostly from the layout builder plugin, itself, meant to work with all of our themes. None of those default sample layouts use any kind of special classes or styling.

In addition to those, the theme adds two sample layouts, Denali Home and Denali Home Basic. Now, I wanted those to have some slightly unique styling to do something special specifically for this theme, and so I added a few classes to sections.

So, to see all of them, simply create two pages, apply those two sample layouts to the pages, save them, and then just check them out on your site.

After you understand how the layout builder works and how sample layouts work, this should realistically take less than a minute to setup the two pages and preview on your own site.

Does that help?

[jeststeve]

Thank you that explains it. I was thinking there were a lot of predefined css classes like in the sample home page. I had already looked at it as you suggest and like it a lot.

I am using some other plugins besides the ones you recommend. Some are other photo viewers one is an event calendar plug in. I was wondering if there is a way to add other plugin data to your layout builder elements? I see that you choose the element from the drop down and add it into a section – or add a a new section. But not how to add other data into the layout.

[Jason Bobich]

I was wondering if there is a way to add other plugin data to your layout builder elements?

Most plugins are either going to come with a shortcode or widget that allows you to implement them within your site.

1. For a shortcode, you’d just add a “Content” element to your custom layout and put the plugin’s shortcode within its content.

2. For a widget, you can create a floating widget area at Appearance > Widget Areas, add the plugin’s widget to it at Appearance > Widgets, add the “Widget Area” element to your custom layout, and then select the widget area you created.

[jeststeve]

thats awesome. thank you.

[Author]

Replies