I have added fonts in my theme but still getting 404.
import "utils/reset.less";
#apos-ui-font-path: '/modules/theme/public/css/font-awesome/fonts/';
.apos-add-font('roboto', #apos-ui-font-path + 'roboto-regular-webfont');
// Delete the boilerplate CSS below when you are ready to dive in and customize your sites
body { background-color: #apos-white;
}
.main-content {
margin: 200px auto;
padding: 20px;
max-width: 500px;
color: #apos-white;
background-color: #apos-primary;
.apos-drop-shadow;
.login-link {
float: right;
color: #apos-white;
}
// Basic rich-text editor styles:
h3 {
font-size: 24px;
margin-bottom: 12px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
strong { font-weight: bold; }
em { font-style: italic; }
}
Also I have attached my index.js
module.exports = {
construct: function(self, options) {
// loads from public/js/site.js of this module
self.pushAsset('script', 'popper');
self.pushAsset('script', 'bootstrap.min');
self.pushAsset('script', 'particles');
self.pushAsset('script', 'custom');
// loads from public/css/site.less of this module
self.pushAsset('stylesheet', 'jquery-3.2.1.min');
self.pushAsset('stylesheet', 'bootstrap.min');
self.pushAsset('stylesheet', 'font-awesome/font-awesome.min');
self.pushAsset('stylesheet', 'style');
self.pushAsset('stylesheet', 'site');
}
};
Did i miss something because my fonts are not working with apostrophe cms? or path is incorrect? How can i provide the relative path in theme for fonts
Thanks in Advance
Have you tried removing '/public' from the URL to your fonts. See the tutorial page for an example.
This code resolved my Question.
#font-face {
font-family: 'Roboto-Regular';;
src: url('/modules/mytheme/fonts/Roboto-Regular.woff') format('woff');
}
#font-face {
font-family: 'Roboto-Light';;
src: url('/modules/mytheme/fonts/Roboto-Light.woff') format('woff');
}
I have a font face declared like this in .erb file
<style>
#font-face {
font-family: 'robotoslab';
src: url("file://#{Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf')}");
}
</style>
And I am calling it like this
h5 {
text-transform: uppercase;
padding: 10px;
letter-spacing: 0.2px;
margin-top: 50px;
font-family: 'robotoslab';
font-size: 10px;
}
All the other properties are getting applied except font-family. Also I am sure that font file is the path
Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf')
=> #<Pathname:/home/vamsi/code/certificate_generator/app/tmp/fonts/RobotoSlab-Thin.ttf>
I am having this in tmp folder because of pdfkit does not like assest pipeline
You have to encapsulate it in <%= %>.
<style>
#font-face {
font-family: 'robotoslab';
src: url("file://<%= Rails.root.join('app', 'tmp', 'fonts', 'RobotoSlab-Thin.ttf') %>");
}
</style>
But I'm not sure if this works since you load the font via the file:// protocol. You probably want to load it via http. If so simply remove file://.
I have an app where I can generate reports and when I'm trying to generate one I have this error Error File name too long # rb_sysopen and a very long stuff see below. What I want to understand what could be the reason of this error. What should I look?
Errno::ENAMETOOLONG at /study_versions/2/export_acrf.2
File name too long # rb_sysopen - /Users/jakublemiszewski/Desktop/A3informatics/Tourmalet/Tourmalet/public/<html><head><style>h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }
h1.title { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }
h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }
This continues for many rows in the error message.
However, I have no idea where to look I spent hours to understand and cannot see a solution for it.
I believe the error comes from this class:
class PdfReport
C_CLASS_NAME = "PdfReport"
def self.create(title, sub_title, user, body_html)
paper_size = "A4"
html = page_header()
html += title_page(title, sub_title, user)
# Document history
html += body_html
# Completion instructions
html += page_footer()
#ConsoleLogger.log(C_CLASS_NAME, "create", "HTML=" + html.to_s)
# pdf = WickedPdf.new.pdf_from_string(html, :page_size => paper_size, :footer => {:font_size => "10", :font_name => "Arial, \"Helvetica Neue\", Helvetica, sans-serif", :left => "", :center => "", :right => "[page] of [topage]"} )
cls = [{:status=> ["created", "no_change", "updated"], :prefered_term => "test term", :notation => "This is test notation" }]
results = [{ bc_demo: 'demo'}]
pdf = CdiscChangesReport.new.create(results, cls, User.last, html)
return pdf
end
def self.page_header
html = "<html><head>"
html += "<style>"
html += "h1 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }\n"
html += "h1.title { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }\n"
html += "h2 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }\n"
html += "h2.title { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 18pt; line-height: 24pt; text-align: center; margin-top: 0; }\n"
html += "h3 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 16pt; }\n"
html += "h4 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 14pt; }\n"
html += "h5 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 12pt; }\n"
html += "p { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; }\n"
html += "table tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.simple { border: 1px solid black; border-collapse: collapse; width: 100%;}\n"
html += "table.simple tr td { border: 1px solid black; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.simple tr th { border: 1px solid black; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.form_table { border: 1px solid black; width: 100%;}\n"
html += "table.form_table tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px;}\n"
html += "table.form_table h4 { vertical-align: middle;}\n"
html += "table.form_table td:first-child{ font: bold; }\n"
html += "table.form_repeat { border: 1px solid black; width: 100%;}\n"
html += "table.form_repeat th { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; }\n"
html += "table.form_repeat tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top;}\n"
html += "table.details tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 11pt; text-align: left; vertical-align: top; padding: 1px; }\n"
html += "table.ci { border: 1px solid black; width: 100%; border-collapse: collapse;}\n"
html += "table.ci tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: top; padding: 5px; border-bottom: 1pt solid black; }\n"
html += ".ci td table, .ci td table tbody, .ci td table td { border:none; }\n" # Stops inheritence into markdown
html += "table.note { border: 1px solid black; width: 100%;}\n"
html += "table.note tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; font: bold; text-align: left; vertical-align: top; }\n"
html += "table.input_field { border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black;}\n"
html += "table.input_field tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 8pt; text-align: center; vertical-align: center; padding: 5px; }\n"
html += "table.input_field td:not(:last-child){border-right: 1px dashed}\n"
html += "table.cl_field tr td { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; font-size: 10pt; text-align: left; vertical-align: center; padding: 2px; }\n"
html += "table.cl_field td:first-child{ border: 1px solid black; }\n"
html += "tr.warning { background-color: #fcf8e3 !important; }\n"
html += "</style>"
html += "</head><body>"
return html
end
def self.page_footer
html = "</body></html>"
return html
end
def self.title_page(title, sub_title, user)
name = ENV['organization_title']
image_file = ENV['organization_image_file']
dir = Rails.root.join("app", "assets", "images")
file = File.join(dir, image_file)
time_generated = Time.now
# Generate HTML
html = "<br><br><div style=\"text-align: center;\"><img src=\"#{file}\" style=\"height:75px;\"></div>"
html += "<h2 class=\"title\">#{name}</h2>"
html += "<br>" * 10
html += "<h1 class=\"title\">#{title}<br>#{sub_title}</h1>"
html += "<br>" * 23
html += "<table class=\"details\" align=\"right\"><tr><td>Run at:</td><td>#{time_generated.strftime("%Y-%b-%d, %H:%M:%S")}</td></tr><tr><td>Run by:</td><td>#{user.email}</td></tr></table>"
html += page_break
return html
end
def self.page_break
return "<p style='page-break-after:always;'></p>"
end
end
File systems have limits to the length of the path of the filename. Your error shows that you're naming your file with the contents of your file, which is probably why you're hitting this limit.
From your error message, here is your attempted filename:
/Users/jakublemiszewski/Desktop/A3informatics/Tourmalet/Tourmalet/public/<html><head><style>h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 34pt; }
h1.title { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24pt; line-height: 30pt; text-align: center; margin-top: 0; }
h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 18pt; line-height: 28pt; }
Giving your file a proper name should resolve your issue.
CSS:
body {
margin: 0;
background-image: url('../images/gplaypattern.png');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color:#cccccc;
/*background-color: #ffffff;*/
My picture file is in assets/images while the css is in assets/stylesheets
Try this:
background-image: url('/assets/gplaypattern.png');
I've tried changing the line-height to 0, and that made the spacing considerably smaller, but there's still about one cm between each line....
When I wrote the HTML in htmledit(DOT)squarefree(DOT)com/ it looked very small
http://i.stack.imgur.com/NsBG5.png
but when I put it on my blog and saved, the spacing was greatly enlarged...
http://i.stack.imgur.com/utZ6m.png
The code I was entering is
<p <span title="Made by [name]" style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 50px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">Text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0;">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="text-align: center; font-size: 25px; font-family: arial; color: #8A0808; text-shadow: 0px 0px; line-height: 0">text<br /><span style="line-height: 0"><br /><span style="text-align: center; font-size: 15px; font-family: georgia; color: #FF0000; text-shadow: 0px 0px; line-height: 0"> © text</span style="line-height: 0" p>
Your code is pretty messy. Most of the tags aren't closed.
<tag> gets closed with </tag>
<p>some text for a paragraph</p>
<span style="some style">some text to be displayed in that style</span>
(With the exception of self-closing tags such as <input> and <img>.
If you put elements inside of other elements (called "nesting"), you have to properly close them (like above), but in reverse of the order they were opened.
<p>this is a paragraph
<span>this is a span inside the paragraph. it gets closed before the paragraph</span>
the span is now closed, and the paragraph can be closed
</p>
But nesting isn't necessary in your case. See this example that does what you want. Here's the HTML from it:
<div style="background-color:black; border: double 10px #FF0000; text-align: center; font-size: 25px; font-family: arial; color: #FF0000; text-shadow: 5px 5px 4px #8A0808;">
<!-- Text inside these special braces is called a comment. It isn't displayed on the page -->
<!-- Beginning of <p> element -->
<!-- Change the value of "line-height" here to space lines differently -->
<p style="line-height:25px">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
<!-- End of <p> element -->
<!-- The following "text" is in a separate <p> element, so it will be displayed by itself -->
<p>
text
</p>
</div>