Enhance the appearance of vuetify component with vibrant colors

I've been experimenting with the Vuetify expansion panel UI component and I'm having trouble adding color to it. I tried using color="#26c6da" on multiple components, but it's not working as expected.

<template>
  <v-container row fill-height justify-center style="max-width: 1200px" class="mx-auto" color="#26c6da">
    <v-flex  class="mx-auto" color="#26c6da">
      <v-expansion-panel style="max-width: 1200px" class="mx-auto" color="#26c6da" >
        <v-expansion-panel-content v-for="(item,i) in items" :key="i">
          <div slot="header" class="headline font-weight-bold">{{item.header}}</div>
          <v-card >
            <v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-flex>
  </v-container>

Here is a link to the component codepen:

https://codepen.io/anon/pen/OdJKqm?&editable=true&editors=101

Any suggestions on how to make this work?

cssvue.jsvuejs2vue-componentvuetify.js

Answer №1

One way to enhance the look of your elements is by adding a standard style attribute like 

style="background:#26c6da;color:white"
: 

new Vue({
  el: '#app',

})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5d5e4e5f424d526b1a051f051b">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3c3f2f3e232c330a7b647e647a">[email protected]</a>/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(item,i) in 5" :key="i" style="background:#26c6da;color:white">
        <div slot="header">Item</div>
        <v-card>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The bottom section is not properly positioned

For some reason, my HTML and CSS are not functioning correctly. I am particularly confused about the behavior of the span element, as it seems to be working fine on other pages. The footer does not seem to be interacting with any elements, causing it to s ...

htmlcss

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

cssfacebook

The textboxes are not displaying the floating numbers correctly

My issue involves 3 textareas with numbers displayed next to them. While I previously used a CSS table layout, it became inefficient when adding content between each row. I am puzzled as to why the second number, "2)", appears positioned next to the first ...

htmlcss

Displaying items in a row when the navbar is collapsed: Bootstrap 4 tips

Is there a way to change the display of items in the collapsed navbar so that they appear next to each other rather than in a column? You can see how it currently looks here: Navbar collapsed. My goal is to have the image displayed next to the username ins ...

htmlcssbootstrap-4

Is it possible to utilize conditional formatting with BootstrapVue's <b-form-select> component?

In my Vue component, I have a <b-form-input>. The :options are set to an array of email addresses. These email addresses represent users that the current user can start a chat with. However, I have encountered an issue where the currently logged in ...

vue.jsbootstrap-vue

Adjusting page size while maintaining background image continuity

On my webpage, there are animations that intentionally change the height of the page. Initially, when the page loads and the height is set to 100%, the background image covers the entire page. However, as the animations run, the page height can exceed 100% ...

javascriptjqueryhtmlcss

jQuery will not carry out the initial trigger action more than once

I've successfully implemented a feature where clicking on one of the 3 divs causes the main container to slide half away by 600px and reveal a new container with additional options. However, I'm facing an issue where after closing the new content ...

javascriptjqueryhtmlcss

The parent navigation bar in HTML and CSS is hogging more space compared to its children

In the midst of my vuejs project, I have encountered an issue relating to the size of elements. Specifically, my header consists of a logo and a navbar. The navbar seems to be extending the size of the header unnecessarily. Upon inspection, I noticed tha ...

htmlcssvue.js

The scrollbar extended to match the full height of the screen

I am looking to implement a scroll bar for the first div if its content exceeds the screen size, while I want the second div to stretch along the height of the screen. How can I enable a scrollbar for the first div when overflow: scroll; does not work? ...

htmlcssbootstrap-4

What is the Vue.js alternative to setTimeout?

I'm currently in the process of developing a shopping cart feature using Laravel and Vue. In my system, when an item is added to the shopping basket, I want to display a confirmation message by toggling a Vue variable that is being monitored through a ...

javascriptvue.js

Tips for reducing noise on your website during the deployment process

Currently in the process of creating a website and incorporating fonts from Google Webfonts. While these fonts appear sleek and flawless on Google's own site, once implemented onto my own site they seem quite noisy. Any suggestions for how to prevent ...

htmlcss

Tips for customizing the clicked-button color of the navigation bar's drop down lists

Excuse me, I have a couple of queries: 1) Currently, I am working on designing a sample website. I am facing an issue with the Dropdown list button (Our Softwares). When I click on it, everything works fine except for its Color. Instead of changing to gre ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to position images and URLs in div elements using CSS?

Currently, I am on a journey to become a Front End Developer through Udacity. As part of my learning process, I have a project that needs to be submitted. Unfortunately, I encountered some issues that I couldn't resolve on my own. Specifically, I&apos ...

htmlcss

Tips for toggling an Electron.js submenu within a Vue.js Component based on a particular Vuex state

I've searched everywhere for a solution to this issue. Currently, I am working on a sample vue-vuex-electron app that I have developed. My goal is to dynamically enable or disable certain submenus within the app based on the vuex state 'isLogged ...

vue.jselectronvuex

Transforming the sentence into a particular keyboard symbol

Looking for a way to transform this code snippet: <tr> <td width="100%" bgcolor="#96002D" height="3" style="font-size: 1px; line-height: 1px;">&nbsp;</td> </tr> From just a single line into a series of "/" characters like so ...

htmlcss

What could be causing the inability of Firefox4 to render the background color of the li element?

Is there a way to apply a background color to a forced inline element? I am having issues with displaying the background color in Firefox4, while it works fine in IE7. Can someone help me understand why this is happening and how to fix it? You can view th ...

htmlcss

Generate a new nested div if there is already a different child present at the specified coordinates (x, y)

My goal is to add a textarea to a sidebar on the right whenever a click is made on the page. The current code I have is as follows: $('#page_to_be_clicked').click(function(e){ var offset = $(this).offset(); var comment_box_y_coord = e.pa ...

javascriptjqueryhtmlcssposition

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Vue.js dynamic components - render components dynamically after data has been successfully fetched within the component

I've been working on implementing dynamic components in Vue.js, but I'm having trouble figuring out how to display the component only after it has fetched its data. Until then, it should show the previous component. Here's the scenario: Whe ...

javascriptvue.jsvue-component

Floating Feature on Vizio Intelligent Television App

I am facing an issue with the Vizio Smart TV app where a strange hover effect appears and moves when a key is pressed. The expected key press functionality does not work as intended, and it seems like Vizio's own hovering and navigation features are t ...

jquerycsshtmlsmart-tv