I want to make a ionic popup blinks after a timeout. I just don't know how to change background color dynamically, after opened.
Someone has any idea?
You can assign your popup a custom CSS class as described in the official documentation:
$ionicPopup.show({
cssClass: "blink-popup",
...
});
And then you can style your popup using CSS:
.blink-popup.popup-container .popup {
background-color: green;
}
Code found here: https://forum.ionicframework.com/t/how-to-use-custom-css-in-popup/22414/5
And some more details on customizing your popup: http://www.codeandyou.com/2015/08/How-to-customize-color-and-theme-of-ionic-popup.html
Related
I am making a web browser in electron, and I have an issue where the page I open in my webview doesn't resize to the window's size and goes outside of the bounds.
Here is a picture of the issue:
If someone knows how to help me, I would really appreciate that.
Add this CSS to your window.html page:
/* make sure that the body fills the entire window */
body {
width:100vw;
height:100vh;
margin:0px;
}
/* make sure that the webview element fills the entire body*/
webview {
height:100%;
width:100%;
}
I use the Kendo Upload component for Angular 2.
I cannot figure out how to hide the file list below the uploader button. I know it can be customized using ng-template but I want it to be hidden. I've tried setting the class like this :
.k-upload-files{
display: none;
}
but this has no effect.
Can you help ?
The file-list can be hidden by utilizing the showFileList input. API Reference
<kendo-upload
[showFileList]="false"
...
>
</kendo-upload>
Alternatively you can use a css rules to hide the file-list (as you already stated in your question).
.k-upload-files {
display: none;
}
I've prepared an example showing both approaches in action.
Is there any way to remove "WordPress carousel free version" this text.
Wonder Plugin version 12.3
You can see carousel example here http://rashedulalam.info
This ought to do it:
.amazingcarousel-image > div {
opacity: 0 !important;
}
That said, the most moral way to do it would be to pay for the paid version
of the plugin. The plugin creator's time and effort were not offered to you for free unless you agreed to advertise for her.
Edit: $49/year/site for a carousel? highway robbery, hide away.
Go to plugin
wonderplugin-carousel-> engine folder-> wonderplugincarousel.js
Edit wonderplugincarousel.js file and search wtextcssdefault then change opacity:0.9 to opacity: 0
and save.
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
.amazingcarousel-item div.amazingcarousel-image :nth-child(3) { z-index: -99; }
I hope this is useful and it's working.
With version 12.7 (mar2018) work only the last solution here above, this:
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
.amazingcarousel-item div.amazingcarousel-image :nth-child(3) { z-index: -99; }
this is working newly updated by me
.amazingcarousel-image a { opacity:0 !important }
.amazingcarousel-image .wondercarousellightbox { opacity:unset !important }
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 have activated the extended menu via the Screen Options and in my menu item I have specified a class based on the css code added to the screeen.css file.
For example in the "Home" menu item I have specified a class of "red", and in the css I have added the following code.
.red { color: #FF0000}
Unfortunately this is not transposing to the template and I am not sure what I am doing wrong.
Checking this with firebug I notice the class is being added, however the color change is not appearing.
<li id="menu-item-154" class="red menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-148 current_page_item menu-
item-154"> Home
Can anyone offer some suggestions to make this work?
The color might be specified in one of the other classes as well.
You can try to remove that or you can try to force the color via the CSS important attribute.
Try:
.red { color: #FF0000 !important;}