I've been searching and searching for an answer to this problem and cannot found a solution.
I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.
I would just like the styles in the list to have no preview at all if possible.
I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.
Any suggestions? Thanks in advance!
I was able to do this using the contentsCss config property. So:
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = 'wysiwyg.css';
}
then in wysiwyg.css put your CSS code:
.cke_panel_listItem p {
margin-left: 0px !important;
}
Related
I'd like to use paper-item element within a lit-element based app.
Within the app, I'm using --paper-item CSS custom property which can be applied to the paper-item using #apply but since the feature is removed from browsers, it doesn't work now.
Looks like ShadyCSS can make it work, but don't know how to activate it. Can someone help me?
html {
--paper-tabs: {
font-size: 1.0em;
height: 24px;
color: var(--text-primary-color);
background-color: var(--default-primary-color);
};
}
The #apply shim is only applied to styles in the elements template. It was a bit too difficult to apply it to styles added via constructible stylesheets. So if you want to use it, move the styles to a <style> tag in the render() method.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}
I've been trying to customize one the menu item on the joomla template i've currently use.
Some of the menu I've used before normally display item ID when you view the source code but my template doesn't display any at all. Anyhow I created the css code below hoping this will meet my goal but it didn't work. What I'm trying to accomplish is make the APPLY NOW an item #30 on my administrative main menu panel column turn the background into RED before any hover or any activities. You could view my temp link at getvms.net/home
I really appreciate if you could help me.
Thank you!
code:
#s5_nav li {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
}
#s5_nav li.item#30, {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
background:red;
you are on right direction giving style to one item in a fine way but you have one mistake
#s5_nav li.item#30, {
display:block;
you should remove , at the end of the item#30 and you should use like this
#s5_nav li.item#30{
display:block;
hop it will help you.
The following may work for you if you are using Joomla! 1.6 or 1.7:
You can apply a custom CSS class to a specific menu item through the Menu Manager in Joomla!. Once you have done so, you can apply a style to that class in your style sheet.
To do so, simply open the desired Menu Item in your Menu Manager, and in the right hand column click "Link Type Options" to open that panel. The "Link Style CSS" field allows you to specify the name of a CSS class you would like to be applied to that Menu Item. This will allow you to apply styles to just that single menu item.
try with:
#s5_nav li.item30{
display:block;
list-style:none;
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.