I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
Related
I have a component, rendered using v-row and v-col that needs an unintrusive divider before the next v-row.
the idea is to render the divider using Vuetify styles, not my own due to consistency.
So I wanted to apply same styles as are used for v-card by specifying class="v-card v-sheet" and I got the border, with box-shadow.
But I also got all the other CSS, like margins and padding.
I looked in documentation trying to find something that would give me what I want, but I couldn't.
So, does Vuetify provide a CSS class that would ONLY declare box-shadow and border-radius?
Vuetify does provide Border-Radius and Elevation utility classes. This allows you to compose a look similar to a v-card but without any other styles.
<v-row class="rounded elevation-1">
</v-row>
I'm using the "Progress circle" widget (version 2.0.0) in Mendix Studio Pro 9.2.0, and I would like to individually change the color(s) of each one of my progress circles, primarily the part that is shown in blue by default. By looking into Chrome DevTools, I found that the attribute stroke might be storing the color, but I'm not sure. Adding stroke: red in the Appearance > Common > Style form didn't work. On the other hand, adding background: red did have the intended effect of changing the background of the progress circle.
Can anyone help? I'm quite new to Mendix, so any help from you would be greatly appreciated.
By going into the documentation i found the source code of the widget.
Check this link: https://github.com/mendixlabs/progress-circle/tree/master/src/ui
In the ui folder there is a theme.scss and _variables.scss in which the developer defines the variables which drive the colors or theme of the widget. You could take some hints from there.
I am not suggesting to rebuild the widget but you can certainly do so by downloading the widget (.mpk gets downloaded) and then change the extension to .zip then change the source code.
Or since you can already inspect the DOM of the widget you can do: give a class to the widgets root DOM element. and then using cascading CSS selectors you can drill down to the element which affects background.
Fullpage js navigation dots don’t change in size as I scroll between sections. Other navigation interactions work fine: the dots increase in size on hover and they are linked/anchored to the appropriate sections.
How can I make the dots change in size upon section transition? Thank you!
The default navigation bullets change size as you can see here. So unless you provide us with an codepen or jsfiiddle where we can't see this, my best guess is that you are not importing the CSS file or you are overwriting it's styles somehow.
I'm quite new to Vuetify and struggling to figure out how themes, components and text colors work together (if they do at all).
I want to work with theme color names in my templates like primary, secondary, warning, error and assign colors to those keywords by adding a new theme or overwriting the existing one.
This all works out of the box but the problem is I can't figure out how to set text colors in the same way. I want to assign a primary-text-color, secondary-text-color, etc. and have it automatically use the correct text color by default.
Text colors seem to change automatically when I change the color on buttons but nowhere else.
If I add a theme color to buttons, Vuetify automatically changes the text color to be readable, for example (just using the default theme):
<v-btn color='primary'>Test</v-btn>
Text will change to primary and the button will be perfectly usable
while a lighter color will have dark text:
<v-btn>Test</v-btn>
But other components don't behave the same. For example a v-app-bar component with default color has dark text on a light background, but a primary app bar keeps the dark text on a blue background.
It looks like I need to explicitly change the text color with a helper class or similar, and even then I'd have to use something like white--text instead of primary--text (which just applies the actual primary color to text).
I think I've read all the docs on the website but I can't find any reference to this particular problem
Sorry for the links to images, I don't have enough flair to embed them in my post.
currently, this works primary--text
<v-list-item-title v-if="company_name" class="title primary--text">
{{ company_name.company_name }}
</v-list-item-title>
I have just upgraded to CKEditor 4.4.5 from 3.5, and notice quite a few changes !! One of the changes is the new skin called Moono which looks great. However it did get me wondering whether it would be possible to change the black in the menu icons to a custom colour, for branding reasons for example. We do this in the rest of the web application using a combination of Server code and CSS.
Many thanks.
Toolbar icons in Moono are images, so if you want to change them, you'd need to create a new skin or use an alternative one from the CKEditor Addons Repository.
However, since Moono is a monochromatic skin, maybe for branding purposes it would be enough for you to use the so-called "chameleon feature" that lets you change the UI color with a simple configuration option?
If so, just use config.uiColor to provide a mataching RGB color value or an HTML color name, as in:
config.uiColor = '#AADC6E';
See a working example here: http://sdk.ckeditor.com/samples/uicolor.html