HOw to load css?

Topics: Customizing Orchard, General, Localization
Oct 17, 2012 at 3:20 PM

How to load css from the site: http://www.freecsstemplates.org/ into orchard?

 

I can do it with traditional asp.net mvc4. But how to load it in orchard?

 

THX

Coordinator
Oct 17, 2012 at 4:28 PM

Use @Style.Include. Search the code for examples.

Oct 17, 2012 at 10:32 PM

For example I want this layout:

http://www.freecsstemplates.org/download/zip/artifice/

Iv triied in Layout.cshtml, to include:

Style.Include("style.css");

but that doesnt work so good.

Coordinator
Oct 17, 2012 at 10:55 PM

"that doesn't work so good" <- the amount of useful information in this sentence is zero. How is is failing? Where did you put the style.css file?

Developer
Oct 17, 2012 at 10:59 PM

I maybe mistaken but... don't you need the full URL in Style.Include(

Coordinator
Oct 17, 2012 at 11:00 PM

You are mistaken.

Developer
Oct 17, 2012 at 11:02 PM

Doesn't he want to reference a CSS file outside of orchard?

Developer
Oct 17, 2012 at 11:02 PM

Doesn't he want to reference a CSS file outside of orchard?

Oct 17, 2012 at 11:06 PM

And I made a folder inside theThemeMachine - Styles - images. the style.css has 6 images. But they are also not loaded.

Developer
Oct 17, 2012 at 11:08 PM

You may need a web.config file in those folders.

By default orchard locks everything down.

Copy one from an existing styles folder

Oct 17, 2012 at 11:08 PM

I just put the style.css in the folder: TheThemeMachine, like the Site.css that is already in the TheThemeMachine and I put a image folder - see my previous post.

Oct 17, 2012 at 11:11 PM
Edited Oct 17, 2012 at 11:12 PM

witch webconfig? if you download the theme: http://www.freecsstemplates.org/download/zip/artifice/. You will see how it looks like. I just run it in adobe dreamweaver. If I run the css in orchard I only see a black background, but also not the images

Developer
Oct 17, 2012 at 11:14 PM

Can you paste an extract from your layout.cshtml file where you put it? 

Oct 17, 2012 at 11:20 PM
Edited Oct 18, 2012 at 11:36 AM

Here it is:

 

@functions {
    // To support the layout classifaction below. Implementing as a razor function because we can, could otherwise be a Func in the code block following.
    string CalcuClassify(string[] zoneNames, string classNamePrefix) {
        var zoneCounter = 0;
        var zoneNumsFilled = string.Join("", zoneNames.Select(zoneName => { ++zoneCounter; return Model[zoneName] != null ? zoneCounter.ToString() : "";}).ToArray());
        return HasText(zoneNumsFilled) ? classNamePrefix + zoneNumsFilled : "";
    }
}
@{
    /* Global includes for the theme
    ***************************************************************/
    
    SetMeta("X-UA-Compatible", "IE=edge,chrome=1");
    Style.Include("http://fonts.googleapis.com/css?family=Lobster&subset=latin");
   // Style.Include("site.css");
    Style.Include("style.css");

    /* Some useful shortcuts or settings
    ***************************************************************/
Oct 18, 2012 at 11:36 AM
Edited Oct 18, 2012 at 11:37 AM

But also the pictures are not loaded, only a black background is seen

Developer
Oct 18, 2012 at 11:54 AM

Is the theme enabled?

Oct 18, 2012 at 11:56 AM

What do you mean with enabled? The theme is in the styles folder, this is the style.css:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 3.0 License

Name       : Artifice
Description: A two-column, fixed-width design with a dark color scheme.
Version    : 1.0
Released   : 20120813
*/

* {
	padding: 0;
	margin: 0;
}

body {
	color: #AFAFAF;
	background: #040606 url(images/img01.gif) repeat-x top left;
	line-height: 2em;
	font-size: 12pt;
}

body,input {
	font-family: 'Ubuntu Condensed', sans-serif;
}

br.clearfix {
	clear: both;
}

a {
	text-decoration: underline;
	color: #E3E3E3;
}

a:hover {
	text-decoration: none;
}

strong {
	color: #D9D9D9;
}


h1,h2,h3,h4 {
	font-weight: normal;
	text-transform: uppercase;
}

h2 {
	font-size: 1.75em;
}

h2,h3,h4 {
	color: #E3E3E3;
	font-family: Kreon, sans-serif;
	margin-bottom: 1.25em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.25em;
}

img.alignleft {
	margin: 5px 20px 20px 0;
	float: left;
}

img.aligntop {
	margin: 5px 0 20px 0;
}

p {
	margin-bottom: 1.75em;
}

ul {
	margin-bottom: 1.75em;
}

ul h4 {
	margin-bottom: 0.4em;
}

.box {
	margin: 0 0 25px 0;
	overflow: hidden;
}

#content {
	width: 420px;
	padding: 0;
	float: left;
}

#footer {
	padding: 0 0 90px 0;
	text-align: center;
	color: #555;
}

#footer a {
	color: #707070;
}

