I know my question is similar to: Bootstrap popup does not appear when include bootstrap.min.css
However it was not resolved and I am practically having the same issue (minus the JS).
I am currently designing my Bootstrap website using Pinegrow, everything looks fine in the software however I realized when I actually preview or upload the code to a browser parts of the website is being overridden, I just found out it's because of the bootstrap.min.css file.
The strange thing is my 'home', 'about me' pages are fine, however when it gets to 'skills', 'portfolio' etc pages the css from my custom file is overridden.
For example:
This is what my software shows
Preview from Pinegrow
And this is what happens when it is in a browser:
Preview from Browser
Things I have done
Some people suggested just deleting the .min file, however doing that mucks up the website.
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css"> The custom css file is placed at the bottom in the html (someone said it provides priority to the custom file)
Using the !important rule doesn't work and I don't think it's the right to use it
I am using ID selections in CSS
Is the only solution to go into the .min file and edit the code from there? Is there a way to get my custom CSS code to override the .min instead? Would it help if i posted some of my code? Many thanks for your time.
I would have done so:
If a few page works, my opinion, problem in markup. If you don't use one header section for all pages, try to copy content from skills to about, then I would check the wrapper, and deeper structure first. Do you see any strange rules in development tools on skills page? (I'm learning, and I can only give you simple tips.)
Related
I'm just learning ASP.NET and I created the default Web App template in Visual Studio. There are some bootstrap.css files under wwwroot folder but even if I comment everything out it doesn't have any effect on how the website looks like.
For example in _Layout.cshtml the #RenderBody method is wrapped up in div class="container" but editing ".container" in the CSS files doesn't do anything. It's only when I delete the class name "container" in the div element something actually happens. So why editing these CSS files don't have any effect?
The browser is likely caching bootstrap.css because it is linked into the page. Try opening dev tools in your browser and telling it to dump the cache and hard reload (if you are using chrome/edge, for example).
Some devs get around this by only opening their site in private mode or with debug/dev flags. FireFox even makes a developer edition of their browser too.
I think running your site using "dotnet watch" might also fix the issue.
Check your layout, what .css file you used. You can see it in the layout or using F12 to see it in the network.
Below is two options:
1.If you used the bootstrap.min.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
You need comment .container in your bootstrap.min.css
2.If you used bootstrap.css in your layout
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
You need comment .container in your bootstrap.css
The structure is like below:
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.
I am learning CSS and want to customize an pre-existing out-of-box cookie cutter CSS style web site provided by my vendor.
Is there a way I can remove an css file which was linked in the head tag so I can strip-out/unstyle the entire page easily?
I was reading posts regarding reset.css, Normalize.css & CSS refactoring tool, not sure if they are the right tools. Any suggestions are highly appreciated.
I suggest installing Firebug if you use Firefox so you can easily see the different stylesheets and what purpose they serve. From there just remove the <link rel="stylesheet" href="filename.css"> element that has the styles your trying to strip and start over. Create your own file and re-insert it into the <head> of said site.
By your question this is all I can imagine you want to accomplish -- forgive me if I misinterpreted you ..
Here is the link to download firebug: https://getfirebug.com/downloads
Just remove the tag in the section, and the CSS should no longer be there, providing that all of the CSS was in fact in the CSS files and not inline.
I've even looked at CSS Crush, Minify, SmartOptimizer, CSSTidy and a slew of other PHP CSS compressors. But they all have one major flaw.
You can't use this:
<link rel="stylesheet" href="css/styles.css" type="text/css">
When using dreamweaver, this is the only way to see the DESIGN in DESIGN VIEW. If you replace that styles.css file with styles.php, it breaks, even if you HAVE css code in the file..
I am using minify for my JS and it is working beautifully, but if I use it with CSS, Dreamweaver gets scared and doesn't know how to render it. haha. Of course, it IS server side though.
Does anybody have a workaround for a situation like this? I do prefer to use dreamweaver because of the immediate changes that can be made in design view, as well as the FTP capabilities and code hinting, but even the new CS6 seems to whine when you use anything BUT a .css file.
I can't verify that this solution will work, but it should theoretically.
First, you'll want to add .css files as PHP, so you don't have to change the file extension. This is good practice regardless, since the file extension should indicate what content is being delivered. I don't know that there's any standard that states this outright, but it's good practice. If you're using Apache, you can add this to your .htaccess or global server configuration file:
AddHandler php5-script .css
Then, just <link rel="stylesheet" href="css/style.css" type="text/css" /> after renaming your file back to CSS. For more details on this, see the Apache docs on AddHandler.
Second, you'll want to 'comment out' your PHP code within your CSS. For example, you could do something like this at the top of style.css:
/*
<?php include 'your-file-compressor.php'
// Put any PHP code for compression here
?>
*/
That way, Dreamweaver will still read the actual CSS code, but PHP should be able to compress before delivering it to clients.
As Kishore pointed out, Minificaiton should be part of build process. While development you should use the raw css file.
Instead of href="css/styles.php" its better to use href="compresscss/path/css/styles.css". Here compresscss/path/css/styles.css is mapped to compresscss.php?path=css/style.css. This can be done by mod_rewrite in apache.
This way dreamweaver will see it as an css file and also you will compress it.
I have some pages that use the master page and apply a theme. Some of my pages are not using master pages, instead they have individual css files linked
<link href="../Style/pck.css" rel="stylesheet" type="text/css" />
Although the css works for regular pages for most cases, the body css is taken from the theme. I do not want that. I want that the body css should be taken from pck.css.
What to do?
On the pages that the CSS file is not working, have you checked to make sure that it actually loading the CSS file? (with the relative CSS link, it might not be working for pages that a deeper into your site structure).
Alternatively, I sometimes find that the needs to be the very first thing on the page or you force some browsers into compatibility mode and all hell breaks loose when that happens.