+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / How to create a color strip background?

How to create a color strip background?

8 posts, 0 answered
  1. Jonathan
    Jonathan avatar
    7 posts
    Registered:
    19 Dec 2011
    09 Dec 2012
    Link to this post
    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.
  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    13 Dec 2012
    Link to this post
    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.

    Kind regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Jonathan
    Jonathan avatar
    7 posts
    Registered:
    19 Dec 2011
    13 Dec 2012 in reply to Jen Peleva
    Link to this post
    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
  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    17 Dec 2012
    Link to this post
    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:

    http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/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:

     Horizontal

     RadTabStrip

     Horizontal with drop-down menus

     RadMenu

    Horizontal with tabs

     RadTabStrip

    Vertical

     RadTabStrip

    Tree (vertical with sub-levels)

     RadTreeView

    Sitemap divided in columns

     RadSiteMap

    Sitemap divided in rows

     RadSiteMap

    Custom Navigation

     RadSiteMap



    Greetings,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

     Horizontal

     RadTabStrip

     Horizontal with drop-down menus

     RadMenu

    Horizontal with tabs

     RadTabStrip

    Vertical

     RadTabStrip

    Tree (vertical with sub-levels)

     RadTreeView

    Sitemap divided in columns

     RadSiteMap

    Sitemap divided in rows

     RadSiteMap

    Custom Navigation

     RadSiteMap


  5. Jonathan
    Jonathan avatar
    7 posts
    Registered:
    19 Dec 2011
    23 Dec 2012 in reply to Jen Peleva
    Link to this post
    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
  6. Ivan Eftimov
    Ivan Eftimov avatar
    23 posts
    Registered:
    20 Jul 2016
    26 Dec 2012
    Link to this post
    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.

    All the best,
    Ivan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. renik
    renik avatar
    2 posts
    Registered:
    03 Jan 2013
    03 Jan 2013 in reply to Jonathan
    Link to this post
    i too had this doubt hlp me
  8. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    08 Jan 2013
    Link to this post
    Hi Renik,

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

    Regards,
    Pavel Benov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
8 posts, 0 answered