Am already had a navbar and a tags tabs, all works good with my styling, now am trying to convert it to bootstrap-vue. non is working.
Start simple, i followed this question here [https://stackoverflow.com/questions/49105258/change-title-color-of-bootstrap-vue-tab-title][1]
but the styling does not change. what would be the right way, to change only the background color of titles for all tabs, and make it act as sticky menue?
After long search i got help. and all i wanted is to use
::v-deep {}
on my styling.
Related
I'm working on a Vue.js project that uses PrimeVue attributes. I needed a dropdown menu and I used PrimeVue's . It works great, but when I select an option on the dropdown, the selected option text becomes white. Dropdown itself is also white, so I cannot see the chosen option. You should know that this issue doesn't happen when I use a light PrimeVue theme. But when I use a dark PrimeVue theme, this issue appears.
PrimeVue themes I am using:
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
Again, the dark one has the problem. So, I want to change the color of the text inside the Dropdown. I thought that if I make the text color black as a fixed color, the issue would be handled. Or any other suggestions?
I tried to assign a background-color to black but it did not solve my problem.
I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a gradient.)
The problem I have is that since the default focus outline for the button is black and it's not visible against the dark background. How can I change this so that the focus outline becomes the invert color of the primary color?
I can always attach a custom CSS to change the outline color, but I'm looking for the correct way supported by the Fluent UI framework. I noticed that the Button component puts a white background color when the primary=true prop is specified. So, there seems to be a way to change the outline color, but I could not really figure out how. I also looked into the source code, and it takes a theme object and generates a class name, but this still did not tell me the full story.
There are sometimes ::after selectors in play with FluentUI focus behavior. The "Chrome version >= 86" portion of this answer shows how to put Chrome in a state that will yet you inspect your components without losing focus in the page when you navigate in DevTools.
When I encounter focus styling that I want to change in Fluent, I can find out what's applying the styles I wish to alter using this method and then override them.
I have integrated Bootstrap Vue into my project and am having a hard time customizing it.
Specifically, I am talking about the Navbar component.
I have read the documentation and saw that I can apply a variant to the navbar that will define the color of the whole navbar.
Thing is, I didn't provide a variant to the navbar (and don't want to) and when it collapses, the collapsed menu icon (hamburger menu icon) is black and is not visible due to the background color of my website.
I have inspected the DOM of the website and used the following CSS rules and selectors:
.navbar-toggle
.navbar-toggler
.navbar-toggler-icon
With each of them I tried to apply the rule:
color: white !important;
but this had no result.
I have looked online and in SO, but found nothing that addresses this scenario.
Navbar open:
Navbar collapsed:
Obviously, I can change the background color of my website, but I prefer not to do that as I do not want to change the look and feel of the website just because of a minor issue (and I want to be able to know how to overcome this).
Link to code
Looking at your code - .navbar-toggle and .navbar-toggler are just plain div's, so color prop would affect only text color.
If you are trying to change icon color - it is an inline background svg. you can only override it with your own file.
I managed to solve this scenario by using the following selector:
.navbar-toggler > .navbar-toggler-icon {
background-color: white;
}
#Ivan Klochkov pointed me in the right direction, but I had to mess a bit with the correct selectors.
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
I want to change the layout of my app. I want use my own buttons and change background color.
Can someone post some useful tutorials. I'm not so good in css
thanks for help
My only advice is for you to use Firebug if you want to customize you app.
Set cls attributes to your components, launch the app on a Firefox/Chrome/Safari and then just right click on the HTML element you want to customize and take a look at the CSS set for the element. Then, it's all about CSS writing.
Either you can override the existing CSS with your own stylesheet, you can also use SCSS for theming a touch application. Take a look at this guide on SCSS http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
ya you can change your background colors in touch-charts-full.css file. In that you can able to change shape of the buttons also.If suppose you want to chnage the background color of toolbar, Search for toolbar in css file and change background color in that.