getting started - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

getting started

  • getting started
  • Hello, I'm new to Sitefinity, but I so far I like it.  I am not proficient in .Net, but I program in xhtml and css all the time.  I have been working on creating my first sitefinity website and I have created a Template, and linked a page to it. 

    Now I'm interested in learning how to style the template more to my liking.  I understand you can edit the layout elements, and there is a wrapper text field in the classes section of the editor.  My question is, what css file does this wrapper look at?  or do I have to create it?  or am i completely off the mark here?

    Also, how would I edit the styling of the navigation widget?  I see it has a place for a wrapper css class as well, but i'm not sure where the css should be coming from?

    Lastly, I see there is a CSS widget under Scripts and Styles.  If I dropped this into the page somewhere, would this be where I would define the css for those wrappers?  Or is there a nother purpose for this widget?

    I look forward to any responses.  Thanks!

    -Robert
  • Hi Robert,

    I am not sure what you mean by "wrapper text field" but most of the CSS which is linked to a page comes from the theme that is applied to this page. You can read more about how to create a theme in Designer's guide.

    The CSS of Navigation control is also to be written in the theme. After you set a new wrapper CSS class to the Navigation control, the default skin files will stop loading.

    No matter where you drop the CSS widget, the CSS file will be linked in the HEAD tag. If you have 2 CSS widgets on a page, the first will be linked first and the second after that. Javascript widget has options for where the file will be loaded.

    Let us know if you need further help.

    All the best,
    Katia
    the Telerik team
  • I am reading the designers guide...

    In it, it talks about how to register a theme.  It says I have to:

    "Place you theme inside any of the App_Themes folders.
    For example, place the template in folder /App_Data/Sitefinty/WebsiteTemplates/YourTemplate/App_Themes/YourTheme."

    Now, i have created the template already.... but it didn't create a folder itself under /App_Data/Sitefinty/WebsiteTemplates/

    do I just create the folder manually and call it the same name as my template?  or does that not matter because it will register the theme regardless? 
  • Hi Robert,

    The name of the template does not matter. You should follow the structure.

    ~/App_Data/Sitefinity/WebsiteTemplates/[YourTemplates]/App_Master/.
    ~/App_Data/Sitefinity/WebsiteTemplates/[YourTemplates]/App_Themes/.

    All the best,
    Ivan Dimitrov
    the Telerik team
  • ok, so after I created my own template, and theme, and linked them, and published it all.... I notice that my template is no longer centered, and expands the full 100% of the page...  when i switch the template back to the Basic theme, it fixes the centering and width issue... so I assume I need to do something in my theme to fix this, but for the life of me i don't know what it is.  I have tried defining the layout width in CSS, but it ignores it. 

    What do I have to do to limit the width of the layout elements and center them??
  • Hi Robert,

    Add the CSS rule from below to your theme.

    .sfPublicWrapper
        margin: 20px auto;
        padding: 0;
        width: 900px;

    Let us know if you need further help.


    Greetings,
    Katia
    the Telerik team
  • In internet Explorer, there is spacing between each of the layout elements.  In firefox, there are not.  see attachments. 

    how can I fix this?

  • any chance I could get a reply?
  • well, i upgraded to sitefinity 4.1 and the issue is resolved.  looks like sitefinity 4.0 didn't work well with ie 9?

    anyway, glad to have it working correctly now.  4.1 is the way to go.