Twitter Bootstrap code copied and not loading - css

I have copied the following template over to my CI install to use the css. I am unsure why that css is not loading but it is a direct copy from the example. Any ideas?

Your css have 567 lines and the original one have .. 3365!
You : http://jsfiddle.net/ayottepl/EnSwQ/
The original : http://jsfiddle.net/ayottepl/7dCTw/
Just change the css in you're and it works!

Related

AG-Grid CSS syntax

I'm having problems understanding the AG-grid css syntax (Variable Reference).
disclaimer - I'm not a developer, just self-taught hobbiest, so I'm not sure what to search for.
I want to create my own theme for a project, and I wasn't getting anywhere, so I copied the css file for an existing theme, and intended to modify it to suit my needs, but I don't understand why its not working.
Below is an example (heavily truncated):
.ag-theme-pz {
...
--ag-background-color: rgba(209,210,210,0.75); <-- Doesn't work
background-color: rgba(209,210,210,0.75); <-- Does work
...
}
For some reason, in my copied css file, the syntax (--ag-background-color) no longer works - but it worked fine in the original css file.
Is there a reference I need to add to make sure the syntax as per their documentation works??
What have I missed?

Bootstrap and CSS

I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.

editing bootstrap css classes

There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.

Problems importing external CSS files on Codepen.io

I love working with Codepen and I'm trying to import a css file from Pastebin.
Here is a link to my external file hosted on Pastebin:
http://pastebin.com/raw.php?i=mj9dmzZw
and inside that file I link to my actual font files.
I'm not sure what I'm doing wrong. Could anyone point me in the right direction or let me know if this is even possible.
Here is the actual codepen. http://codepen.io/ryanjgill/pen/CLitH
Inside the CSS section I have commented out the styling that I'm trying to include with the external CSS file. If you uncomment the styling for the iconfonts, you will see icons in the column 'Type'.
I have tried linking the flie in the settings of the css section that is built into codepen. And using the "#include url('http://pastebin.com/raw.php?i=mj9dmzZw')" inside the css.
Well, on CodePen page, there is a small letter 'g' top-right of css input box.
You can import your .css there i think.
If you need some .css extension to your file for importation, just create a new file.css and #import your Pastebin css from within your new file.css

Using customised bootstrap framework

I downloaded a customized bootstrap CSS framework from this link
http://twitter.github.com/bootstrap/customize.html.
And I got only bootstrap.css and bootstrap.min.css files.
But as I am using responsive feature, I also need the customised version of bootstrap.responsive.css. How do I make the bootstrap.responsive.css work according to my new bootstrap.css.
PS: I have made 15 span columns and given new width for each.
Thank you.
Its all included in the single CSS file

Resources