when I am using LinkManager on an inserted image, a blue border starts coming around the images. Can some body help me to remove this border?
This is a default behavior of IE inside the editable iframe elements, which can be customized via the following CSS rule:
a img
{
border: none;
}
Put the class in a CSS file and load it through the CssFiles property of RadEditor. It will clear all borders shown for images inside an tag.
Best regards,
Rumen Jekov
Related
Is there a way to change the default background color used when displaying initial image files in Filepond? Currently, the images are resized to fit into the control with the extra background space using black. I can get standard file types to display with a different background color but not with images.
I have tried to modify the css but not having any luck.
You need to set a background color to the div with class name filepond--image-preview.
.filepond--image-preview {
background: red;
}
Please note that to override the original selector you have to load this one after loading the image preview styles OR make the selector more specific:
.filepond--root .filepond--image-preview {
background: red;
}
there are instruction on how to override the styles in the documentation: https://pqina.nl/filepond/docs/api/style/#fonts-and-colors
and here is the css you may been looking for:
[data-filepond-item-state='processing-complete'] .filepond--item-panel {
background-color: red;
}
I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
I currently have a right-aligned image in the main body of a WordPress post, which I have placed using the WYSIWYG editor. However, I would like to prevent this image from displaying on devices with a max-width of 320px.
I am using a responsive theme but do not wish to change the way that other images on the website behave. For this reason, is it possible to target that image specifically? If so, how would I do this?
Bonus: I originally wanted to change the alignment and margins of the image at mobile width but have been unable to figure out how to do this without changing the way that it behaves at bigger screensizes.
Have been unable to find a solution thus far.
Thanks!
you could use media queries on the editor go to the html editor an add an id to that particular image for example <img id="target" src="some/image.jpg" />
then you could paste this on your style.css file
#media only screen and (min-device-width : 320px) {
#target{ display: none; }
}
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/
Is there a way to change the text color for entire webView?
If it is could you provide me with some examples?
A web view displays a web page, so do it the same way you would do it for any web page: define a CSS style (inline or in an external, referenced stylesheet):
* {
color: #FFFFFF;
}
... then the page will be rendered with all text the designated color. This works because the * selector applies to all elements and the color property specifies the text color.
It's easily doable from javascript