How to dock/layer widgets

Hi Heather,

I assume by dock you mean style? If so, I think this article will be of much help to you -

How to edit a skin's CSS - Steps that you need to take in order to edit your skin's CSS.

Furthermore, for placement and layout modfiications, please refer to the following articles:

Editing and Adding Layouts - Steps on how to modify the columns, rows, and width for your page layouts

Editing and Adding Quilts - Steps on how to edit and add new quilts for standard and custom use

Each of these should get you started in terms of styling the two widgets mentioned. I'd also like to point out our Admin Guide: Studio Basic as it covers the above information, plus much more in regards to our core CSS classes and structure.

I hope this helps!

No. I understand how to style a skin for the most part. It looks as though they've docked two separate widgets, expert advice and latest buzz, which I assume is recent posts and featured posts. I already have custom quilts, layouts, and css. I mostly understand those concepts but I don't know how to combine widgets/components like that. 

---

HeatherBartron wrote:

No. I understand how to style a skin for the most part. It looks as though they've docked two separate widgets, expert advice and latest buzz, which I assume is recent posts and featured posts. I already have custom quilts, layouts, and css. I mostly understand those concepts but I don't know how to combine widgets/components like that. 

---

I see, apologies for the confusion on my part.

Basically, to do something like that you'd want to take advantage of a JavaScript or jQuery solution.

A helpful page in terms of getting started for setting up the HTML structure as well as the functions can be found on the jquery website - http://docs.jquery.com/UI/Tabs

Using that logic, you could set up a div structure and hide one of the divs until the tab that corresponds with it is selected. On each div, you could either write the code to pull the content you desire to display or you could reference a component within each. In order to reference a custom component within another, check out this guide. I outline the syntax for doing this under the Referencing a component heading.

I hope this is helpful!