Add style : max-width for image in ckeditor - ckeditor4.x

I want to auto add properti max-width:100% for image in Ckeditor.
but when i submit and save after that this properti disappeared.
I want to custom it.
Thanks All
Best Regards

Related

Bigcartel - Neat theme removing picture grid theme slider

I am currently working on customizing the welcome page for my Bigcartel site.
I am using the Neat theme and would like to remove the grid filter that appears over the slideshow image1 to appear clean image2
I was wondering if it's possible in Big Cartel and what was the process to follow?
To remove the grid, you'll need to drop the following code into the bottom of the CSS section in your Customize Design area:
.slideshow div.featured_holder {
background: none;
}
add this in your css
.slideshow .featured_holder {
background-image:none
}

Hide element in ckeditor

I am using CKEditor to show some html that I have stored in my DB.
But I don't want to show all the elements while loading the content.
The problem is CKEditor ignores style like "display:none".
Any suggestions?Please help.
I found the solution.
CKEditor does support style like display: none but there is an option that I have to set to true.
config.allowedContent = true;

Pin It hover on single image?

do you know if its possible to have the pint it mouse over on a single image? right now I use this:
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async data-pin-hover="true"
src="//assets.pinterest.com/js/pinit.js"></script>
But that is placing a pint it on every image on that page, I just have 3 or 4 images that needs the hover action, not all the whole images in that page, any idea guys?
Thanks!
From looking at the pinterest documentation, I think by default it wants to put a pinit button on everything. So to exclude images, you have to add the exclude specifically on every image for which you do not want the image to appear:
data-pin-no-hover="true"
https://developers.pinterest.com/on_hover_pin_it_buttons/
With JQuery I just did the following since I set the following pinterest attribute on all the images I wanted the save button to show up on...
//remove Pinterest save button for all images
$("img").attr("data-pin-no-hover", true);
//add it back to images for which I've defined the pinterest image
$("img[data-pin-media]").removeAttr("data-pin-no-hover");

Refine and filter with ajax in Wordpress

I have an image gallery in wordpress and I would like to filter the images based on say colour and style similar to the website
Someone please pint me in the right direction or a plugin that can do this?
Thanks
You can try gallery bank plugin.
In the settings enable the filter by tag (way at the bottom), and then add the desired tags to the images. (i.e. red, bold, retro). You can add as many tags as you want.
The image gallery will display all tags for all images (in thumbnail view)
When you click them, the images will re-sort (based on the tag clicked) without the page reloading.
You can manipulate the data-filter attribute of the # link in the includes_before php file. This link drives the sorting behavior.

change the TreeView dotted to different design

I'm using the telerik TreeView.
I wonder if there is a way to change the dotted line used in the TreeView to a line that is not dotted(by uploading a background image file,or if telerik a have another solution.
http://demos.telerik.com/aspnet-mvc/treeview/draganddrop?theme=default
Based on your Theme please update below highlighted (three) images.
If you used CDN URL then please create this three images and add into your project.
Then copy all the css class which was used this three images.
Then update the image source and add "!important" in the style property.
Code from Original CSS File (ehich was used 'treeview-nodes.png' image)
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Default/treeview-nodes.png')}
Updated CSS code
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('YourNewPathComesHere') !important;}

Resources