Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
mylayout.razor.css
:root {
--clr-one: blue;
--clr-two: red;
}
.wrapper.normal {
--bg: var(--clr-one);
--clr: var(--clr-two);
}
.wrapper.reversed {
--bg: var(--clr-two);
--clr: var(--clr-one);
}
.title {
background-color: var(--bg);
color: var(--clr);
}
mylayout.razor
<div class="wrapper #Theme">
<div class="title">
My Title
</div>
#Body
</div>
#code {
string Theme = mycondition ? "normal" : "reversed";
}
Using the above, the colors of my "title" will switch depending on the value of "mycondition". I feel like I'm on the way the being able to theme from the layout.
I can now change the :root colors and that will affect the 'themes' so I can play with those base colors until I'm happy.
Given that "title" is a child of "wrapper", I had assumed that the variables --bg and --clr assigned on the "wrapper" would propagate to all child elements. But ...
myroutable.razor.css
.header {
background-color: var(--bg);
}
myroutable.razor
#page "/myroutable"
#layout mylayout
<div class="header">
My Header
</div>
The problem is that the "header" is not getting the value of the --bg variable from the layout.
Hopefully the above explains what I'm after. Any ideas how I might achieve this?
UPDATE
It turns out the problem was a stoopid typo in the child razor component! I'll leave the question here though as the pattern above is one viable way of delivering theming in a razor app.
The pattern outlined in the question is fine.
The problem was a typo in using the variable name in a sub-component, so using the pattern in the question will work for dealing with theming within a particular layout.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to change the font color of part of a client's site and I am getting the errors in the photo below. Can someone please point out the errors in the code? I will also post code below.
`<script type="text/css">
div.nn-review-inner-cont>h2, div.nn-samap-inner-cont>h2 {
color: #000000;
}
div.nn-review-header h3, div.nn-samap-header h3 {
color: #000000;
}
p.nn-review-body, p.nn-samap-body {
color: #000000;
}
div.nn-review-inner-cont, div.nn-samap-inner-cont {
color: #000000;
}
</script>`
Photo of code and errors
CSS text goes inside <style> tags; only JavaScript goes inside <script> tags.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my .screen class to be on its own line. Assuming I can not change the current layout.
<div class="app">
<div class="screen"></div>
</div>
I though that display: block; would do the trick but no.
.screen {
display: block;
}
As of now it all sits on one line. I am only handy with flex and I can't think of anyway flex will help me here.
If you're using flexbox flex-wrap can help. Make the first child 100% wide and put flex-wrap: wrap to the parent.
By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS. There is probably override of <div> style.
Try to use !important to prioritize your style:
.screen {
display: block !important;
}
Also, check the style of div in browser's inspector and provide that info – it would be useful to get more details
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm totally new to coding and just trying to find my feet, I have been given a challenge to do on the course I am taking which I have solved but my solution was to write the same 2 lines of code but in a different order.
Whilst it's great that this worked I'm confused at to why!
Can anyone help me?
This one works
em {
font-size: 20px;
color:white
}
This way doesn't work it completely ignores my request for color and font size and leaves it with the rules I set in an earlier part of the code.
em {
color:white
font-size: 20px;
}
I would expect both ways to work as my understanding was CSS reads from top to bottom and this is the bottom of the code so there's nothing which can negate this rule.
It looks like you're missing a semi-colon on the colour:
p {
color: red;
}
em {
font-size: 20px;
color: black;
}
em {
color: blue;
font-size: 20px;
}
<p> Test <em>Word</em></p>
This should work for you, you're right that the styling should cascade down.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Certain links are hard to read on this page:
http://jackswebdesign.co.uk/adl/portfolio-type/
Commercial, Kitchen Modelling, etc.
I've tried adding this to the style.css file
meta-progression-port a:link {
color: black !important;
}
But it won't work.
It looks like you're not setting a selector. Is meta-progression-port an ID or class? There should be '#' or '.' in front of it.
You need to add the "." to target the class (which is what "meta-progression-port" is)
Your CSS should be:
.meta-progression-port a:link {
color: black !important;
}
For the big links:
.portfolio-index-title a {
color: #000;
}
For the smaller links:
.meta-progression-port ul li a {
color: #000;
}
Where #000 - is the color you want.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.