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

Forums / Designing & Styling / getting started

getting started

9 posts, 0 answered
  1. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    21 Feb 2011
    Link to this post
    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
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    23 Feb 2011
    Link to this post
    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
  3. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    03 Mar 2011
    Link to this post
    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? 
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    04 Mar 2011
    Link to this post
    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
  5. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    09 Mar 2011
    Link to this post
    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??
  6. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    11 Mar 2011
    Link to this post
    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
  7. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    03 Jun 2011
    Link to this post
    In internet Explorer, there is spacing between each of the layout elements.  In firefox, there are not.  see attachments. 

    how can I fix this?
  8. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    07 Jun 2011
    Link to this post
    any chance I could get a reply?
  9. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    08 Jun 2011
    Link to this post
    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.
9 posts, 0 answered