I'm new to drupal and i was trying to do several common css tasks, like changing color background, links color etc. I guess i have not understood where the drupal css are. I tried to modify style.css in the folder my-site-name/sites/all/themes/mythemename/, which seems to be the main css, but it seems to have no effect on the site, even using the directive "!important".
So, where's the drupal 7 main css?
There is no "Main CSS". Drupal core uses some CSS files. Each module its own CSS. Then each theme overrides CSS using its own css files. You can have as much css files as you like in your theme and with any acceptable name.
Probably you have to clear the caches to see the results. If not, check the css styles with Firebug to see what is happening. This way, also, you can see what css files apply styles for each page/element.
Related
I want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I'm on a web project using bootstrap style, then I incorpored the grocery_CRUD framework and I started having problems with the css.
It seems the grocery_CRUD has priority on the css files, when it renders a table, all style changes.
I want all web site has the bootstrap css and only the tables rendered with grocery_CRUD has its style.
Any solution?
I think you are looking for the "bootstrap" theme at grocery CRUD. Just be aware that it is still in BETA phase. You can simply have a bootstrap theme like this:
$crud->set_theme('twitter-bootstrap');
I answer my question:
It's all about order of loading CSS... just didn't think about it, need to load first grocery_crud theme and then my css file. I had backwards overwriting my style
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.
I am making a theme for a website managed by plone using diazo and at least parts of twitter-bootstrap. Personally I'm not all too happy about that combination, but it was requested that way.
Now I was informed the other day that there will be some portlets that suppose to come in their own design, styled in an editor insinde plone (the editor seem to write the styles straight into the html). Meaning no further theming should be applied but bootstrap css recognizes the pattern and hijacks it anyway.
I tried to block that by using a form of <notheme css:if-content=".theStaticPortlet" /> but ended up having the theme blocked on the entire site whenever a container like this was found.
Is there a way of excluding a specific container/class from being bothered by the theme while everything around it stays themed like before?
With lesscss you can do something like that:
.theStaticPortlet {
// put your specific portlet css here
}
:not(.theStaticPortlet) {
// copy or import all your regular site css here
}
From what I understand your question is purely about Bootstrap and its CSS interfering with Plone markup. Exactly which styles are being applied on your portlet? I'd bet it has to do with the DL/DT/DD tags. If so you could use Diazo to replace those with DIVs or some other neutral tags - on Bootstrap's understanding, of course.