I have a custom page in Admin Bro with the name of gallery. Now in their I want to import some css that I wrote. I tried this:
import './gallery.css';
This does not seem to work for some reason. Is their any way I can add my custom css into my react component in AdminBro page.
Heres how I did it, note that I was use Express.js:
I was trying to customize the look of a table in my AdminBro pages, saw that there was already a admin-bro_TableBody css class and could override it based on below github issues:
https://github.com/SoftwareBrothers/admin-bro/issues/361
So I created a css file and make it publically accessible like so: https://stackoverflow.com/a/58046155/4297337
and then in my adminBro declaration, I did this:
const adminBro = new AdminBro({
assets: {
styles: ['/css/admin.css'],
},
...
}
The css file I created was called admin.css, the adminBro pages will automatically grab it, you can name the css file whatever you want as long as it is in the public/css/... folder in your root directory of your project
What my CSS file looked like:
.admin-bro_TableBody {
max-width: max-content;
word-break: break-word;
}
Related
In Vaadin 23, how to increase or decrease the width of the drawer area of a Vaadin App Layout component?
In your global style sheet, for example frontend/themes/mytheme/styles.css (this assumes you have a custom theme annotation defined #Theme("mytheme")), add the following:
vaadin-app-layout::part(drawer) {
width: 300px;
}
This is slightly simpler than the solution that Tarek suggested (which also works just fine).
You will need to style the internals of the app-layout component.
If the project is using the custom-theme mechanism, then create a file called vaadin-app-layout.css under the directory frontend/themes/<Your-Theme-Name>/components. In that file, you can, say, increase the width of the AppLayout drawer like so:
:host {
--vaadin-app-layout-drawer-offset-size: 400px;
}
[part="drawer"] {
width: var(--vaadin-app-layout-drawer-offset-size);
}
NOTE: if you are not using the custom-theme mechanism, then you will need to add the aforementioned styling in a CSS file that is imported using the #CssImport annotation. For example, you can create a file called vaadin-app-layout.css under the project frontend directory, and then import it from java using the following annotation:
#CssImport(value = "vaadin-app-layout.css", themeFor = "vaadin-app-layout")
I have a simple front-end React app created using npx create-react-app. The app is using react-router-dom routes. When I directly change the URI in the browser from say, localhost:3000/ to localhost:3000/search it will navigate to the <Route>but with no CSS rendered; just HTML from the component.
How can I make sure CSS is rendered in the new route when directly navigating in the browser? My future goal is to be able to copy and paste a route in a new tab and navigate to the correct page and display results from an API.
Css style sheets will need to be imported either at the root level or within the file itself.
style sheets need to be imported when used and then the corresponding classname will need to be used within the component or tag.
Another useful way to set react css without style sheets is by using in line styles
e.g
<div style ={{float: "right", textAlign : "center"}}> </div>
EDIT
A really easy way to get styles going within a react project is install bootstrap.
then buttons and stuff can be assigned classNames such as
<div className = "jumbotron"></>
this will leave a grey box around the items.
<div className = "btn btn-primary"></>
this will give you a blue styled button.
Any more information or help within your application let me know and provide some code snippets.
You can use styled-components. styled-components are widely used in ReactJs and React Native and it's a perfect choice.
styled-component : https://www.npmjs.com/package/styled-components
I realized that react apps created using npx create-react-app allow you to import a css module for components.
Given the component, Button.jsx, you can simply create a css module with the convention, [module-name].module.css. For the case of Button.jsx, create a file named Button.module.css, import "styles" from the module. Styles will be an object containing all the CSS styles.
I if I had a folder named "components" with all my components, I could make a folder within "components", say called "compStyles", and create all the [module-name].module.css files in there.
Button.module.css:
/* class names must be camelCased */
.myButton {
margin: 0 auto;
}
span {
fontSize: 20px;
}
If I had the above mentioned file structure, I could import and use like so:
import React from 'react';
import styles from './styles/Button.module.css';
const Button = () => {
return (
<div className={styles.myButton}>
<button><span>Some Button</span></button>
</div>
)
}
export default Button;
Styles for the span will be automatically applied, and any other class will be referenced by styles.className. Create one file for every component, and each component's CSS will take care of itself and not break like it would if it was in the public folder.
I installed gatsby cli and created a basic node / gatsby.js project.
The tutorial says "Gatsby works out of the box with CSS Modules."
I also wanted to use custom css properties as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
(1) I created src/layouts/variables.css and put in css with custom properties, like:
:root {
--brand-color: #ff3333;
}
(2) Then in src/layouts/index.css I added #import './variables.css' at the very top of the css file.
(3) because of the #import in the above step, I installed and added postcss-import as the first plugin, in my gatsby-config.js file. Not sure if this is correct, as it isn't named 'gatsby-plugin-*' like the other plugins.
(4) in my footer component (src/components/Footer) I have both index.js and index.module.css. In the index.module.css I put:
.footer {
color: var(--brand-color);
}
... thinking that --brand-color will cascade via imports through src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> my footer component.
But when I run gatsby-develop, it says:
warning in ./src/components/Footer/index.module.css
postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.
How can I fix this error? It does not allow the website to display properly.
OK I figured out what I was doing wrong:
Every (.module).css file that needs to use the "global" variables.css file must import it explicitly.
Adding #import '../../layouts/variables.css'; to my component's css file fixed this.
I created a simple React app using https://github.com/facebookincubator/create-react-app.
I am trying to specify a configurable URL to a component's CSS like this:
.Cell {
background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}
And here's the component:
import React from 'react';
import './Cell.css'
class Cell extends React.Component {
render() {
return (
<div className="Cell">
{this.props.name}
</div>
);
}
}
But it doesn't look like the process variable trickles down to the imported CSS. How would I go about doing this?
If you want to use js variables in CSS, try React inline-style instead of plain css file.
https://facebook.github.io/react/tips/inline-styles.html
If you want to separate CSS and JS, you might need a CSS preprocessor to manage your global variables.
I came across one such scenario, The method I used is instead of adding it as background in CSS, make an img element and assign the path as src in component itself. I don't think there is any other way of doing that.
Commenting on this as I've recently had a similar issue. This should work to send an image file as a CSS variable in a build.
use the style prop to invoke a CSS style
Use template literal around the url() value
use the Javascript require() to refer to the file in the final build pack. Using a relative url requires that you call the image relative to where the the page will be called instead of being relative to the component JS file.
In the React component, use the inline style prop to set the CSS variable:
<div
style={{"--img":`url( ${require("../../images/coding.jpg")})`}}>
</div>
in the CSS file:
background-image: var(--img);
I want to extend the theme used by Sphinx and ReadTheDocs with my own custom styles.
What is the best way I can do this so that my changes will stick?
Edit: as of 2021 the following answer is outdated, please use html_css_files = [] in your conf.py instead of using the application API after version 1.8 (current Sphinx version at time of writing is 4.1.1). The add_stylesheet option below has been renamed add_css_file in version 1.8, and seems more intended for Sphinx extension developers.
Assumptions
Your RTD doc set has something like the following structure:
(root path)
(some other stuff not germane to this discussion)
_static/
_templates/
conf.py
You're also building locally using sphinx-build or sphinx-autobuild using the default theme, but your deployed server might use the sphinx-rtd-theme instead.
Use Case: Hatnotes
For this illustration, I'm going to show how to create custom styling for "hatnotes", a concept which is prevalent in MediaWiki docs and which corresponds roughly to the admonition construct in RST. You can apply what's shown here to create any custom CSS and include it in your doc set.
Step 1: Create Custom CSS
The custom CSS file should go somewhere under the _static/ directory, as that's where the build process and scripts will find it. I would encourage a css/ subdirectory, since you might have other customizations to add, like JavaScript files.
Create your custom CSS file and put it in this directory. Write your style specifications as an overlay to whatever might already exist in the theme you'll be using in the build. Also don't assume anything about whether your style will override an existing style in the theme, as you can't guarantee when your styles will be added in relation to the default ones.
Here's my custom CSS for hatnotes. I saved this at _static/css/hatnotes.css.
.hatnote
{
border-color: #c8c8c8 ;
border-style: solid ;
border-width: 1px ;
font-size: x-small ;
font-style: italic ;
margin-left: auto ;
margin-right: auto ;
padding: 3px 2em ;
}
.hatnote-gray { background-color: #e8e8e8 ; color: #000000 ; }
.hatnote-yellow { background-color: #ffffe8 ; color: #000000 ; }
.hatnote-red { background-color: #ffe8e8 ; color: #000000 ; }
.hatnote-icon { height: 16px ; width: 16px ; }
Step 2: Add Styles to Templates
For the default theme, it is sufficient to create a template that overrides the default layout.html to add your custom CSS to the layout. Use of templates is well documented at sphinxdoc.org. In your override template, simply set the css-files variable (an array) with an appended list of your custom CSS files.
Here is my template which adds the hatnotes CSS. I saved this as _templates/layout.html.
{% extends "!layout.html" %}
{% set css_files = css_files + [ "_static/css/hatnotes.css" ] %}
That's all you need to do for the default theme. For the Sphinx/RTD theme, there's an additional step, where you…
Step 3: Add Stylesheets to the Theme
For the Sphinx/RTD theme, your template will be ignored. Instead of using the template mechanism, you have to add a function to your conf.py file which adds the CSS file to the app's theme. Somewhere near where your conf file sets the html_theme attribute, add something like the following:
def setup(app):
app.add_stylesheet( "css/hatnotes.css" )
Note that, this time, there's no _static/ at the front of the path; the add_stylesheet() function assumes that part of the path.
Finishing the Use Case
Now that you've set up your custom styles for both the default theme and the Sphinx/RTD theme, you can actually use them in your doc.
Following the usual paradigm of defining stock hatnotes as "templates" in MediaWiki (sorry, not the same as templates in Sphinx and RTD), I set up an includes/ directory where all my hatnotes would be stored.
Here's how to construct a hatnote with the custom style information. This file is includes/hatnotes/stub-article.rst.
.. container:: hatnote hatnote-gray
|stub| This article is a stub. Please improve the docs by expanding it.
.. |stub| image:: /images/icons/stub.png
:class: hatnote-icon
Here we set up our "stub" hatnote to have the default hatnote styling, the gray background, and use a "stub" icon as the inline image, with the hatnote-icon style applied to that image.
Now we can use the file as an included resource in a document.
Foo Article
===========
.. include:: /includes/hatnotes/stub-article.rst
Blah blah I haven't written this article yet.
Whether you're using the local default theme or the Sphinx/RTD theme, the hatnote will be rendered with the styles you added by setting up the _templates/layout.html template and the conf.py script to both include the custom CSS file you put under the _static/ directory.
End State
Your doc repository now has this stuff in it:
(root path)
_static/
css/
(custom CSS files…)
_templates/
layout.html — (adds your custom CSS to the default layout)
conf.py — (with new function to add custom CSS to app's theme)
I don't know which is most "official" but if you go to the "customisation" page of the Furo theme (developed by one of the Sphinx developers) and then scroll to "Custom CSS Files" it links to a guide to "injecting code" which in turn simply links out to ReadTheDocs's page on Adding Custom CSS which does not suggest running Python code (as the answers above do) but setting a conf variable, which seems better.
html_css_files = [
'css/custom.css',
]
Adding to the accepted answer: There are various other approaches for this, e.g. adding to footer or adding to extrahead. The latter is recommended by the RTD docs.
Also I found the setup() function was never necessary, as long as you have html_static_path = ['_static'] in your conf.py.
Note that normally, you should replace the absolute path [ "_static/css/hatnotes.css" ] with [ pathto("_static/css/hatnotes.css", True) ] or the style sheet will not be loaded for RST files inside subdirectories, but it is evidently unnecessary for the accepted answer. Not sure why.