For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
Related
I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
I'm developing a WordPress website and have some trouble with the header width on some specific screens as you can see in the image below.
Does anybody know where I can adjust this in my template? (I guess it has something to do with the min-width.) To take a deeper look, the URL is www.brainfarts.shop.
I think this is an error with the media queries, I see the trouble when I change the width between 1,000px and 1,280px (both widths included).
I don't know much about Wordpress but if I were you I would try to mess with the site changing things with the element inspector of any browser and then try to apply the changes in some place in your Wordpress, in some section where you can insert your code (css).
I'm confused on what makes background images that I set with css load when the image comes into view and sometimes not. That is, I have one scenario in my code (I can give examples if that would help) where I can watch my network traffic and I don't see the image get loaded over the wire until it scrolled into view. I had changed from using a standard img tag to the css background to make this happen.
Now, I have another simple example where I just have what seems to me to be the same
any guideline on when it gets loaded?
thanks
I am working on a Joomla 1.5 website and a little self-contained php application, which I want to show within an IFRAME inserted in an article. The template I am using for the website has a dark grey background and the IFRAME shows grey background when loaded in Firefox (I don't quite know why this is so, but I like it like this). However, when the page is loaded in IE, the IFRAME has white background (understandably).
How can I make the IFRAME copy the background color of its parent document also in IE?
Also, I have another unanswered question related to IFRAME usage and Joomla 1.5, which I would like to point your attention to.
If the self-contained application is on the same domain as the article page, you could access the top frame (with the article) through javascript - like this:
document.body.style.backgroundColor = getComputedStyle(window.top.document.body);
Computed style can be get as described in this article.
Your other option is to add a query string parameter for the iframe, like bgcolor= - this is a more widget-like approach, and will make the stand-alone application more configurable. I personally recommend this approach - it will not rely on javascript and it will not flicker if the execution gets slow.
How do I skin shadowbox and make sure popup size is fixed size?
The css part is ok since it's just overriding ids and classes.
However, I'm not sure what the markup.js is supposed to look.
So here are my questions:
I created shadowbox-custom-skin/markup.js and added the hook like:
add_filter('shadowbox-markup', 'shadowbox_custom_markup');
Now I can't find an example of how the markup.js is supposed to look.
(I'm trying to put the sb-nav div before the content and the sb-title div below the content and also add some new parameters).
I fixed the size of the popup using this method:
rel="shadowbox;width=480px;height=240px"
handleOversize resize no longer works. Meaning, it will resize content, but it's squeezed.
How do I make sure the popup is the same size, but oversized content isn't squeezed and small content is just centered?
You don't really need to tweak javascript to do this. Using the property inspector on your browser or the Firebug plugin, right click on the Shadowbox and see what css classes/ids are being used. Put those css classes/ids in your own stylesheet apply the styles you want. Then upload the file to your server.