You can see it here.
The site looks fine when I remove Blueprint. I've tried adding Bootstrap and the same issue occurs.
I've been following this (excellent) tutorial.
According to chrome, this is the code causing this:
http://blazing-fog-1717.herokuapp.com/assets/application-fcc74be8bd91511db934f033390efd28.css
a:link::after, a:visited::after {
content: " (" attr(href) ")";
[...]
I have no idea why blueprint might be doing this, but you can just edit blueprint.css and remove the following rule:
content: " (" attr(href) ")";
Setting the media attribute of your links to print (media="print") can fix the problem as well.
If you don't like either of these solution, you should be able to over-write the css by adding the following CSS code AFTER the inclusion blueprint:
a:link:after, a:visited:after {
font-size:90%;
content: none;
}
I'm not sure about that last part, but you could try it out.
I had the same problem, try to add the following line to config/environments/production.rb
config.assets.precompile += [ "blueprint/*.css" ]
This step is described in section 5.4.3 Deploying to production with Blueprint ;)
Related
I found the document in materialize UI framework with select2 .
when I did not add $("select").selet2(); everything is ok . the page like this:
when I add .select2() function, the page not work well :
the line under select disappeared .
I push my code into github , and here is the repository:
https://github.com/SeasonXin/material-select2-issue.git
hope somebody's support, very thanks ;
Adding the class 'browser-default' to the select element will fix that
I had the same problem, but I found this
https://github.com/nikitasnv/materialize-select2
In the case of labels, enter these styles
style = "position: absolute; top: -14px; font-size: 0.8rem"
Spelling Error.
Use
select2()
^
instead of
selet2()
I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.
I am having hands on Rails 3.1 rc1. There is a weird issue keeps bothering me. Whenever I use link_to function, the link href also appearing.
For example:
<%= link_to 'Say Hello' , '/say/hello' %>
produces the below output in the browser
Say Hello (`/say/hello`)
I don't know why the link href also displaying this way.
I tried the below as well:
< a href="/say/hello"> Say Hello < /a>
Still the same output. It seems like the issue is not related to Rails ???
Please help. You advise is valuable.
Are you using blueprint? I was seeing the same issue, and it was due to blueprint's print.css:
a:link:after, a:visited:after {
content: " (" attr(href) ")";
font-size: 90%;
}
This may not be a big problem but I find this one as irritating. I wasn't able to figure it out. I have anchors in my site using link_to and even normal tags. Example:
Demo
will show up as Demo(#)
Authenticate would show up as Authenticate (/authenticate)
But if I view the source from the browser, I can't see a problem.
Does anybody know about this problem? I am using Rails 3 and a MAC.
Thank you,
Junrey
I finally found the answer to my problem and it has something to do with the Blueprint CSS Framework that I am using.
I need to remove this content: " (" attr(href) ") "; from print.css which shows something like this:
a:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
Found the solution from Ruby-Forum (http://www.ruby-forum.com/topic/206645#935056).
I've been documenting a software package using Sphinx and reStructuredText.
Within my documents, there are some long code snippets. I want to be able to have them hidden as default, with a little "Show/Hide" button that would expand them (Example).
Is there a standard way to do that?
You don't need a custom theme. Use the built-in directive container that allows you to add custom css-classes to blocks and override the existsting theme to add some javascript to add the show/hide-functionality.
This is _templates/page.html:
{% extends "!page.html" %}
{% block footer %}
<script type="text/javascript">
$(document).ready(function() {
$(".toggle > *").hide();
$(".toggle .header").show();
$(".toggle .header").click(function() {
$(this).parent().children().not(".header").toggle(400);
$(this).parent().children(".header").toggleClass("open");
})
});
</script>
{% endblock %}
This is _static/custom.css:
.toggle .header {
display: block;
clear: both;
}
.toggle .header:after {
content: " ▶";
}
.toggle .header.open:after {
content: " ▼";
}
This is added to conf.py:
def setup(app):
app.add_css_file('custom.css')
Now you can show/hide a block of code.
.. container:: toggle
.. container:: header
**Show/Hide Code**
.. code-block:: xml
:linenos:
from plone import api
...
I use something very similar for exercises here: https://training.plone.org/5/mastering-plone/about_mastering.html#exercises
You can use the built-in HTML collapsible details tag by wrapping the code in two raw HTML directives
.. raw:: html
<details>
<summary><a>big code</a></summary>
.. code-block:: python
lots_of_code = "this text block"
.. raw:: html
</details>
Produces:
<details>
<summary><a>big code</a></summary>
<pre>lots_of_code = "this text block"</pre>
</details>
I think the easiest way to do this would be to create a custom Sphinx theme in which you tell certain html elements to have this functionality. A little JQuery would go a long way here.
If, however you want to be able to specify this in your reStructuredText markup, you would need to either
get such a thing included in Sphinx itself or
implement it in a Sphinx/docutils extension...and then create a Sphinx theme which knew about this functionality.
This would be a bit more work, but would give you more flexibility.
There is a very simplistic extension providing exactly that feature: https://github.com/scopatz/hiddencode
It works rather well for me.
The cloud sphinx theme has custom directive html-toggle that provides toggleable sections. To quote from their web page:
You can mark sections with .. rst-class:: html-toggle, which will make the section default to being collapsed under html, with a “show section” toggle link to the right of the title.
Here is a link to their test demonstration page.
sphinx-togglebutton
Looks like a new sphinx extension has been made to do just this since this question has been answered.
Run: pip install sphinx-togglebutton
Add to conf.py
extensions = [
...
'sphinx_togglebutton'
...
]
In rst source file:
.. admonition:: Show/Hide
:class: dropdown
hidden message
since none of the above methods seem to work for me, here's how I solved it in the end:
create a file substitutions.rst in your source-directory with the following content:
.. |toggleStart| raw:: html
<details>
<summary><a> the title of the collapse-block </a></summary>
.. |toggleEnd| raw:: html
</details>
<br/>
add the following line at the beginning of every file you want to use add collapsible blocks
..include:: substitutions.rst
now, to make a part of the code collapsible simply use:
|toggleStart|
the text you want to collapse
..code-block:: python
x=1
|toggleEnd|
Another option is the dropdown directive in the sphinx-design extension. From the docs:
Install sphinx-design
pip install sphinx-design
Add the extension to conf.py in the extensions list
extensions = ["sphinx_design"]
Use the dropdown directive in your rst file:
.. dropdown::
Dropdown content