Sharre Social Media Plugin Style Issue - css

Im working on implementing this Social Medial Plugin called Sharre:
http://sharrre.com
For example 5:
http://sharrre.com/example5.html
I cant determine how to style these buttons or tracking boxes so that they will fit on my page. I would like to reduce the width and height for both.
http://jsfiddle.net/NinjaSk8ter/uhhwt/
For example, I have tried to modify the width of the .button which doesnt seem to work:
#example5{
float:left;
margin:28px 0 0 10px;
}
.sharrre .button{
float:left;
width:60px;
}
I have also seen in the docs that:
twitter: { //http://twitter.com/about/resources/tweetbutton
url: '', //if you need to personalize url button
Does this imply that I would need to modify the size of the Image?

The plugin utilizes <iframe> elements and background-image to display the icons. You won't be able to modify them without cutting off part of the images. If you need to change the size of the icon, I would recommend resizing it via your favorite graphics program, uploading it to your server, and calling it via the custom parameter url that you mentioned.

Related

silverstripe / tinymce - stop automatic resize

Using Silverstripe CMS (v3.4) when I upload an image using the tinymce editor it automatically sets the width/height on the image. This causes problems such as breaking animated gifs so they don't play and also reduces the quality of static images.
How do I turn this feature off completely so that no resizing is done on upload?
You can modify the insert width of the images instead of them being resized to 600px wide.
mysite/_config.yml
HtmlEditorField:
insert_width:
1200
You can also override the width / height attributes on the image tag with css.
.typography img {
width: 100%;
max-width: 100%;
height: auto;
}
Its not great but its the only work around which I know.
As for animated gifs, these are always going to break if they are resized with php.
HTMLEditorField updates img tags in it's saveInto function. Inside the saveInto function is a processImage extension hook that allows us to manipulate images inserted using TinyMCE.
First we create a CustomHTMLEditorField extension with a processImage function. If the image is a gif we set the img src back to the original image path.
SilverStripe 3
class CustomHTMLEditorField extends Extension
{
public function processImage($image, $img)
{
if ($image->getExtension() == 'gif') {
$img->setAttribute('src', $image->getRelativePath());
}
}
}
Next we add the extension to HtmlEditorField in our config.yml file:
HtmlEditorField:
extensions:
- CustomHTMLEditorField
Don't add images in TinyMCE… it doesn't properly support hi-dpi images and it's really hard to control the resulting layout.
Better use something like a content-block module or just use separate image-upload fields. You could also use something like the shortcodable module to insert media such as images via custom shortcodes.

How to disable images from being viewed in the browser?

I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.

How to add background image to Wordpress theme's Accelerate

Hi guys i've been working for this for days and searching the net for help but unluckily I don't find one. Here's my problem, I know that wordpress has a built-in background image when you click the appearance. I also tried editing in the CSS but when I put the code
background-image: url(image/3.jpg) in the body but when I see it it didn't appear. I think that the theme Accelerate has a code that has a fixed white image, How is this?
Their may be background image or no back ground image in wordpress according to the theme you are currently working with. Anyway you can add background image inside the body of a page in wordpress by the following ways :
Select css class from "main.css" located wp-contents/themes/your-current-theme/css/main.css, inside css edit "body" as
body{
/*...propeties..*/
background-image:url(back-img-url);
}
if it overridden by default images of your theme can use this instead of above
body{
/*...propeties..*/
background-image:url(back-img-url) !important;
}
In case you are using a custom template inside wordpress find the body class from the css you are using and change this as above.or using image inside page with img tag then make direct changes for this.
I resolved this by clicking Theme Options -> Design and choose the "Boxed Layout" instead of Wide Layout

Avoid overriding by css

I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}

How to Change a Plugin's CSS

I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;

Resources