I cannot change the grey text to yellow when a dropdown is clicked in a collapsed view. I have the example at http://www.bootply.com/zGzMrrmrWL
My code is all over the place because I have just been throwing things in to see if they work! I'm at that kind of desperation state! Can anybody show me what I haven't done? I simply want all the text to be yellow, whether it is in a dropdown or on the main menu
You need to have..
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {color:#FFFF00; font-size: 18px;}
in your CSS overrides to the specificity of .dropdown-menu>li>a isn't enough to override Bootstrap's CSS that is changing the color to grey.
http://bootply.com/GKs5h2XiZc
Related
I am using the CommandBar Component to display links. (The buttons are href links).
I want to remove the underline from buttons when hover. Is it possible? enter image description here
https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
If you want to remove the underline of a button when hover, maybe you can do something like this
button: hover{
text-decoration: none;
}
Let me know if that worked for you
How i can change background color of all page?
like this :
body,div { background-color:#f4f4f4; }
Now background changes only for div with information, remaining page have white color. if it is possible, can you write example?
P.s. How i can draw border around ?
Acording to the documentacion https://github.com/chrisglass/xhtml2pdf/blob/master/doc/usage.rst#supported-page-properties-and-values #page only accept few css propierties:
background-image
size
margin, margin-bottom, margin-left, margin-right, margin-top
So maybe the easyest is to make a jpg to draw the background with background color and border. And use that image in background-image propierty:
#page {background-image: url('local_path/to/your/image.jpg')}
I hope this will help you
html,body{height:100%}
body,div { background-color:#f4f4f4; }
and your Second Question > How i can draw border around ?
add
border:1px #ccc solid
I have created a nested list. When the text of the selected item is quite long than back button overlaps the toolbar title.
Is there any way to align toolbar text to right or set font size??
Any help is appreciated.
You can use only "Back" (or something else) for the back button. You just need to add this config in your nested list: useTitleAsBackText: false (It is true by default).
Else, you can reduce the font size for both button and toolbar title in your CSS file. Like this:
.my-nested-list .x-toolbar .x-button-label,
.my-nested-list .x-toolbar .x-title {
font-size: 13px;
}
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.