I'm not sure why this isn't working but I'm trying to make a transition bar on a page that is basically just a block of color across some content.
I'm using Bootstrap 3 but not sure that has anything to do with it. If I apply the color directly to my div tag using a style tag it will work. However, I would like it to be in my style sheet so I can add a left and right border. When I put the same thing in my style sheet and try to apply it the style it won't display. I'm still learning to use the Dev Tools but when I view it using F12 I looks as though it applies my stylesheet style like it should.
Any ideas on what I'm doing wrong?
This works. I'm using a period to control the height for now but will eventually try to apply some height styling.
<div class="row">
<div class="col-md-12" style="background-color:#6f88a1">.</div>
</div>
This doesn't
.home_transition_bar
{
border-left: 1px solid Black;
border-right: 1px solid Black;
background-color: #6f88a1;
}
<div class="row">
<div class="col-md-12 home_transition_bar">.</div>
</div>
well, bootstrap has some pre-defined styles... in order to overwrite them, simple css code might not be accepted. Therefore, try at the end of the style "!important". For example:
#header
{
background-color: red !important;
}
I am working with bootstrap and that has done it for me. Hope it helps
Related
I want give border via inbuild CSS in XML for a blog. See the sample: iPhone 12 mini. I have add the following code:
.table{
border: 1px solid black;
}
But, it does not give a border. Any ideas?
Check if you have assigned the right class to the element you want to style. On the sample page there are no elements with the .table class.
If you can only access CSS and you want to style elements on the page over which you don't have direct control, you can try to select elements by their name, their classes, IDs and other attributes using CSS selectors. You can use both single selectors and combination of them to obtain the specificity you need. There is also !important CSS property which you can better not use to avoid maintenance difficulties of the code.
In your sample there are 2 things that can cause your problem:
there is a RESET CSS that include table with border: 0;
and
in your css code you tried, you used .table - this means that your table has a class="table", and from what I saw in the sample, that is not the case.
My sugestion is either to add the class="table" to your table and try again your css...
Something like so:
.table{
border: 1px solid black;
}
<body>
<table class="table" border="1">
...
</table>
</body>
Or remove the dot (and the need to include a class) - and use in your css simply :
table {
border: 1px solid black;
}
Mind you that this code, as per your sample css, only put a border around the table and not on all inner elements of said table.
Adding a border to the table doesn't have anything to do with CSS.
You need to add an HTML Attribute Instead.
<HTML>
...
<body>
<table border="1">
...
</table>
</body>
...
<HTML>
CSS Borders are for decorations, bordering an image etc...
While <table> doesn't use CSS Tables to make it visible, It can be added for decoration later, But it still requires the Border HTML Attribute.
I am styling a website using CSS. In my project, I need to apply the style to a modal in a bit of a hacky way.
I have elements in the following order.
<div class="dialog">
<div class="dialog-content">
<div class="my-dialog-content">
//I can change the my-dialog-content and the content within it.
</div>
</div>
</div>
In the markup above, the .dialog and .dialog-content come with the npm package so that I do not have control over it. Which means that I cannot add new classes to them. I am trying to override those classes/ elements but I am trying to override for just one dialog. If I override as follow,
.dialog {
border: 1px solid red;
}
it will apply the style to all the dialogs/ modals in the entire project.
I am looking for a selector the .dialog that has the children with .my-dialog-content within it. I tried using has, but it is not working. How can I do that?
you can't have it with css
because in css you can select a child that has certain parent
but you CAN Not Select a Parent based on it's child
for that why you have to use javascript(or in this case hope you have jQuery):
first add style:
.foo{
border: 1px solid red;
}
then add this style to you element with jQuery:
$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')
I am using the ui-bootstrap popover to list some notifications in my application.
I am using the uib-popover-template to design the content of the popover.
I would like to change the padding settings for each elements inside the popover.
I have tried using the popover-class attribute, but this just configures the CSS for the overall popover, and not the elements contained inside - this is what the .popover-content CSS class seems to govern.
Here is the html for the popover:
<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
popover-class="my-notifications-popover"></span>
Additionally, I don't want to do this just by doing:
.popover-content {
margin: 0px;
}
as I have used popovers in multiple places throughout my application and don't want them all to get their CSS redefined.
Can anyone tell me how to change this in the correct manner? All help much appreciated...
EDIT 1: I've tried to do as suggested in the comments by makshh and use CSS selectors to modify the '.popover-content' class. This class is a div contained within the parent '.popover' class.
I tried to do this with the following:
.my-notifications-popover {
margin-left: 0px;
}
.my-notifications-popover div {
margin-left: 0px;
}
This should make the margin-left zero for all child divs of .my-notifications-popover which should be applied to the popover. However it doesn't seem to be applied at all. This approach may not be ideal since it would set the margin for all divs below the popover which I may not want. Is there a way to specifically target the .popover-content class specifically using the CSS selectors?
I've created a plnkr to show exactly how this is not working.... You can see it here: https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso
Added
.popover-no-margin .popover-content {
padding: 0px;
}
https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview
which works because you passed the custom class
popover-class="popover-no-margin"
Well it seems like it was padding and not margin that needed to be changed! What a moron... oh well... sorry about that... still not sure what is the most accurate way to target just the popover-content div
Add this to your plunker example.. .popover-no-margin .popover-content{
padding:0px;
} and check if this is what you wanted.
This removes the extra spaces in the popover and it will be applies to this popover only as you have already defined the class popover-no-margin for this element.
Just check my code css is reflecting for popover content. You can handle css for popover by adding css to popover-content .popover-line or creating a custom css for popover as popover-class="my-popover-class":
HTML
<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button> <script type="text/ng-template" id="myPopoverTemplate.html">
<div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div> </script>
CSS
.popover-content .popover-line { margin: 10px 0px; }
.my-popover-class { color: blue; padding-left: 0 !important;}
Working demo is here
You can add your css accordingly as you want within .popover-content .popover-line (like color,margin,padding and so on)
I checked your code. You miss something. Dynamically created content can't load existing CSS or Js. You should load css and js when you click the button. Just follow this way. I hope it will work with it well.
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover-line"> item 1</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div>
<style>
.popover-content{
display: block;
width: 200px;
}
.popover-content .popover-line{
background-color: #ff00ff;
border-bottom: 2px solid #121212;
padding: 10px 15px;
}
</style>
</script>
If you write this way your custom CSS then it will work property. See the Image below how I write code.
I hope it will help your project.
I'm using a wordpress theme and am trying to find the correct selector from the browser element inspector to alter the css code.
my website is http://randomship.com and the element i'm looking to alter is:
<div class="sticky-wrapper" style="height: 1px">
This element is the small 1px strip at the very top of the page. I'm trying to change the height to none/0px.
So far i've tried:
div .sticky-wrapper {height: none; }
FYI: this is for a child theme.
Thanks!
Inline styles have more weight than other styles. You'll need !important:
div.sticky-wrapper { height: 0 !important; }
I am trying to put a border around a div.
<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
This is a test.
</p>
</div>
Yet when I run this, this is what the browser shows as the actual style being applied:
<div style="border: 5px currentColor;">...</div>
The result is that no border is shown at all.
This makes no sense to me why the border styles are being overridden. I can only imagine that Bootstrap has set an !important override somewhere, but I have been unable to trace this.
Change the order in which you are applying inline styling. You can add all the 3 styling in the border style itself like border:5px dotted yellow;. Well if you still want to go with the way you did, just change the order. First add the border style and then specify the other styles like this.
<div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
This is a test.
</p>
</div>
In Chrome Inpsector:
click the element you wish to inspect
On the right, select the Computed tab
There you can see the applied styles, and their sources, so it would give you an idea why it is overridden.
you can always use !important yourself as well.