#header {
	width: 1100px;
	padding: 40px;
	position: relative;
	height: 120px;
}

#logo {
	height: 120px;
	line-height: 120px;
	top: 40px;
	left: 40px;
	position: absolute;
}

#logo a {
	color: #FFF;
	text-decoration: none;
}

#logo h1 {
	font-size: 3.25em;
	font-family: Kreon, sans-serif;
}

#menu {
	position: absolute;
	box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.05), inset 0px 3px 15px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,0.08);
	right: 40px;
	top: 68px;
	font-family: Kreon, sans-serif;
	height: 70px;
	line-height: 70px;
}

#menu a {
	font-size: 1.25em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

#menu ul {
	padding: 0 20px 0 20px;
	list-style: none;
}

#menu ul li {
	display: inline;
	padding: 0 20px 0 20px;
}

#page {
	margin: 0;
	width: 1100px;
	position: relative;
	padding: 70px 40px 0px 40px;
}

#page .section-list {
	padding-left: 0;
	list-style: none;
}

#page .section-list li {
	clear: both;
	padding: 25px 0 25px 0;
}

#page ul {
	list-style: none;
}

#page ul li {
	padding: 15px 0 15px 0;
	border-top: dotted 1px #404040;
}

#page ul li.first {
	padding-top: 0;
	border-top: 0;
}

#col1 {
	width: 195px;
	float: left;
	overflow: hidden;
}

#col2 {
	width: 195px;
	margin: 0 0 0 220px;
	overflow: hidden;
}

#sidebar1 {
	padding: 0;
	margin: 0 0 0 445px;
	width: 315px;
}

#sidebar2 {
	width: 315px;
	float: right;
	padding: 0;
}

#splash {
	height: 295px;
	width: 1180px;
	padding: 0;
	position: relative;
}

#wrapper {
	background: #000000 url(images/img02.gif) repeat-x top left;
	margin: 75px auto 0 auto;
	width: 1180px;
	position: relative;
	box-shadow: inset 0px 0px 30px 0px rgba(255,255,255,0.05), 0px 0px 30px 0px rgba(0,0,0,0.5);
}

Oct 18, 2012 at 12:06 PM
Edited Oct 18, 2012 at 2:57 PM

You have to change the css? How to enable it?

Oct 18, 2012 at 5:00 PM

Can somebody give me a hint? THX

Coordinator
Oct 18, 2012 at 5:22 PM

Please give the list of file names that you see in each directory and subdirectory of the theme (not the contents of the files, just their names)

Oct 18, 2012 at 5:32 PM

TheThemeMachine - styles - images

styles - images

TheThemeMachine - views. And in views, you have the regular files: BadgeOfHonour.cshtml, Branding.cshtml, Layout.cshtml,Pager.cshtml, Pager.First.cshtml, pager.Last.cshtml.

And in Styles, you have the files: Site.css, and the style.css.

Coordinator
Oct 18, 2012 at 5:39 PM

So you are saying that you don't have web.config files in any of those folders? Did you delete them at some point?

Oct 18, 2012 at 5:41 PM

Ofcourse there is a webconfig. But that is the file just by making a new orchard project. So I dint touched it

Coordinator
Oct 18, 2012 at 5:42 PM
Where? I asked you to list *all* the files, as it's important information to troubleshoot your issue.

On Thu, Oct 18, 2012 at 9:41 AM, savantKing <notifications@codeplex.com> wrote:

From: savantKing

Ofcourse there is a webconfig. But that is the file just by making a new orchard project. So I dint touched it

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com


Oct 18, 2012 at 10:27 PM
Edited Oct 18, 2012 at 10:43 PM

But,,oke so there is a web.config. But how to get the style correct? thx.. But I think it is very easy to try it by urself. Just download the style.css I gave the link and then make a new Orchard project and put a reference in Layout for the style.css what I did. Then you see it doesnt work. And I dont find any thing on the internet how to do it.

Oct 18, 2012 at 11:32 PM

Did you try it?

Coordinator
Oct 19, 2012 at 12:19 AM

Look, you have to understand we have no magical powers, so we can't just guess what's going on on your machine. That's why you need to give enough information for us to figure it out. When we ask questions, it's to fill the gaps in the information you give.

There is a web.config. Good. Where?

Oct 19, 2012 at 1:43 PM

The web.config is in the folder when you make a new orchard project - so in my case: TestSiteOrchard - web.config. It is the file that you see when you make a new orchard project.

Developer
Oct 19, 2012 at 1:44 PM
Can you post the contents of the file?

On Fri, Oct 19, 2012 at 1:43 PM, savantKing <notifications@codeplex.com> wrote:

From: savantKing

The web.config is in the folder when you make a new orchard project - so in my case: TestSiteOrchard - web.config. It is the file that you see when you make a new orchard project.

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com


Oct 19, 2012 at 1:46 PM

oke. This is the content of the file: web.config:

<?xml version="1.0" encoding="utf-8"?>
<!-- 
    Note: As an alternative to hand editing this file you can use the 
    web admin tool to configure settings for your application. Use
    the Website->Asp.Net Configuration option in Visual Studio.
    A full list of settings and comments can be found in 
    machine.config.comments usually located in 
    \Windows\Microsoft.Net\Framework\v2.x\Config 
