CODEWITHSUNDEEP
orchardcmsstyling
user1558541
user1558541

Reputation: 21

How to style Blog Output in Orchard CMS

I am a beginner using Orchard CMS (and web design in general). I'm having trouble styling the output of blog pages on my site. Many of my pages have custom HTML to create a background for text. I would like to re-create this background on all blogs created through the Dashboard.

I've looked all through this site and Google for the past few weeks trying to find information, but I can't find anything substantial that isn't completely over my head.

I removed some information for privacy reasons, but basically the code creates a container where I can place my content. Here is the (revised) code for the background:

<table style="float: right" width="100%" border="1" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="width: 21px;"><img src="src.gif" /></td>
            <td style="background-image: url('src.gif'); font-family: Arial, Helvetica, sans-serif; color: white; font-size: 15px; font-weight: bold;">
                <span style="float: left">[Redacted]</span>
                <span style="float: right">
                        <script language="javascript">
                        var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday",
                        "Thursday","Friday","Saturday");
                        var monthNames = new Array(
                        "January","February","March","April","May","June","July",
                        "August","September","October","November","December");
                        var now = new Date();
                        document.write(dayNames[now.getDay()] + ", " + 
                        monthNames[now.getMonth()] + " " + 
                        now.getDate() + ", " + now.getFullYear());
                    </script>
                </span>
            </td>
            <td style="width: 21px;"><img src="src.gif" /></td>
        </tr>
        <tr>
            <td style="background-image: url('src.gif');"></td>
            <td style="background-color: #fcfefc;">
<!-- Content goes here -->

<!-- End Content -->
            </td>
            <td style="background-image: url('src.gif');"></td>
        </tr>
        <tr>
            <td><img src="src.gif" /></td>
            <td style="src.gif');"></td>
            <td><img src="src.gif" /></td>
        </tr>
    </tbody>
</table>

Here are my questions:

  1. How do I style my blog(s) and every blog page so that all content falls within this container?
  2. How do I change the output of the 'excerpt'? The default length of the blog excerpt cuts off in strange places. I want to be able to control this.
  3. Aside from orchardproject.net, can anyone recommend a good place to find Orchard documentation for beginners? I feel the learning curve is steep for me, but I'm committed to learning Orchard. Can you recommend a good place to start so that I can get a good base for this type of stuff?

I'm quite a beginner, but I'm trying to get better, so please bear with me. I have almost no .Net or C# experience, and my CMS knowledge is basic (Wordpress).

Thanks for reading!

Upvotes: 2

Views: 1242

Answers (1)

Bertrand Le Roy
Bertrand Le Roy

Reputation: 17814

  1. In your theme, override the content.cshtml template so it includes your html instead of what's in the default one. The original template shows how to add zones into which content will get inserted (typically something like @Display(Model.Content).

  2. Override the content summary template. See http://weblogs.asp.net/bleroy/archive/2012/07/01/my-body-summary-template-for-orchard.aspx

  3. http://docs.orchardproject.net/Documentation/Orchard-TV

If I may, I'd like to make some comments on your markup as well:

  • Table should not be used for layout but only for tabular data.
  • Inline styles should not be used and should be replaced by styles defined in stylesheets.
  • That script should not be added inline but rather should be in a separate file, and included using @Script.Include so that if the template is rendered more than once for whatever reason, the script is not added as many times.
  • The script is polluting the global namespace.
  • The script is not localizable.
  • Instead of that client-side script, you should probably use server-side code, which by the way already knows day and month names in all cultures of the world. @DateTime.Now.ToString("dddd, MMMM yyyy") should be able to replace that whole script block.

Upvotes: 4

Related Questions