How to create a color strip background?

I would like to have a different background and style for my logo and menu then for the rest of the page. An example would be this forum where you have a black background for the "DEVELOPER NETWORK" Label and next to it is a nav menu. Using the Sitefinity backend, this would be represented by two columns in the layout. The problem is, if the page background is not black, and you set it individually for each content/control, you'll get gaps with the page style filling the extra space.

I loaded up the Corporate starter kit and went to the Sitefinity backend. If you look at the layout, it actually has two separate layouts instead of one solid one. How can I create this through the backend UI?
Note: I am new to CSS and styling in general.
Thanks.

Hello Jonathan,

I wasn't able to reproduce what you describe by placing a navigation and a content block under it. The content block would be placed right under the navigation, without leaving any space. However, this doesn't mean that the space you've mentioned appears improperly. Sometimes there are other css styles that prevent the controls from sticking to each other. You can inspect the two columns and see if any margins and paddings are set to them. The paddings will add space inside the columns and the margins will add space between the columns. Also, you can use css positioning to manually append controls to each other by explicitly setting how they should be positioned. I would suggest you to take a look at the W3C website for additional css tips.

In my post, I am asking about two column's "next to" each other, but I was able to find the the UI option to change that. You have to click "edit" on the layout element and then in the right pane that shows up, click "Spaces" and then set all the left and right spaces to 0. That brings the two columns together, but, it doesn't solve the problem of the background color. I have set the same background color for both content items, but they don't "fill" in the whole column. How do you fill in a layout element's background?
I also stated that I am trying to do this through the "backend UI", meaning, no master page or CSS wrapper. Is this possible to do, as I am not seeing the right options to change all the styling. Can you please explain in steps or with screenshots how to fill in the background color for the space each layout element and column takes up?

I know of W3 schools, and I can write this myself if I didn't want to use Sitefinity and write my website from scratch using "divs", "spans", and "tables". What I want to know is, how am I suppose to do this in Sitefinity.

UPDATE 1: I can confirm no spacing by default between vertically stacked layout elements and have removed that question from above. I set the BackColor to something other than the page background and saw it fill in, though this only worked for some widgets and not all. An example of a widget where whole background color is not filled in would be the login/logout button. Here, only a small enclosing background is set with the value in BackColor, and the rest of the layout column that it lives in is unchanged.

Another question: Where is the documentation for all the CSS classes/properties for each Sitefinity widget, so that I could completely style a widget, like the navigation widget. When looking at this styling link, http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/navigation-widgets-group/configuring-the-navigation-widget/style-the-navigation-widget the example CSS only shows some of the selectors. How do I find the full CSS reference for this widget and other widgets?

Thanks,
-Jonathan

Hi Jonathan, 

I wasn't able to reproduce what you mentioned about the login widget. If you set the Spaces of the layout properties to 0px, the two layout columns get next to each other without any spaces. Please take a look at the attached images.

As for the css classes you would like to use, we have css references for all widgets from the toolboxes in our documentation:

www.sitefinity.com/.../css-classes-reference
 
The article for the navigation widget contains only the basic css classes, because different navigation modes use difference RadControls. Here's a table with the modes and their corresponding RadControls. The css reference for these controls can be found in their documentation:

Greetings,
Jen Peleva
the Telerik team

Thank you Jen for the CSS reference. I think that is what I was looking for.
As for the spaces, I think you misunderstood which widget I was referring to. I created some screenshots reproducing the issue for an "Image" widget and the "Login/Logout" widget.
I created an image that is 300px X 114px in size with an orange background. I set all spaces in the layout columns to 0. Observe that for the Image widget, that setting the "BackColor" in the advanced section when editing the column has no affect and for the and Login/Logout widgets, it only is set for the space the Text takes up, not the whole layout element.

Also, if you look at the "layout_after.png" image clip, you'll notice how that after adding the logo image to the left column, the height resizes to fit the original size of the image (this is by choice), but the right column doesn't resize its height to match. Is there a way to have both column's height synced, or at least be able to change the right column's height to match the left column?

Thanks,
Jonathan

Hi Jonathan,

You cannot sync the height of the right column, but you can control the height of the login widget through its settings (Login/log out button > Edit > Height). Also, the BackColor property will have effect on the whole height of the widget, not only the text.

i too had this doubt hlp me

Hi Renik,

Can you elaborate a bit further on the problem you are having?