I am trying to add a block to product page by using my custom module.
I do not want to modify any magento default files for this. I know it's possible by modifying the code in view.phtml template. Below is what I tried so far. I have copied the default magento view.phtml file in all module template folder as below. I included layout file inside config.xml of my module and written code for the block.
view.phtml file I placed under each template of module folder.
app/desifn/frontend/default/default/template/mymodule/view.phtml
config.xml file of module -
<frontend>
<routers>
<modulename>
<use>standard</use>
<args>
<module>Module_name</module>
<frontName>modulefrontname</ntNafrome>
</args>
</modulename>
</routers>
<layout>
<updates>
<modulename module="module_name">
<file>module.xml</file>
</modulename>
</updates>
</layout>
</frontend>
This file is under -
app/desifn/frontend/default/default/layout/modulename.xml
<reference name="product.info">
<block type="module_name/product_view" name="product_list">
<action method="setTemplate" ifconfig="module_name/sp_category/status">
<template>modulename/product/view.phtml</template>
</action>
</block>
</reference>
Node modulename is invalid (wrong closing tag)
<updates>
<modulename module="module_name">
<file>module.xml</file>
</module>
</updates>
and also template paths do not match
/mymodule/view.phtml
and
modulename/product/view.phtml
But back to your initial Question:
view.phtml of default template does not contain getChildHtml without any parameters. So the only way to inject custom stuff is to use a block of type core/text_list, which is "product.info.simple.extra". All you need is to make use of before or after attributes in your xml layout.
I am wondering if selectedParams is supported for Polymer 1.0.
I am following the doc of more-route
https://github.com/PolymerLabs/more-routing
in the README file.
<link rel="import" href="../bower_components/more-routing/more-routing.html">
<more-routing-config driver="hash"></more-routing-config>
<more-route name="login" path="/">
</more-route>
<more-route name="inbox" path="/inbox">
<more-route name="viewemail" path="/:threadId">
</more-route>
</more-route>
<more-route-selector selectedParams="{{params}}" on-click="bodyClick">
<iron-pages selected="{{route}}" class="fullbleed fit">
<section route="login" >
</section>
<section route="viewemail" class="layout vertical fit">
Test params : <span>{{params}}</span> End
Test params : <span>{{params.threadId}}</span> End
<span>{{route}}</span>
</section>
</iron-pages>
</more-route-selector>
The problem is that params is not set, so I cannot reference the threadId param in the path.
The routing it working which means for /inbox/testid is routed to section with route="viewemail", but params is not set.
selectedParams should be written as selected-params. From 1.0 docs:
Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.
So your more-route-selector should be declared as follows:
<more-route-selector selected-params="{{params}}" on-click="bodyClick">
<more-route name="viewemail" path="/:threadId">
above in "routes.html" binds name to the threadId you want a ref to ....
When you use those in template, get a context...
<more-route context name="viewemail" params="{{params}}"></more-route>
... so you can make use of those properties within the Polymer class...
ready: function() {
if (typeof this.params.viewemail != 'undefined'){
this._mvar = this.params.viewemail;
this.$.get_divID = _mvar;
if(MoreRouting.getRoute('viewemail').active){...}
}
},
As you already pointed out in this Github issue, the behavior is a bug of the Polymer 1.0 migration of more-routing (call it missing feature, as there is simply no instruction that would set the selectedParams).
As long as no fix exists, you have two options to circumvent the problem manually without modifying the project source code:
1. Workaround: Listen on on-more-route-change on the more-route-selector element.
The current routing params can be accessed as event.detail.newRoute.params from the event handler (caution: that object is not serializable due to non-enumerable JS getters). Manually hand over these params to your elements.
2. Good solution: Use context-aware routes.
selectedParams are not set on the more-route-selector, but well on routes. Include a context route to your pages and bind {{params}} on them.
Therefore, you may create a named route in your router file as:
<more-route path='/path/:param' name='path-route'/>
Reference this route by name from within your page element (or state the path directly):
<more-route context name='path-route' params='{{params}}'/>
Place the page element in more-router-selector as before. Parameters are bound to {{params}}.
The pattern is explained on the project page and in use in the demo app.
I am creating a line chart in one view(myChartView) and saving it as _ChartFiles/chart01.jpg.
var filePathName = "_ChartFiles/chart01.jpg";
Which is saving at /views/myChartView/_ChartFiles/chart01.jpg . Now in the very next line making a reference it as
<img src="#filePathName" />
but this is not displaying the image. what would be correct way to refer it?
If you want some static files to be accessed directly by the client, you cannot store them in the ~/Views folder because by default (for security reasons) the server would not serve content from this folder.
See ~/Views/Web.Config:
<handlers>
<remove name="BlockViewHandler"/>
<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>
Try to save the files in other directory like ~/Static.
You should save it in another folder than "Views" because in MVC this is a folder conventionned for HTML view and no other content, try to save it in "fonts" or whatever else,
and it would be :
<img src="fonts/yourimage.jpg" />
Try giving the image path as
filePathName = "../views/myChartView/_ChartFiles/chart01.jpg";
or
filePathName = "~/views/myChartView/_ChartFiles/chart01.jpg";
//try this one
filePathName = "myChartView/_ChartFiles/chart01.jpg";
<img src="#filePathName" />
How can I read the contents of a file using
<link href='path/to/file'/>
I understand that if one adds the attribute type="text/css" then they can be read using document.styleSheets but I have a hard time figuring out how to get the content of that element though.
I understand that lesscss.js lib uses the without an ajax get call.
From: http://lesscss.org/#using-less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
I need to include some templates into the page, and the sooner they are loaded the better, ( vs doing it after jquery and js has loaded)
Thanks!
I understand what you mean with before jquery. But what do you mean with "before js".
When you load less.js (which does NOT depend on jQuery) the browser runs less.js before jquery has been initialized. Notice that less.js requires JavaScript.
You can read the content of such a file leveraging a XMLHttpRequest. A basis example which shows you how to do this can be found at: How to show the compiled css from a .less file in the browser?
Regarding less.js, you can find the source of that file at: https://github.com/less/less.js/blob/master/dist/less-1.7.4.js
I understand that if one adds the attribute type="text/css" then they can be read using document.styleSheets but I have a hard time figuring out how to get the content of that element though.
Globally less.js uses two steps to do that:
first it will built a list of paths as follows:
//
// Get all <link> tags with the 'rel' attribute set to "stylesheet/less"
//
var links = document.getElementsByTagName('link');
less.sheets = [];
for (var i = 0; i < links.length; i++) {
if (links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/) &&
(links[i].type.match(typePattern)))) {
less.sheets.push(links[i]);
}
}
Then reads the content of these files by using a XMLHttpRequest too. See the doXHR function at line 7720 of less-1.7.4.js.
I am using 'Read the Docs' Sphinx theme for my documentation. In the original theme, given below
Read the Docs Sphinx Theme
the content or main layout width is designed to be mobile friendly. However, for my project I would like this to be a bit more wide. I do not know HTML and hence would appreciate if any one could give me some clues to increase the content (layout) width.
Another option is to create a stylesheet in source/_static with just the css you want, e.g.
.wy-nav-content {
max-width: none;
}
or
.wy-nav-content {
max-width: 1200px !important;
}
Make sure the directory is referenced in source/conf.py - I believe by default there's a line to do this, i.e.
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
Then create a custom layout in source/_templates/layout.html and do something like this to include your stylesheet
{% extends "!layout.html" %}
{% block extrahead %}
<link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
Assuming you called your stylesheet style.css
In case someone is searching for a simpler answer...
combining the ideas from
https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/
and the above suggestions, I found the easiest way of getting a custom window-width is the following:
In conf.py, add a function that adds a custom stylesheet:
def setup(app):
app.add_css_file('my_theme.css')
In conf.py, state/adjust:
html_static_path = ['_static']
Create a _static folder/directory if it doesn't exist.
Create a file called my_theme.css in the _static folder that contains the lines:
.wy-nav-content {
max-width: 1200px !important;
}
The HTML option added in Sphinx 1.8.0b1 (released Sep 2018) simplifies the process. The recommendation in Read The Docs Documentation is adding custom css to the theme via the html_css_files option in conf.py.
html_css_files = [
'custom.css',
]
Put the custom.css in the html static path folder (Default is _static folder).
Content of custom.css:
.wy-nav-content {
max-width: 75% !important;
}
First of all I must say, that during my sphinx quickstart I chose the option of separate folder for my sources and for my build.
It's a 3 steps process:
1. Create a document for your styles:
Where?
In the same directory where my conf.py lives, (in my case source), I created a folder for my custom static files (stylesheets, javascripts). I called it custom.
Inside it I created a subfolder for my stylesheets: source/custom/css.
In this subfolder I'm gonna create my custom styles: source/custom/css/my_theme.css.
2. Telling sphinx about it
Now we have to tell sphinx to spit this document inside build/_static/css, the same directory where is the stylesheet included in the Read The Documents theme. We do that adding the following line to conf.py:
html_static_path = ['custom'] # Directory for static files.
Done. Now, if we build, we will have the RTD styles (theme.css), and our custom my_theme.css in the same directory, build/_static/css.
3. Selecting our custom theme
Now we are gonna tell sphinx to use our custom my_theme.css, instead of the RTD one. We do that adding this line in conf.py:
html_style = 'css/my_theme.css' # Choosing my custom theme.
In our custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
And we are ready to start overwriting styles.
UPDATE: THERE IS AN EVEN SIMPLER WAY.
1. Put your customizations inside source/_static/css/my_theme.css.
In your custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
This way, you don't have to worry about messing up the default styles, if your custom stylesheet doesn't work, delete and start again.
2. Add the following line in conf.py:
html_style = 'css/my_theme.css'
The solutions here are somewhat hackish. If you want to include the style, and have a css override and have it work on RTD you will want something like this.
on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
if not on_rtd: # only import and set the theme if we're building docs locally
import sphinx_rtd_theme
html_theme = 'sphinx_rtd_theme'
html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
html_style = 'css/custom.css'
else:
html_context = {
'css_files': [
'https://media.readthedocs.org/css/sphinx_rtd_theme.css',
'https://media.readthedocs.org/css/readthedocs-doc-embed.css',
'_static/css/custom.css',
],
}
I have tested this myself and it appears to work locally and on RTD. Largely plagiarized from https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/
source\conf.py
html_theme = 'sphinx_rtd_theme'
html_style = 'css/my_theme.css'
source\_static\css\my_theme.css
#import url("theme.css");
.wy-nav-content {
max-width: 90%;
}
That will be 90% width of your monitor.
I found myself repeating this customization on multiple projects I've worked on (based on the great answers here, of course 😃 ).
So I made an extension just for that, the usage is as follows:
pip install sphinx-rtd-size
And in the conf.py:
extensions = [
...
'sphinx_rtd_size',
]
sphinx_rtd_size_width = "90%"
Hoping this might simplify things for future users...
You can checkout the pypi page and the github repository.
For 'classic' Theme, The solution is as simple and as clean as :
# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}
Adapt the percentage to your taste.
Reference from sphinx: body_max_width (int or str): Maximal width of the document body. This can be an int, which is interpreted as pixels or a valid CSS dimension string such as ‘70em’ or ‘50%’. Use ‘none’ if you don’t want a width limit. Defaults may depend on the theme (often 800px).
To make the ReadTheDocs theme use the entire width of your screen you can modify the theme.css file, removing the max-width: 800px; property from the wy-nav-content class definition, like so:
.wy-nav-content {
padding: 1.618em 3.236em;
height: 100%;
/* max-width: 800px; */
margin: auto;
}
Some Notes
Source of theme.css is here:
https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css
On your filesystem it will be in (assuming you've run:pip install sphinx_rtd_theme):
lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css
To find the absolute path of theme.css on Linux/Mac you can run this on the command line (assuming you have set your $PYTHONPATH environment variable):
for p in `echo $PYTHONPATH | tr ":" "\n"`; do
find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
done
The theme.css file will be minified so you can use a tool like http://unminify.com to make it easier to read.
The results:
Before:
After:
I would modify this in the css. You should search for the file theme.css (it is in the read-the-doc sources at "sphinx_rtd_theme/static/css/theme.css").
Make a copy of that file and put it in your sphinx _static dir. In that css file you can make all the layout changes that you need. (You might have to read a bit on css files if you have never worked with that.)
Hope this helps.