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:
How do I style my blog(s) and every blog page so that all content falls within this container?
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.
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!
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).
Override the content summary template. See http://weblogs.asp.net/bleroy/archive/2012/07/01/my-body-summary-template-for-orchard.aspx
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.
Related
I have a controller that renders up a template file (twig) with some forms and a table response.
I need to export to an Excel file that table response.
Is there a way to do that using Symfony, jQuery or Javascript?
I want to avoid using https://github.com/liuggio/ExcelBundle for which I need to recreate the objects.
I already have them created as they are used in twigs.
You can create an HTML table using Twig (using Twig is not necessary) and then save the output as an Excel file (.xls). You can use simple CSS in a <style> tag and in inline styles. For example:
<style>
.last {
color: red;
text-align: center;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th style="font-style: italic">Country</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>row.name</td>
<td>row.age</td>
<td>row.country</td>
</tr>
{% endfor %}
<tr class="last">
<td colspan="3">This last row is red</td>
</tr>
</tbody>
</table>
When you open the file in Excel, you probably get a message saying:
The file you are trying to open file.xls is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?
There might be a workaround for this but I'm not sure.
This approach is simple and doesn't use any dependencies so it might be good enough for you if you don't need a very complex Excel file.
There are many resources with more information about this. See for example: How can I export tables to excel from a webpage.
After connecting to the PostgreSql Database and retrieving specific data, some (5) visualisations were made. Instead of publishing each paragraph (Each individual visualisation) to a website, is there a way of publishing the whole report (obtained while viewing the notebook in report view)?
Well, that is quite useful feature. I would welcome something like that.
I was thinking about exactly same thing. I needed to publish 4 simple visualizations at once. After some attempts I found way how to solve this.
As a first step I just created one last paragraph on the end of my notebook which had interpreter displaying HTML. I used pyspark by:
print("""%html ... """)
Then I created simple HTML table layout like this:
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;"> </td>
<td style="width: 50%;"> </td>
</tr>
<tr>
<td style="width: 50%;"> </td>
<td style="width: 50%;"> </td>
</tr>
</tbody>
</table>
(I am not HTML professional, so I just used HTML generator for this).
After layout was generated, I populated all cells with each paragraph iframe link I needed to display. As example, one cell of table looks like this:
<td style="width: 50%;"><iframe src=LINK_WHICH_YOU_GET_BY_PUBLISHING_PARAGRAPH width="100%" height="400"></iframe></td>
There is more parameters how you can play/tune within that HTML table and with iframes, but it require some HTML skills.
When all cells of the HTML table are populated just try to run the HTML in that very last paragraph of your notebook. If outcome is OK then just publish this lash paragraph and you have one link to your all visualizations.
I am trying to use web safe fonts like:'Tahoma','Lucida','Helvetica' in an emailer for gmail but its not working everything is falling back to 'Arial'. I have tried 'inline css' but still no success but I have seen a mailer from 'Apple' using 'Lucida Grande'...any help will be appreciated
If you declare a font stack using inline CSS, system fonts will display in every version of Gmail (every web browser, every mobile client) provided said font is installed in system. Just like web pages.
<td style="font-family: Tahoma, Lucida, Helvetica, sans-serif;">
Text goes here.
</td>
For best results, place the inline font declaration on the lowest level HTML tag relative to the text.
✖ Not this:
<td style="font-family: Tahoma, Lucida, Helvetica, sans-serif;">
<span style="color: #000000;">
Text goes here.
</span>
</td>
✔ Instead this:
<td>
<span style="color: #000000; font-family: Tahoma, Lucida, Helvetica, sans-serif;">
Text goes here.
</span>
</td>
I'm using Aurelia framework with Material Design Lite via plugin "aurelia-mdl-plugin".
I have the following markup:
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th>Col2</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr repeat.for="s of items">
<td class="mdl-data-table__cell--non-numeric">${s.name}</td>
<td>${s.someothercol}</td>
<td>View</td>
</tr>
</tbody>
</table>
This markup represents a list of items that are selectable - each of them gets a checkbox with ability to select + the list gets "select all" check box in the header.
The problem is that since this additional markup with checkboxes is generated by MDL I can't really bind to it.
If I had a checkbox manually inserted I would do something like:
<input type="checkbox" checked.bind="s.IsChecked" />
Is there any way to fix this?
PS> I don't think it's necessarily Aurelia specific. Most likely I would have the same problem in Angular or other library..
The mdl team officially deprecated automatic checkbox insertion. So now you should write them down manually, which would solve your binding issue.
See this link: https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes
I have created custom list and modified display form of list for display attached image of list.
I have place HTML image control on display form but I can’t get attachment URL path which I can assign to Image control. I tried to some level hardcode like:
“http://Server Name/SiteName/Lists/ListName/Attachments/{#ID}/???”
I can get ID value so it can be work but the last thing file name, I am not able to get the attached file name.
Do I need to write code to get path? If yes then which event I have to inherited
This solution requires undocumented magic.
...puts robe and wizard hat
Inside your table with the #Title and such:
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Attachments</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="attachmentsField" ControlMode="Display" FieldName="Attachments" />
</td>
</tr>
You can change the attribute ControlMode to "Edit", it shows the Delete option.