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!
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 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.
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 6 years ago.
Improve this question
I've been asked to implement a Day/Night mode in the page I'm maintaining.
The idea is that the default theme is a light coloured theme with light background and darker fonts and pressing a button swithing to night mode and back.
In a hand made site this looks easier by only switching between 2 .css files or overwritting colours with another one when required, at least that's how I think I would do it.
But in wordpress I don't know what would be the best way to achieve this.
I looked for a plugin that does this and inverts my styles colours in some way to create a dark mode but could not find anything like this.
As I see I will have to do it myself manually, what would be the better logical way of achieving this?
Just asking about the procedure and what files should I modify or touch.
Should I create another style.css and change it? Would it affect only the user that is performing the change on his/her browser and not globally?
Append a night-mode class to your body element when "night-mode" is engaged (script.js).
$('#night-toggle').click(function(e) {
e.preventDefault();
$('body').addClass('night-mode');
});
Then add some CSS (style.css):
body.night-mode #somediv {
//night mode styles go here
}
body.night-mode #someotherdiv {
//night mode styles go here
}
body.night-mode #someotherdiv a {
//night mode styles go here
}
// etc etc etc for each style you need to change
Now, this is a very poor implementation (and not very descriptive) because you haven't really provided any examples of the code you're working with, so I have to assume you have very limited access to altering code for your site/theme.
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 6 years ago.
Improve this question
I have basic understanding of CSS,HTML and better of scripting languages Javascript,PHP... I am trying to dive into Bootstrap framework.
Documentation great, any problems without creating pages, everything works pretty well.
But I really hate doing something without understanding how does this work under the hood internally.
I understand that CSS3 is used with browser specific features, but I cannot leave this as it is, I want to get better understanding of bootstrap.
And how can I implement the same without using bootstrap.css.
I know the best way is just to read bootstrap.css but maybe someone has link to article or any other resource explaining how all this stuff works and how this is achieved and I can implement without bootstrap.
Thanks.
The best way is still reading the bootstrap.css file. You don't have to read it top to bottom. Pick up a sample web page made in bootstrap. See which classes are used where. Bootstrap classes are very intuitive. Most probable you'll see classes like, .row, .col-sm-4, navbar, .container, .container-fluid etc. The next step is search a particular class in bottstrap.css. E.g. searching .col- you'll see that there are 12 different classes starting from .col-sm-1 to .col-sm-12 after the media query for <= 768px. Then for other screen size you'll see other classes like .col-xs-1 to .col-xs-12 for screen sizes >= 768px and so on. They simply give 100% width to .coll-*-12 and 50% width to col-*-6 etc. You'll see clearfix classes etc. Then it will click. Whenever you'll see a new class used in page it's name would be self explaining you could foreguess what that class would do and how would that be defined in the framework.
That is the strategy I am using to learn Bootstrap. Although I feel that most of the times we need only rudimentary classes of bootstrap for responsiveness. Simple things can be done manually with custom css, like styling buttons, font-sizes etc.
Finally I'd suggest you the following article for undertanding how the .row and .col work. What the 15px padding and -15px margin doing in these things.
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
P.S: If you know how to use developer tools then looking through the DOM is actually a far better approach. You can see the css applied by each class and can also edit it to see how it makes difference.
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)