I need to show dynamic list using a cell list. But the condition is to remove the > symbol by overriding its CSS. Is it possible to override its css to reach my goal or is it impossible. If possible tell me the approach.
Yes, is possible to remove the ">" symbol.
If you take a look into the code this arrow is generated with this css:
.mgwt-List-group {
background-image: arrowImage;
background-repeat: no-repeat;
background-position: 100% 50%;
}
So, you have some paths to follow:
Generate your own style and leave blank this css class.
In your code override the "background-image" for each element li. Using something
like: background-image: none !important;
Anyway I am going to create a patch for this class about this problem. Probably something like setGroup(boolean showArrow); and in the constructor as well.
UPDATE: There is a method called setGroup(boolean group) yet that can solve the problem! I did not see when I wrote this answer. You can use it!
Related
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 just tried to write the following rule to style the input placeholder for browsers that support it:
#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
color: #888;
font-style: italic;
}
The problem is that the rule isn't applied. However, if I break it up like this instead it works just fine:
#main input::-webkit-input-placeholder
{
color: #888;
font-style: italic;
}
#main input:-moz-placeholder
{
color: #888;
font-style: italic;
}
Why can I not group browser-specific selectors, or is there another way to do it? It doesn't feel right to repeat the same attributes twice for the same element.
Update:
Just found this resource stating that it cannot be done, but so far no information on why. It seems odd that the browser should have to discard the entire rule just because it doesn't recognize one of the selectors.
If one selector in a group of selectors is invalid, the browser must treat the entire rule as invalid. Or at least so says the W3C.
I'm not sure why this behaviour is mandated, but at a push, I'd guess it's because an invalid selector could break general CSS syntax, making it impossible for a browser to reliably guess where the invalid selector ends and valid elements begin.
Most likely, some browsers discard the entire definition because they don't consider the selector valid.
If you are willing to use JavaScript, check out the -prefix-free script. It allows you to leave off the vendor specific prefixes (e.g. -webkit- or -moz-) for CSS properties like these.
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;
}
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.