I'm a newbie so forgive me stupid questions ˆˆ
I am creating a website with bootstrap. It all works fine, yet I want to overwrite some CSS. In the attached picture you see how I used the developer tool to inspect my site. Now I see a lot of CSS but I find it hard to know how to write it in my own CSS styles document.
When you look at the menu item you see "Food" which is within and the li class is .active
Above that there is nav navbar-nav and above that is navbar-collapse collapse...
Now I want to change the font color of Food and of the other buttons and I want to change the background color of only the buttons.
When I write:
.active {color: red;}
Nothing changes... so do I have to add all the classes before and if so when to use a point and not...
.navbar-collapse collapse .nav navbar-nav .active
But this somehow does not overrule the bootstrap.min...
Help is appreciated
Thank you in advance!
And be safe people, we are in this together
my site
It worked using the Chrome developer tool, inspect the element, copy the css from the developer tool and paste it in my own css
Though you most certainly can override all of the css with various methods such as using !important; (not recommended as it is considered bad practice to do so), since you are using bootstrap there is a much easier way for you to achieve what you want.
The classes text-danger for the font color, and bg-white for the background should give you what you seek, however i recommend you check out Bootstrap's documentation for the various other kinds of classes you can use to modify your font or background.
you can edit the bootstrap style
inspect the element(Ctrl+ Shift+I)
in you can see style and url of style , you can edit style, then click url of style then Ctrl+A then Ctrl+C then you go to bootstrap css and delete all then paste you style
that you edited
Related
BACKGROUND: I have a set of webpages where clients can create their own emails (usually reminders for things) to be sent out to people. It uses ckeditor and I allow them to define their own style rules in a <style> tag. On another page, I show all of the emails they have drafted. (I basically just take what they made out of the database and output it into the page) I'm not asking about the security risks of this. I know perfectly well what they are and how to deal with them. That's not the question. The main problem is that if I have a class called .button that turns buttons to a navy color and they have some style defined for that same class in their css that makes the text black, then it leaks out and turns my button text black.
QUESTION: How do I let them preview what they wrote without letting their styles creep into my webpage and override my styles?
THINGS I'VE TRIED ALREADY: I've tried an iframe, but I can't totally figure out if it's possible to just embed code in it. I also have seen the <embed> and <object> tags, but I don't know if they could help either.
Thanks in advance for any help!
You could try wrapping each email html and css in its own Shadow DOM: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM is typically used just for this purpose, to help scope html and css. Popular frameworks like Angular make use of the Shadow DOM for this as well.
One way is using !important in your own CSS which makes your CSS codes default value which cannot be overridden. for example:
.button {
background-color: navy !important;
}
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.
I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..
If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :
.navbar-default .navbar-nav>.active>a
.. the styling is completely gone, and i dont know why.
Here is a link to my JSFiddle
Found the issue.
its here in this HTML
<a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack('ctl00$lnkTeamOverviewMobile','')">Eventkalender</a>
you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..
Remove the class visible-sm and it must work fine
Working Demo
I have a navbar that I made using the bootstrap CSS. I would like to add it to my website which already has its CSS Stylesheet and when I attach both stylesheets, it conflicts and messes up all my styling. Is there a way I can easily add a CSS Stylesheet and have it only apply to one particular div?
For example, is there a way I could only load the CSS on that id?
Bootstrap CSS is extremely large so I'm hoping there is a way that does not require having to add #myid before each of the hundreds of CSS rules.
Edit It appears this is being interpreted in the wrong direction. The question is not how can I just get the navbar CSS, because that still messes up other styling.
Is there a way I can put a #mydiv around all CSS rules in a bootstrap stylesheet (for example #mydiv { #header {CSS rule} #content {CSS rule} } so that the rule is only applied to one div or do something similar to that effect? I know that example wouldn't work, but is there something that can be done similar to that effect to solve my problem?
This is one way of doing it:
You can get the appropriate css from GetBootstrap.com's customize
page
Add the id="mynav" to the parent of the navbar if there is one or wrap the navigation in a div with the id="mynav"
Open up the bootstrap.css you downloaded, remove any unnecessary css (perhaps normalize if it's a repeat of what you have).
Find all navbar related styles, and put a #mynavbar (space) .navbar
You will then open up your own CSS and put the #mynav in front of the styles affected.
Since the navigation and all of Bootstrap works with border-box sizing, you'll have to change your math in YOUR css.
HTML - Example only:
<div id="mynav"><header class="navbar navbar-static-top">
...
</header></div>
CSS example, there's lots of this so you have to add the #mynav before all
#mynavbar .navbar {styles}
You can get the navbar and related css and js from GetBootstrap.com's customize page:
http://getbootstrap.com/customize/
Toggle as follows:
Scroll down and make other adjustments as you need to the colors and such to the Navbar:
Then scroll down again and click the download.
The download will contain the CSS of what you selected. Then you would open up the bootstrap.css file you got, you'll see the normalize css and other base settings and the navbar, without other styles. If there are conflicting classes, rename them and apply them to your html.
You didn't mention what conflicts but usually it's the .container class being the same or the global -- and necessary -- box-sizing:border-box that Bootstrap uses. If you see mess ups, go back into your own CSS -- not Bootstrap's, and adjust the math (include all borders and padding). Read up on box-sizing:border-box to learn more.
You can also use the less css for developing your theme. download less master from github
And use less compiler such as winLess for windows, simpLess, and Koala (supports windows, mac and linux) compiling your less files.
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite