When I try to style the Link component, it does not work:
Link {
padding: 0 30px;
}
But it does work when I use inline styling
<Link style={{padding: '0 30px'}} to="/invoices">Invoices</Link>
I use import './App.css' and styling normal elements like div does work.
Link is a react component, which by default isn't directly read/defined in native css styling.
Saying that means only one thing, Links are just anchor tags, and thus you can style/modify them in the css styling sheet using a.
To style all links available on the page (general styling) just add a { general styles..} on top of your sheet.
And then to style each one on their own, make sure its wrapped in a div with a className, and in your styles do it this way:
.divClassNameYouChose a { custom styles... }
Provide className as a prop to Link
.link-styles {
padding: 0 30px;
}
<Link className={"link-styles"} to="/invoices">
Invoices
</Link>
There are many ways you can do this:
Using id in the component
<Link id="link_Styles" to="/invoices">
Invoices
</Link>
And css is like
#link_Styles {
padding: 0 30px;
}
Using bootstrap inbuilt classes like
<Link className="px-4" to="/invoices"> //px-4 means 24px (1.5rem)
Invoices
</Link>
Using tailwindCSS classes
<Link className="px-7" to="/invoices"> //px-7 means 28px (1.75rem)
Invoices
</Link>
But for approach 2 & 3, you have to embed their CDN links respectively.
Using className like done by #Amila in first answer
The Bootstrap stylesheet has:
pre code {
color: inherit;
}
If my page now has an explicit pre code { color: red; }, the Bootstrap stylesheet style still takes precedence. Why? [Edit: can ignore this question as it was due to the wrong order of definition.]
How do I make color for pre code to take the color that is computed for code, without hardcoding the color value?
Bootstrap has set the color for code to #383e3c based on the selected theme. I don't know the reason why it has set a different color for pre code. I would like my pre code to have the same color as code.
Please load your style after bootstrap and also use parent class or element to override bootstrap CSS.
you can use your parent class in place of body.
body pre code { color: red; }
Append !important to your properties to get higher priority.
pre code {
color: #383e3c !important;
}
Or you can give an id to code element and resetting the override that pre causes by re-writting the attributes:
pre code#id {
color: #e83e8c;
}
And use the style sheets like this:
<link href="/bootstrap.css" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
What am I doing wrong with applying CSS to my table (Webpart: WebPartWPQ6) in SharePoint?
I have this script editor CSS (note the Font-size is just trying to see in an instant if what I apply works or not):
<style type="text/css">
#WebPartTitleWPQ6 .ms-viewheadertr
{
font-size: 100px !important;
}
</style>
I've tried replacing ms-viewheartr with diidSort16RequestID, ms-headerSortTitleLink, ms-viewheadertr .ms-vhltr, ms-vhltrm, ms-vh-div. But none of them seem to be working.
I'm getting the webpart name from inspecting the element:
<div id="MSOZoneCell_WebPartWPQ6" class="ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div webpartid="69f4fe83-8a06-4eca-bbb2-fb143cdc2859" haspers="false" id="WebPartWPQ6"
and I'm trying to get the name of the header from:
There isn't any element with an id of WebPartTitleWPQ6 in the HTML you posted. The closest thing is the element with the id WebPartWPQ6.
Try using a CSS selector of #WebPartWPQ6 instead of #WebPartTitleWPQ6.
writing an app for opensocial brings up the following problem:
I create a dialog box (css is tundra)
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px"
});
How can I change the properties "overflow" and /or "height" of the
"dijitDialogPaneContent"
contained in myDialog after creating this object?
Thank you
Subin
There are several approaches you can use, depending on how generic the solution should be.
Apply to all dialogs
If you want to apply the same style to all dialogs, you can "extend" a theme, for example, normally you would use the tundra theme like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
</head>
<body class="tundra">
<!-- Your content comes here -->
</body>
</html>
If you're going to apply it to all dialogs, you could do the following:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
<link rel="stylesheet" href="custom/style.css" />
</head>
<body class="tundra custom">
<!-- Your content comes here -->
</body>
</html>
And then write a custom stylesheet like this:
.custom .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
This will guarantee that it will override the general Tundra style for all dialogs. If you don't use a class like .custom, you cannot override the Tundra stylesheet because .tundra .dijitDialogPaneContent will be more specific (which means it has a higher priority).
Of course, you could write .tundra .dijitDialogPaneContent in your custom stylesheet as well.
Apply to a single dialog through stylesheet
If you want to apply it to a single dialog, then give an ID to the dialog, for example:
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px",
id: "myDialogId"
});
Then you could write a stylesheet like this:
#myDialogId .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
Apply to a single dialog (using JavaScript)
Seperate stylesheets may improve readability because you seperate logic from design. If you don't need the seperate stylesheet you could do something like this:
require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
// Your code
query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});
This will use the domNode property of the dialog to query the content pane and then apply the style.
Apply to multiple dialogs
If you want to apply the same style to multiple dialogs (but not all dialogs), then your best approach would be to create a custom dialog by extending the default dialog. Considering the length of my answer atm I'm not going to explain that into detail, but I recommend reading guides about writing your own widget.
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});