Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
So, I have 2 CSS files for a HTML page. When the page loads, it shows the styles of the first CSS page and then loads the 2nd CSS file. So, for that one second, my page looks a little different then what it is supposed to be. How can we avoid it?
For example, I have bootstrap.css and my custom css. It always shows the bootstrap.css styles for that one second before loading my custom.css.
FOUC doesn't happen because you're loading stylesheets in a particular order.
It happens because you load CSS after DOM has already been (partially) built. To prevent it, do not load CSS in <body>, but in <head>. In any order you want.
If you do place style rules or references in <body>, make sure they're placed above the affected elements.
Hard without seeing your code, but if you don't have much CSS in your custom file, I'd suggest just adding it to the bottom of your first CSS file
You can use JQuery to do that.
$(function () {
setTimeout(function(){
$('<link rel="stylesheet" type="text/css" href="style/style_2.css">').appendTo("body");
}, 3000);
});
Change the time to appending second CSS style.
Hope that will help you.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am making a website in WordPress using a theme called Hueman. I want my whole site in fullscreen and get rid of the borders on the side (I'll show in a picture).
Can't find where to edit this.
I need to remove the borders 1 and 2 and make it fullscreen and responsive on other browsers/devices.
You can achieve this by adding this as custom css (tested and confirmed just now on latest heuman version)
.wrapper,
.container,
.container-inner {
max-width: 100% !important;
width: 100% !important;
}
Note:
Don't make changes to original theme files, preferably make a child theme or else use custom css option
As told in the comments, there is a function in most themes (mostly non-free themes) to edit the appearance without changing any code. Often themes install this tweak-UI in the controll panel on the left, using it's own name, adding sth like "options" (e.g. "[myThemeName] options"). Be sure to check that before you change anything in the css-files.
If there isn't any options-menu you should check the structure of the php-file you want to load. Mostly you'll find sth like a "container"-div, which should be one of the first div-instances. Take the id/class of that div and add a rule to the css file, making its width to 100%. Before you add a new rule first check if there is already a rule declaring sth for this div.
Hope that helped you!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to add an existing capability to another part of our system. It was originally written only for one part of the system, but we want it available in another one.
So I basically copied the code (which was a huge javascript function) and pasted it into the new part of the system. Well, everything works great except for one html table that is being displayed as hidden. Everything around it is visible. But for some reason this one table is not displayed. I am guessing that because I copied it into another area, that it is inheriting some type of hidden attribute, but I have looked around everywhere and don't see anything that would be making it hidden. I am sure if I knew my own environment I would have a better idea of where to look, but this environment is so complex and i'm not used to web development and javascript and CSS. Is there someway to quickly fix this by overriding any attributes that the table might have inherited and just force it to be visible? that would be the easiest fix if it were possible.
Anyway, if you can think of anything, please advise me. Basically I have a mystery hidden table that is being hidden because of something higher up the chain (that it must have inherited) and I am not knowledgeable to figure out where it is happening.
The Best and most probably the easiest way to debug it(without getting through the lines of code) is to open the webpage in chrome, right click on the page and go for inspect element. There you can see the HTML code in the bottom panel. Find the HTML code for the table and hover over it, then you can find the position of your hidden table. Then check if the table has some css class attached with it. If yes click on the css class in the HTML code, then you can see the css table attributes in the bottom right panel. Change the value of position or any other tag to find any visible changes. GOOD LUCK!!
If you know the classname of the table and have jquery just do
$(".ELEMENTNAME").show();
probably the easiest way.. If it's an ID for that particular table you'll have to use
$("#ELEMENTNAME").show();
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
okay so I have just started development using twitter bootstrap. I find it very handy and easy to use. But when it comes to applying my own styles and adding my own background color, links color, button color and font colors It gets really frustrating. I therefore need some good and complete resources or any tutorial that explains how to add our own css in the existing bootstrap framework. Any help will be really appreciated!
if you want to customize the appearance of twitter bootstrap framework then:
always use a custom.css file to override the main bootstrap.css.
include it under your bootstrap.css
always see getting-started at bootstrap site.
see this site bootstrap-resources
hope this will help you
Fonts and colours can be customised on the bootstrap webpage. Adding backgrounds and things can be achieved by creating your own custom.css which can be included after the bootstrap.css file.
No offense, but - when you read a bit more carefully you're getting all the information you want on the project's page(s):
On the project page is a little tool where you can customize all LESS variables, at the GitHub repo is a README on how to compile the LESS files from scratch. Have a look at the LESS homepage to get a clue about what LESS actually is.
You only need to build a CSS selectors with higher specificity, than those defined in bootstrap's CSS. See nice explanation here: http://www.youtube.com/watch?v=In78mSOHmls
And you can use the built-in Firefox Page Inspector tool to see, which rules are applied and which are overriden. (it can be started by pressing the Ctrl+Shift+i shortcut, in Chrome it's Ctrl+Shift+j )
You can customize your resources on getbootstrap.com. I would recommend you read their component documentation so you can understand what is offered and align it with what you need, that way you can avoid a bloated stylesheet.
Also chrome has a great tool that allows you to edit CSS on the fly (which I find more useful and quicker than using Firefox's extensions)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I've recently starting coding my layout with responsive properties. I personally HATE mobile websites, but to accommodate my visitors, I've decided to make my site responsive.
What I cant figure out is how to disable responsive properties when I want to.
I want a link on the top of my page that when clicked will toggle the mobile site on/off.
Can this be done?
Thanks!
First thing that comes to mind is a JavaScript (/ jQuery) function that adds or deletes a CSS file from the HTML lay-out when the switch is one way or the other. You would have to make a separate CSS file that only contains your responsive media queries but that shouldn't be a big issue.
If you are using a server-side language, one way to do this is to provide a link with query information such as http://mywebsite.com/?full=1 for viewers who want to view the full site. You would check to see if the variable full exists in the query data and check if its 1. If it is, then you would set a related full session variable to true. Then whenever a page is loaded, check to see if the session variable full is true. If it is, then serve the "Full CSS" file. If it isn't, serve the "Responsive CSS" file. You could use cookies instead of session variables I believe. I'm a little rusty in the server-side department.
You could also do this in JavaScript using cookies.
I think the easiest way would be to put the responsive parts of your stylesheet in a separate file, for instance responsive.css. Then you can bind a javascript function to a link that toggles that stylesheet:
In the <head>:
<link rel="stylesheet" href="responsive.css" id="responsiveStyle">
In the <body>:
Toggle
Javascript:
function toggleResponsive() {
var responsiveStyle = document.getElementById('responsiveStyle');
if(responsiveStyle.rel === "stylesheet") {
responsiveStyle.rel = "";
} else {
responsiveStyle.rel = "stylesheet";
}
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm very new to html, css, java, code in general, and I was trying to figure out how to add more than one image within one single line of code.
I'm trying to create a really simple click-through image gallery with no flare or crazy tricks?
Any help would be much appreciated.
No. Image tags can have only ONE src. If you want multiple images, either use multiple image tags, or use some javascript to change the src of the one image.
Whenever you wonder about any HTML tag look it up at W3C (They are the authority when it comes to web standards) The imagetag is found here:
http://dev.w3.org/html5/markup/img.html#img.attrs.src
What would would probably want is to change the image src attribute using javascript, or some library like jQuery. This will also let you do more advanced scripting later on.
It could look like this in pure javascript:
document.getElementById("img").src = "foobar.jpg";
As #Luiggi says: no. You can't do that in HTML. The img tag is for a single image.
If you want to click through things, then you need to have the appropriate user-interaction event handlers, and a bunch of separate objects to switch through. Doing this is not hard, for example, you could load all the images in separate img tags, and set all but one of their display attributes to 'none'.
Then when somebody clicks, you can hide the visible one and show the next one.
Or you can go a little bit deeper and look at the many many different options for image galleries with a google search. Most of them will require some underlying framework be loaded, such at jQuery, but once you get past that hurdle the slide show stuff is usually pretty easy.