MudBlazor Hintergrundfarbe Content Page ändern?

Hallo,

ich arbeite mich gerade in MudBlazor ein. Es ist wirklich ein sehr gutes Framework, mit einer überragenden Dokumentation.

Allerdings stoße ich auf ein Problem, auf das ich einfach keine Lösung finden kann.

Wie kann ich die Hintergrundfarbe im MainLayout ändern?

Ich könnte das auch für jede Seite machen, was ja aber irgendwie sinnfrei wäre, wenn alle dieselbe Hintergrundfarbe haben sollen.

Meine MainLayout.cs sieht momentan so aus.

Bild zum Beitrag

Ich habe es auch schon mit style Background-color probiert, leider ohne Erfolg.

Hat jemand eine Idee?

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

25.03.2022, 01:49

Um konsistent zu sein, wäre es wohl angebracht, ein Theme mit den eigenen Anpassungen zu setzen. Der Code gehört in die MainLayout.razor:

<MudThemeProvider Theme="MyTheme" />

@code {
  MudTheme MyTheme = new MudTheme
  {
    Palette = new Palette
    {
      Background = Colors.Red.Default
    },
    PaletteDark = new Palette
    {
      Background = Colors.Indigo.Default
    }
  };
}

Welche Farben es so bereits gibt, verrät die Dokumentation unter List of Material Colors. Ansonsten kannst du auch einen String im typischen Hexadezimalformat angeben. Wie sich das Default Theme gestaltet, wird hier aufgeführt.

Tastaturbrix

Beitragsersteller

27.03.2022, 12:42

+1 für dich, danke

Ähnliche Beiträge

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

Wie ändere ich die Hintergrundfarbe meiner Webseite mit CSS?

Hallo, ich möchte gerne die Hintergrundfarbe meiner gesamten Webseite ändern, aber es funktioniert nicht, wie es sollte. An der Verlinkung in der HTML Datei kann es nicht liegen, da ich die Farbe von h1 ändern kann. Aber die Hintergrundfarbe von sowohl body als auch header lässt sich nicht ändern. Hat jemand eine Ahnung, woran das liegen könnte? Danke schonmal im vorraus

body{
  background-color: rgb(112, 224, 108);
  }
header{
      background-color: red;
  }
h1{
      color:red;margin-bottom: 100px;
  }

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

DIV Background Color bei Mouse-Enter zufällig ändern?

Hallo,
ich habe ein ganz normales HTML ELement und möchte, dass sich bei einem Mouse-Enter die Farbe ändert. Die Farbe soll sich zufällig durch voreingestelle Hexcodes ändern (Heist ich geb an #FF8000, #2E64FE, #F5BCA9 und er soll eine Farbe davon nehmen).

Das ganze soll KEIN Hover sein, d.h soll die Farbe bis zum nächsten Mouse-Enter bestehen bleiben.

Gibts es da ne einfache Lösung oder muss ich imch in Java-Script einarbeiten?
Technisch bin ich nicht ganz so fit.
Danke schonmal im Vorraus.

...zum Beitrag

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...zum Beitrag

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

CSS!important?

Hallo

Ich habe das Problem, wenn ich mein (s)css an die Handyansicht anpasse, dann muss ich die Werte im Media Query immer mit !important überschreiben.

Wie kann ich das ändern oder wie löse ich es ohne important?

Danke im voraus

...zum Beitrag

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zum Beitrag

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen