There is already a post dealing with this however, everything that was suggested has been tried and still nothing works this is what I have so far:
In the config.js file
CKEDITOR.editorConfig = function(config)
{
config.defaultLanguage = 'en';
config.language = 'en';
config.resize_dir = 'vertical';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6';
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/fileName.css';
config.stylesSet = [];
};
then in the css file mentioned above is some styling for the h1, h2, h3 etc..looks something like this:
h1 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #5B5B5B;
}
h2 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #FF4040;
}
h3 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #60bf00;
}
the issue is that this is not changing the h1, h2, h3 etc.. tags, any ideas on how I can get this to work would be greatly appreciated.
I have a wrapper function that I use to init the RTE. Try doing something along these lines, which is similar to what #MiniRagnarok posted.
I just ran a test and it changes the CSS in both the editor's format and the inside the editor's contents. Be aware that you would need to reference the stylesheet on the page that the content is being display on or you won't see the updated styles.
function rteInit(inputId, height) {
var editor = CKEDITOR.replace(inputId,
{
contentsCss: '/admin/css/ckeditor.css',
height: height,
toolbar: [ <!-- Toolbar options --> ]
});
}
Try forcing overriding with !important. Eg:
font-size: 36px !important;
You could always go to ckeditor/contents.css and make all of your changes in that file. Those changes will be reflected in the editor.
Adding your own file is done by setting the config.
config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 months ago.
const closeButton = document.getElementById('close-button');
// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
const newsBar = document.getElementById('news-bar');
// Set the display of the news bar to "none" to hide it
newsBar.style.display = 'none';
});
#news-bar {
background-color: rgb(255, 221, 0);
margin-top: -1em;
display: block;
}
.news-message {
display: inline-grid;
margin: auto;
margin-top: 1.3em;
margin-bottom: 0.3em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#close-button {
margin-left: 2em;
}
<div id="news-bar">
<p class="news-message"> Our Website is currently being developed. Please stay patient.</p>
<button class="news-message" id="close-button">X</button>
</div>
I tried to change the element CSS so it's hidden by default, but that makes no sense because I want it to be here when a user visits the website
Maybe your script is wrong linked or the document.getElementById() is not finding any element, please make a console.log of what the 2 document.getElementById() return. Also, the CSS can be blocking your style change, so I would recommend you to make two different ids. For example:
CSS FILE
#news-bar {
background-color: rgb(255, 221, 0);
margin-top: -1em;
display: block;
}
#news-bar-hidden {
display:none;
}
JS FILE
let closeButton = document.getElementById('close-button');
// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
let newsBar = document.getElementById('news-bar');
// Set the id of newsBar to "news-bar-hidden"
newsBar.removeAttribute("id")
newsBar.setAttribute("id","news-bar-hidden")
});
Try change all const to var, and see if it works.
check your html id name!
[![enter image description here][1]][1]
this error means it couldn't get the defined id
[1]: https://i.stack.imgur.com/gaE4Q.jpg
Your code is working fine.
Make sure you didn't forget to import the js file into the html, Ex:
<script src="src/index.js"></script>
I found what problem do you have, I was thinking that it was a problem with the JS file but it´s not, the problem is that you´re linking the js file in the head of the document when the elements doesn´t even exist (because HTML files create the elements reading from the top to the bottom of the file). You need to put the <script src="script.js"></script> at the end of the <body> tag.
I am generating links from a java script to created a breadcrumb for my sight. It works perfectly, but.... I want to put all the link in a line like this,
.a
{
display: inline;
float : left;
font: 18px Helvetica, Arial, Sans-Serif;
}
but I don't know where to put the css to make it pretty.
Here is the javascript that is inside the body of the html;
<SCRIPT LANGUAGE="JavaScript">
<!--
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" \>\> ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = path;
document.write(url);
//-->
</script>
Right now the links are one on top of each other with the >> at the left side of the page.
I want them to be inline horizontally with the >> in-between them.
Your css should be:
a
{
display: inline-block;
font: 18px Helvetica, Arial, Sans-Serif;
}
You are calling .a class instead of a
You don't need to use float: left for this case
I have a custom ReactJS component that I want to style in a certain way and provide as a plugin to many different web sites. But when web sites use global styles (Twitter bootstrap or another css framework) it adds and overrides styles of my component. For example:
global.css:
label {
color: red;
font-weight: bold;
}
component.js:
class HelloMessage extends React.Component {
render() {
let style = {
color: "green"
};
return (<label style={style}>Hello</label>);
}
}
result:
Above I didn't use "font-weight: bold" in my component's style but in result my component is using it.
I'd like to be able to encapsulate my custom components's styles in a way that makes them look the same across all the web sites.
The best approach in my view is to define some kind of reset class for your component and put in a set of css resets you can find out there
(e.g. http://meyerweb.com/eric/tools/css/reset/)
The definition in a sass file could look like this:
.your-component-reset {
div, span, object, iframe {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
// add some more reset styles
}
To avoid writing a lot when you don't want to use sass just use the universal selector *:
.your-component-reset * {
margin: 0;
padding: 0;
font-weight: normal;
// other reset styles ...
}
page: www.eveo.org
My page doesn't load, but it does output to console from the file which is supposed to fade my site in.
http://eveo.org/js/init.js line 37-43
$body = $('body');
$body.fadeIn(1000, function() {
$('.about p').fadeIn(500, function() {
$('.about footer').fadeIn(500);
});
});
However, it seems to put a few console.logs that I have further down in the file. When I view the url http://eveo.org/js/init.js after navigating to it from eveo.org, and hitting back, my website loads. If I just go straight to eveo.org it doesn't load and execute the above javascript.
Really at a loss, never had a problem like this.
You have display:none; on your body element.
style.css, line: 8
body {
font-family: "proxima-nova", 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 16px;
margin: 0;
text-align: center;
text-rendering: optimizeLegibility;
display: none;
}
I think you knew that, but try changing your jQuery call to fire when the document is loaded.
jQuery(document).ready(function() {
var $window = $(window),
$body = $('body');
$body.fadeIn(1000, function() {
$('.about p').fadeIn(500, function() {
$('.about footer').fadeIn(500);
});
});
... rest of code
});
If I have a style defined
.style1
{
width: 140px;
}
can I reference it from a second style?
.style2
{
ref: .style1;
}
Or is there a way via javascript/jQuery?
--- Edit
To clarify the problem, I am trying to apply whatever style is defined for a #x and #c to .x and .c without altering the CSS as the CSS is going to have updates that are out of my control.
I used width but really the style would be something more complex with font, border and other style elements being specified.
Specifying multiple class names does work when the style is being applied to a class so I'll mark existing responses as answers, but I need to take the style being applied to an id and also apply it to a class style ... if that makes any sense.
There's no way to do it with CSS -- it's an oft-requested feature, but not included in the spec yet. You also can't do it directly with JS, but there's sort of a hacky workaround:
$('.style2').addClass ('style1');
you can achieve the same functionality by allowing elements to inherit multiple styles. ex.
<p class="style1 style2">stuff</p>
and then your css would include, for example:
.style1 {width:140px;}
.style2 {height:140px;}
edit: actually robert's answer might better approximate the method you are trying to achieve
.style1, .style2 {width: 140px;}
.style2 {height: 140px;}
<p class="style2">i will have both width and height applied</p>
One way to use the same code for multiple blocks is the following:
.style1, .style2 { width: 140px; }
Another way is use pre -processing tool, like less and sass. Then after you compile the less/sass file, it will result as normal css.
Here is the documentation of less and sass.
// example of LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* Compiled CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Some options:
Generate your CSS dynamically, either on the fly or as you're authoring your style sheets (I use a Visual Studio macros to implement constants for fonts, numbers, and colors - and to calculate light/dark tints of colors). This topic has been much discussed elsewhere on this site.
If you have a number of styles that are 140px wide and you want to have the flexibility of changing that dimension for all of those styles, you could do this:
div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}
and
<div class="Style1 FixedWidth">...</div>
<div class="Style2 FixedWidth">...</div>
Are you talking about getting all of the computed styles set on a particular Element and applying those to a second Element?
If that's the case, I think you're going to need to iterate through one Element's computed styles using and then apply those to your other Elements' cssText properties to set them as inline styles.
Something like:
el = document.getElementById('someId');
var cStyle = '';
for(var i in el.style){
if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });
If you know that you'll only be dealing with a finite set of CSS properties, you could simplify the above as:
el = $('#someId');
var styleProps = {'border-top':true,'width':true,'height':true};
var cStyle = '';
for(var i in styleProps){
cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';';
}
$('.someClass').each(function(){ this.style.cssText = cStyle; });
I'll caveat the above code with the fact that I'm not sure whether or not the IEs will return a CSSStyleDeclaration Object for an HTMLElement's style property like Mozilla will (the first example). I also haven't given the above a test, so rely on it as pseudo-code only.
I was trying this same thing and found this webpage (as well as some others). There isn't a DIRECT way to do this. IE:
<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b { font-size: 24pt; }
.c { b }
</style></head><body>
<span class='c'>This is a test</span></body></html>
Does NOT work. The problem here is you (like me) are trying to do things in a logical fashion. (ie: A-then-B-then-C)
As others have pointed out - this just does not work. Although it SHOULD work and CSS SHOULD have a lot of other features too. It doesn't so you have to do a work around. Some have already posted the jQuery way to get around this but what you want CAN be achieved with a slight modification.
<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b,.c { font-size: 24pt; }
</style></head><body>
<span class='c'>This is a test</span></body></html>
This achieves the same effect - just in a different way. Instead of trying to assign "a" or "b" to "c" - just assign "c" to "a" or "b". You get the same effect without it affecting the rest of your code.
The next question that should pop into your mind is "Can I do this for multiple CSS items. (Like font-size, font-weight, font-family?) The answer is YES. Just add the ",.c" part onto each of the things you want it to be a part of and all of those "parts" will become a part of ".c".
<html>
<head>
<title>Test</title>
<style>
.a { font-size: 12pt; }
.b,.c { font-size: 24pt; }
.d { font-weight: normal; }
.e,.c { font-weight: bold; }
.f { font-family: times; }
.g,.c { font-family: Arial; }
</style>
</head>
<body>
<span class='c'>This is a test</span>
</body>
</html>