I'm having issues getting my CEWP to apply any of the code inside of it.
There are no errors, no problems whatsoever, it just doesn't do anything.
I've tried putting the code directly inside of the CEWP or linking to the file.
The link to the file works perfectly too.
Here are all combinations of code I have tried to add to the CEWP; perhaps someone can spot the mistake:
With the webpart id from webpage:
<script>
<style>
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
</script>
With the webpart id from SPD:
<script>
<style>
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
</script>
I have also tried with and without the script tag, messing with the spacing, messing with lines, messing with indents and nothing changes whatsoever.
I just want to remove the header from WebPartTitleWPQ9.
The style works just fine on the custom listview page when I add it directly to the page source, but the style doesn't remain when I add the list to other pages. I need the style to apply wherever the list is being used.
You have the a style tag inside the script tag.
Try this:
<style type="text/css">
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
or this:
<style type="text/css">
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
The name of the webpart needs to have "title" / "caption" omitted. The real name of the webpart is WebPartWPQ9 and not WebPartTitleWPQ9.
Changing the css to:
<style type="text/css">
#WebPartWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
fixed it.
Related
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I have a problem when I am trying to include jQuery Notebook plugin into my twitter bootstrap page. The problem is that CSS of the plugin became messed up. For example on this fiddle if you will select text, you see that controls are not on the right places.
But if you will remove bootstrap CSS - everything is ok.
Looking at jQuery notebook css, I can see that all of the classes use
.jquery-notebook ....{
}
So it is highly unlikely that they overwrite any of twitter's styles. How can I fix the styles here?
If out of a sudden in 5 years the jsfiddle will disappear, you can still find the code here:
<link rel="stylesheet" href="css/jquery.notebook.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="my-editor">
Here is my text
</div>
<script>
$(document).ready(function(){
$('.my-editor').notebook();
});
</script>
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery.notebook.js"></script>
The reason is Bootstrap override ul margin property. so you can use bootstrap with jquery notebook plugin you just change small modification to solve this problem,
jquery.notebook.css
Old style (line number 74)
.jquery-notebook.bubble ul {
padding: 0;
margin: 0;
list-style: none;
}
new style
.jquery-notebook.bubble ul {
padding: 0;
margin: -20px 0; // Add top margin -20px
list-style: none;
}
The bootstrap adds a margin top and bottom to the elements with class names h1 and h2. Try making the margins zero for these two elements in your css.
.h1,.h2{
margin:0;
}
I'm trying to hide the buttons that add color, see the picture. I've tried playing with the CSS and all I have managed to do is break the page and hide everything.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditor/HTMLEditor.aspx
Details: The following should resolve your issue.
Solution without Masterpage:
<style type="text/css">
#MainContent_ctl00_ctl01_FixedForeColor {display:none;}
#MainContent_ctl00_ctl01_FixedBackColor {display:none;}
</style>
Solution with Masterpage:
<style type="text/css">
#MainContent_Editor1_ctl01_FixedForeColor {display:none;}
#MainContent_Editor1_ctl01_FixedBackColor {display:none;}
</style>
Other ways to customise it
Customise HTML Editor Control
On the main page of my blog: http://www.laboiteaprog.com, there is a problem like you can see with the archive menu at the right.
I checked the html web page and there are this code
<style type="text/css">
p, li {
white-space: pre-wrap;
}
</style>
a couple of times.
It seems the problem happens only on the home page.
Like we can see on this one and other pages, the problem is not happening.
http://www.laboiteaprog.com/2011/08/language-implementation-patterns.html
when i click on the template and modify html code, i don't see
white-space: pre-wrap;
so i don't know how to remove it.
If you absolutely can't find that bit in your templates, you could, as a temporary solution, override it, in your css:
body p,
body li {
white-space: normal;
}