First of all, I'm sorry for my poor English. English is not my first language.
I almost finish rails tutorial in codecademy. Portfolio is the last project of this tutorial. I can't use bootstrap in this project. Here is the task.
Set up the layout file (app/views/layouts/application.html.erb). The layout file lets you build a base view that contains all the common elements of your site, such as CSS files, the header, and the footer. The <%= yield %> defines the portion of the layout that child templates can fill in.
In the below the , add CSS for the Roboto web font. Follow the instructions here. Choose the styles Thin 100, Light 300, Medium 500, and Bold 700.
Add CSS for Bootstrap. Follow the instructions here. Use the latest compiled and minified CSS, and not the optional theme.
Make sure both CSS URLs start with https.
This is the link of css for bootstrap.
http://getbootstrap.com/getting-started/#download-cdn
I just tried to insert link tag in the page,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
But I failed. I think I have to do something more. Would you please tell me how to do it? Thanks advanced.
I think you want to add a css file into your app's header
you need use the following codes
stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
you can read more here : http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag
Related
I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the website to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.
If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.
The question is:
Is there any methodology to finding this [where the CSS lives] out?
You want to know the methodology to find the CSS. Let's walk through how I did it.
Step 1
The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:
Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.
Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.
Step 2:
Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?
Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.
I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.
Step 3
Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.
That's my methodology.
You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.
If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.
add_action('wp_enqueue_scripts', 'se_41042975', 999);
function se_41042975(){
wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}
Hope it helps!
My main problem is that I get a default a bootsrrap design, and i can't change it.
I 've read many places that I have to do something like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
I 've figured out that i need to use this:
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
but with this method I can't change any of my elements. Nobody writes it down, what does the bootstrap.min.css contains. Is it a standard library, or I have to put into it some data. Sorry for the dumb question...
Do not modify the bootstrap.css!
the approach you mentioned first is the right approach.
You're using the right method. Run bootstrap then run your custom code afterwards to overwrite bootstrap styles.
In terms of knowing what you are overwriting, all the documentation for the bootstrap CSS is contained here:
http://getbootstrap.com/css/
Alternatively you can look at the non-minified version, or inspect elements in the browser.
Definitely do not modify the bootstrap library. This will make it difficult to get general bootstrap help as you have a customised version, and you'll never be able to upgrade the library without removing your changes.
As a general rule, never modify a third party library which you are using.
Do not modify default bootstrap.css bcoz it contains much css which will used in coding and designing, rather write or overwrite with your own custom css new a new file
you are using correct method. some times css not override. so use !important to force override.
eg: https://css-tricks.com/when-using-important-is-the-right-choice/
I am using a Drupal theme with font awesome. I can only assume something changed because if I use an icons with the format of (fa-""-"") it will not show or shows the unicode depending on the browser.
example: the code would look like this and would work fine- icon="fa fa-truck"
if you use icon="fa fa-pie-chart" it will not show.
I do not know the terminology to explain a two word or three word icon would be called. It also works if there is a four letter icon like "fa-file-text-o"
Here is a sample page in question http://valve.park3d.com/content/11delete is there a way to fix this? I would be happy to know the terminology of what to look for.
I had a similar issue, my issue was resolved by removing a bootstrap cdn file from header. Such as:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Or any other bootstrap cdn file you may have if you are using one.
But please note you will have to then have the actual file which you can download here:
http://getbootstrap.com/getting-started/
This answer is assuming you are using bootstrap as a front end framework.
In addition you may want to double check you have the CSS file for Font Awesome Icons.
I'm using Opencart for a E-Commerce site for my company. The Opencart developer is working on V2.0 which will incorporate Bootstrap as the default styling.
My plan was to put a link in my header file on the next line BELOW the link to bootstrap stylesheet example:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/override.css" />
I was planning on using LESS to compile into override.css and only change small parts of the Bootstrap less to meet my needs. For example, I was planning on only including the variables.less from bootstrap along with buttons.less and layout.less. I'd then compile those modified files into override.css to get my personalized styles. However, the more I think about it, I realize I'd need to include all the LESS from Bootstrap. This would make my override.css essentially the same as bootstrap.css (with the exception of the changes I make for my styling).
This essentially defeats the purpose of having an override. Is there a way to not need to include ALL the bootstrap less, just the parts that I want in the override?
People may be wondering why I don't just modify the bootstrap.css file. My thought is that if I do modify the bootstrap.css file all my changes will be overwritten if I go to upgrade (or if the Opencart developer upgrades) bootstrap in the future.
Any advise is much appreciated!
Thanks!
DS-MATT
Why don't you keep an overwrite.css to yourself, while presenting compiled bootstrap.css + override.css to the end user? That way you can easily update your bootstrap.css in the future and easily maintain the overrides themselves.
I am using twitter bootstrap and i need to change the basic visuals of the framework like the form element etc. Is it a good practice to over write all the styles again in styles.css or modify the bootstrap.css and change the styles directly.
Is there any tutorial which teaches how to set up LESS for Bootstrap and use it ?
See Twitter Bootstrap Customization Best Practices regarding customization and LESS with Twitter Bootstrap.
In general, I wouldn't recommend directly modifying your bootstrap.css file, because it will make it difficult to edit in the future if/when the core css is updated by the bootstrap folks. Instead, just have a second style sheet that is referenced after the bootstrap css. Add your overrides/modifications there, like so:
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>
<link rel="stylesheet" href="css/my_styles.css" media="screen"/>
Of course, for performance, consider combining these and serving them as one to reduce your http requests.
You can do this in Step 3 on the Boostrap Customization page...
http://twitter.github.com/bootstrap/customize.html
You can do depend up on your requirement. If you want to change all the form value in your website, you can modify the bootstrap file. else you can create one more file called style.css and write the css code using specific some classes.
This the tutorial may be helpfull to you
Link1,Link2