-->
<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor" requirePermission="false" />
    </sectionGroup>
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net" requirePermission="false" />
  </configSections>
  <appSettings>
    <add key="webpages:Enabled" value="false" />
    <add key="log4net.Config" value="Config\log4net.config" />
  </appSettings>
  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    <pages pageBaseType="Orchard.Mvc.ViewEngines.Razor.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
        <add namespace="System.Linq" />
        <add namespace="System.Collections.Generic" />
        <add namespace="Orchard.Mvc.Html" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>
  <!-- 
        Set default transaction timeout to 30 minutes so that interactive debugging 
        is easier (default timeout is less than one minute)
  -->
  <system.transactions>
    <defaultSettings timeout="00:30:00" />
  </system.transactions>
  <system.web>
    <!--<trust level="Medium" originUrl="" />-->
    <httpRuntime requestValidationMode="2.0" />
    <!-- 
            Set compilation debug="true" to insert debugging 
            symbols into the compiled page. Because this 
            affects performance, set this value to true only 
            during development.
    -->
    <compilation debug="false" targetFramework="4.0" batch="true" numRecompilesBeforeAppRestart="250" optimizeCompilations="true">
      <buildProviders>
        <add extension=".csproj" type="Orchard.Environment.Extensions.Compilers.CSharpExtensionBuildProviderShim" />
      </buildProviders>
      <assemblies>
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />
        <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
        <remove assembly="System.Configuration, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <remove assembly="System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <remove assembly="System.Data, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.Web.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <remove assembly="System.Xml, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <remove assembly="System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <remove assembly="System.IdentityModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.Runtime.Serialization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.ServiceModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.ServiceModel.Activation, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.ServiceModel.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.Activities, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.ServiceModel.Activities, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.WorkflowServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <remove assembly="System.Data.DataSetExtensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
        <remove assembly="System.Web.ApplicationServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </assemblies>
    </compilation>
    <!--
            The <authentication> section enables configuration 
            of the security authentication mode used by 
            ASP.NET to identify an incoming user. 
    -->
    <authentication mode="Forms">
      <forms loginUrl="~/Users/Account/AccessDenied" timeout="2880" />
    </authentication>
    <!--
            The <customErrors> section enables configuration 
            of what to do if/when an unhandled error occurs 
            during the execution of a request. Specifically, 
            it enables developers to configure html error pages 
            to be displayed in place of a error stack trace.
    -->
    <customErrors mode="RemoteOnly" />
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Linq" />
        <add namespace="System.Collections.Generic" />
        <add namespace="Orchard.Mvc.Html" />
      </namespaces>
    </pages>
    <httpHandlers>
      <!-- see below -->
      <clear />
      <add path="*" verb="*" type="System.Web.HttpNotFoundHandler" />
    </httpHandlers>
    <httpModules>
      <add name="WarmupHttpModule" type="Orchard.WarmupStarter.WarmupHttpModule, Orchard.WarmupStarter, Version=1.0.20, Culture=neutral" />
    </httpModules>
  </system.web>
  <!-- 
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.
  -->
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="WarmupHttpModule" />
      <add name="WarmupHttpModule" type="Orchard.WarmupStarter.WarmupHttpModule, Orchard.WarmupStarter, Version=1.0.20, Culture=neutral" />
    </modules>
    <handlers accessPolicy="Script">
      <!-- clear all handlers, prevents executing code file extensions, prevents returning any file contents -->
      <clear />
      <!-- Return 404 for all requests via managed handler. The url routing handler will substitute the mvc request handler when routes match. -->
      <add name="NotFound" path="*" verb="*" type="System.Web.HttpNotFoundHandler" preCondition="integratedMode" requireAccess="Script" />
    </handlers>
    <!-- Prevent IIS 7.0 from returning a custom 404/500 error page of its own -->
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <probing privatePath="App_Data/Dependencies" />
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0" newVersion="3.0.0.0" />
        <bindingRedirect oldVersion="2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.WebPages.Deployment" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="2.0.0.0" newVersion="1.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

Oct 19, 2012 at 3:01 PM

you need to have a web.config in each of the folders you wish static content to be served from. For example, if you're using the TheThemeMachine theme, and want both scripts, js, style, whatever folders static content to be served from those folders, you need to have the following folder/file structure.

.\TheThemeMachine\scripts\web.config

.\TheThemeMachine\js\web.config

.\TheThemeMachine\style\web.config

.\TheThemeMachine\whatever\web.config

The content for ALL of those web.config's should look like:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>
  <system.web>
    <httpHandlers>
      <!-- iis6 - for any request in this location, return via managed static file handler -->
      <add path="*" verb="*" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>

    <handlers accessPolicy="Script,Read">
      <!--
      iis7 - for any request to a file exists on disk, return it via native http module.
      accessPolicy 'Script' is to allow for a managed 404 page.
      -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

I hope this helps everyone get your issue sorted!

Cheers,

P.

Oct 24, 2012 at 7:29 PM

Ok, THX everyone!!