Cross-referencing in sphinx is done using ref , like:
.. _my-reference-label:
Section to cross-reference
--------------------------
This is the text of the section.
It refers to the section itself, see :ref:`my-reference-label`.
When compiled to HTML, above would introduce a hyperlink after "see", but would also embed it within the <em> tag, making internal references look different from external hyperlinks.
Is there any way to instruct sphinx not to emphasize internal references, that is, not to embed them within the <em> tag?
You can add a line to your CSS file:
a.internal {font-style: normal}
In order for Sphinx to use a custom CSS file you need to edit conf.py:
html_style = 'my_style.css'
Then put the file in the _static directory, or whichever directory you have declared with html_static_path.
Then my_style.css might look like:
#import url("default.css"); /* This should be the file used by your theme */
/* Internal links */
a.internal {font-style: normal}
This will not get rid of the surrounding <em> tag but should work to style your docs correctly.
You could write your own theme and template to do this.
Related
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
I want to add custom CSS in my Markdown (.md) file. I have looked here : http://www.mkdocs.org/ and found the extra_css, but I wish to have the CSS in the same file.
I have tried adding style tags at the top of the page like so :
<style> body { background:red } </style>
But it seems to remove all the other styling on the page.
Question is, how do I add my own CSS to my markdown file ?
Ideally the purpose of markdown file is plain text formatting syntax. Adding custom styles is actually counter productive of the format hence there is a good reason why styles were left alone for .md files. Having said that, there are workarounds for everything. Read on if your still interested.
I wouldn't personally recommend it but if you need to add custom styles then you could try the following:
Increase the specificity of your styles for easier overriding.
You could use Marked, a previewer for md files which gives you the ability to add custom styles.
Use inline styles, inline styles have more priority than internal styles(the one you mentioned)
eg: <body style="background: red;">...</body>
Using R Markdown, you can add your own CSS to an HTML document using the css option:
Reference: http://rmarkdown.rstudio.com/html_document_format.html#custom_css
---
title: "Habits"
output:
html_document:
css: styles.css
---
Hope this helped
I'm trying to set up the styling of my Jekyll blog. I've noticed that the inline code highlighting that uses the two backticks `.
Here you can see the inline highlighting style is very different to the code block styling. The code block styling is done in the _highlighter.scss file. Any ideas where I can edit the style of the inline code?
The style location may vary depending on several factors:
the theme you are using and if that theme is customized
the syntax highlighter engine
In a standard Jekyll instance, inline code blocks will start like <code class="highlighter-rouge>, that is, the style would be a mix of the code tag and the above class.
The easiest way to find out where to change your jekyll instance styling is to use the browser inspect code mode, that will show you which file and style to change.
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.