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)
Related
edit:
there is below code bottom of style.css:
/*# sourceMappingURL=style.css.map */
also there is a style.css map file.I added its code:
https://www.codepile.net/pile/azGno8Qb
I dont know anything about sass.I have a html file which made sass.I want to change its styles.However when I click the element on chrome, below link seems instead of css file on developer window:
/sass/project-sass/_header.scss : HTTP status code: 404
So, which css file is refered by _header.scss?
I need to change the element.
Also I included all css files but when I include a code snippet from this html file to wordpress, necessary properties doesnt load also there is no _header.scss on chrome developer window.
How can I include the sass stuff on wordpress?
It's difficult to answer your question because you don't provide the architecture of your document and code. However :
_header.scss seems to refer to a "sub" style and it could be look like in the main style :
#import url("_header.scss");
But you can't put a scss file in HTML. You must compile it before and it will result a CSS file for example :
sass _header.scss header.css
and in your HTML :
<link rel="stylesheet" href="path/to/your/header.css">
I'm currently trying to make some CSS changes to a WordPress child theme.
When I use the chrome developer tool, it tells me which line in the style.css file the elements refer to. For example, style.css:17.
However, on certain CSS elements, instead of referring to style.css it refers to (index). For example, (index):54. What does (index) refer to and where would I normally find it to make the changes?
Thanks
Wordpress theme options usually appends a stylesheet to the head of the html document.
<head>
<!-- added by Wordpress, usually found in functions.php -->
<style>
...theme specific styles...
</style>
</head>
I took my internal CSS and did a copy paste to an external CSS document and some of the formatting has gone away. I did not change anything from the internal to external and I know it is working because some of the formatting is working. Has anyone ran across this before and might have a answer to why this might happen?
Inline style override internal styles, internal styles override external styles. Most probably your styles are being overwritten...
I see the problem now, from the comment, Remove <style> and </style> from external css.
<style> attribute tells the browser that what follows next is style, but when using external stylesheets you do not need to put the <style> tag as you already tell the browser what it is when you import the file by using type and rel attributes.
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.
<telerik:RadEditor ToolbarMode="Default"
ID="editor1" runat="server" EnableEmbeddedBaseStylesheet="true">
</telerik:RadEditor>
The editor's using Default skin. When I made changes to Editor.Default.CSS file they didn't reflect on my page, but when I type the following I can see the changes:
<link href="Skins/Default/Editor.Default.css" rel="stylesheet" type="text/css" />
<link href="Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadEditor ToolbarMode="Default"
ID="editor1" Skin="Default" runat="server" EnableEmbeddedSkins="true">
</telerik:RadEditor>
Do I have to create a custom Skin file for the changes to reflect? I don't want to because the editor has been used in many files and now linking new custom CSS file in each and every .aspx file will be such a pain. I just want this to be added in the Skin:
body
{
background-image:none;
background-color:White;
}
What this does is that it makes the background color of the content area white. Earlier the content area of the Editor was inheriting background-image property of the Master Page's body tag. Another funny issue is that the Font styles too are inheriting Master Page's properties only, like Heading 2 in the Editor's drop down list has got a background color when I want it to be simple.
So is making custom skin CSS file the only solution? How do I get the changes to reflect through the Default CSS file only? I don't want to create a custom class. Why didn't the changes reflect?
If you do not want the editor to inherit the CSS from the main page, you should tell it which CSS classes are to be loaded in the content area (iframe). See the external CSS help article and probably the CSS dropdown article as well. Finally, there is a separate page for content area CSS troubleshooting - content area appearance problems
Make sure your body background-color is not overwritten in the Window.Default.css. Always the last entry in a CSS file or a subsequent file takes precedence over the one before. Try going for background-color:white !important;.
Adding !important after any CSS rule will make it just that and override any precedence.
As for why the changes didn't reflect: Check which styles the Telerik control is actually using. Check the Source of the page and check the references CSS files whether they have your added properties - maybe there are some other CSS files creeping around in some cache?
Your tool of choice to check the styles for a specific element might be the Internet Explorer (if you're using IE) Developer Toolbar - just hit F12 and select the Telerik Editor with the little arrow and you will see all associated styles and where they came from.
One solution that worked for me was to set these properties on the editor:
ContentAreaMode="Div"
CssClass="wysiwygeditor"
then in CSS you can override what you need
.wysiwygeditor { background-color: white; background-image: none; }
It would be nice if Telerik would expose a property to set a class on the body element when using ContentAreaMode=Iframe instead of Div, both CKeditor and TinyMCE support a property like that and it makes it possible to easily remove the unwanted body styles while still supporting most of the page CSS in the editor.
You can edit an xml config file (in my case it is named ConfigDefault.xml).
In the <configuration/> node you can add something like the following to load the css of your choice to apply to the content (html document) that is loaded within the iframe:
<configuration>
<property name="CssFiles">one.css,two.css</property>
...more items
</configuration>
So if you need one.css for your regular site css, then two.css can perform the override to remove the background image / change the background colour.