Whenever I start the app, I get WHITE empty background when waiting for app to load.
Thats very annoying.
Although I set app to use DARK theme, which is working fine, I still have that white screen, when app is loading.
Is there a way to fix this ?
That white background is likely just the browser before your HTML and/or CSS areloaded. I see three options:
Show a splash screen
Add an inline style to the body tag (style="background-color:black")
Improve your app's loading time, e.g. by optimizing and/or splitting up your CSS and JS.
Related
I've just started to create a new project by using Docusaurus and have tried to change background of home page to linear gradient. However, couldn't make it. I can change the navbar and the footer colors seperately, but how to make the background of the page like shown in this picture?
In case of anyone wondering the result, I could solve the problem. By using the swizzling as stated in docusaurus documentation;
run npm run swizzle, and choose the Layout component in order to eject or wrap. The Layout folder will be visible to you under src/theme/ directory. You can edit the html,body style in styles.modules.css file to change the all background of the pages.
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.
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.
like
img { background-color:color: color matched to the theme}
or
img { background-image:url (a very very tiny gif image with the text "image loading") }
I'm thinking in the benefit of this when user access site on slow connection then background color will give clue about something is there which is diffrent than text content..
It's certainly a good approach. I would however try to assign as much as possible the same background color to the background as the strongest color of the actual background image. This way the website will still be representative whenever the client has disabled all images (as some bandwidth-limited users do or some handhelds by default do) or when its browser doesn't support images. The Web Developer Toolbar is helpful in this, in the Images menu you can choose to hide images so that you can see how it would look like without (background) images. I however wouldn't put a loading gif in. You can however consider to save the image interlaced (supported on GIF and PNG).
Sure, if you want to. In most browsers a space in which an image will load is already indicated, but there's nothing stopping you from doing a background color too if you like. I typically see this on body tags or other block-level tags that have background images, but I suppose you could do it on an image itself too.
In all honesty, I don't think this will actually make a site more usable than one that lacks this "feature."
An image-heavy site will probably look awful with a 'loading' background image, but if your site is not full of pictures, go ahead.
A small loading image is a nice touch, such as those from http://www.ajaxload.info/
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.