I am currently working on the CSS-styling of a Warning statement.
This is a icon + a statement in this specific case. The code is as follow:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
It works all fine, but now my question!
Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.
Now it would be great if I can manage a import at var-ID level.
I was actually wondering if css can do this.
cheers,
Frank
Are you using a CSS preprocessor like SASS or LESS?
Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.
Another suggestion is that you can maybe add a class for each language and then change the content based on the class.
eg:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
$sSCP .warning.french:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ATTENTION"; /* <-- Font icon + statement*/
}
$sSCP .warning.spanish {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ADVERTENCIA"; /* <-- Font icon + statement*/
}
Related
I have many files with overlapping HTML/CSS (e.g nav bar, contact info). Is there a way for me to store these codes so that if I need to make changes, I only have to edit the one file instead of going through all my files? I've seen people use JavaScript, but I've only seen it applied to HTML, not HTML AND CSS.
Here's my CSS for contact info, for example:
.fa-envelope {
color: black;
text-decoration: none;
}
.fa-envelope:hover {
color: #8790ff;
transition: 1s;
}
.fa-linkedin-in {
color: black;
text-decoration: none;
}
.fa-linkedin-in:hover {
color: #8790ff;
transition: 1s;
}
.fa-github {
color: black;
text-decoration: none;
}
.fa-github:hover {
color: #8790ff;
transition: 1s;
}
#media screen and (max-width: 599px) {
.fa-envelope {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 25px;
font-size: 20px;
}
.fa-linkedin-in {
padding: 50px 25px 50px 25px;
font-size: 20px;
}
.fa-github {
padding: 50px 25px 50px 25px;
font-size: 20px;
}
}
#media screen and (min-width: 600px) and (max-width: 999px) {
.fa-envelope {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 25px;
font-size: 25px;
}
.fa-linkedin-in {
padding: 50px 25px 50px 25px;
font-size: 25px;
}
.fa-github {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 25px;
font-size: 25px;
}
}
#media screen and (min-width: 1000px) and (max-width: 1024px) {
.fa-envelope {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 25px;
font-size: 30px;
}
.fa-linkedin-in {
padding: 50px 25px 50px 25px;
font-size: 30px;
}
.fa-github {
padding: 50px 25px 50px 25px;
font-size: 30px;
}
}
#media screen and (min-width: 1025px) {
.fa-envelope {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 25px;
font-size: 30px;
}
.fa-linkedin-in {
padding: 50px 25px 50px 25px;
font-size: 30px;
}
.fa-github {
padding: 50px 25px 50px 25px;
font-size: 30px;
}
}
HTML
<head>
<script src="https://kit.fontawesome.com/3fdadcecb8.js"></script>
</head>
<body>
<div align = "center">
<a href = "https://www.linkedin.com/in/angela-liu-8a281716a/" class = "fab fa-linkedin-
in"></a>
</div>
</body>
I'd want the contact info to be on the bottom of every page. How would I import this?
You cannot "include" HTML documents in other HTML documents using HTML.
For XHTML, there's techically XInclude, but I doubt any browser supports it for more than testing purpose since heavy usage of XML never became popular on the web.
This means: you're stuck with using server-side mechanisms to assemble your document from parts before sending it to the client. It's somehow outside the scope of a single quesiton on SO to name every possible way there is, but some examples might include:
specific web-server specific mechanisms such as Apache's SSI (or similar modules for other webservers)
server side scripting languages such as NodeJS, PHP or ASP
template engines.
Alternatively you can use client side Javascript and asynchronous background requests (AJAX) to load the additional document and attach it to your DOM. You can also load CSS this way - or just include the CSS right away with a <link> tag.
Well, in case of CSS, you may simply include it on all the pages you wish (using for instance <link> tag).
HTML case is kind of harder. What you are looking for is commonly referred to as "templating".
There's no (or at least, I never heard of) native way to create HTML templates.
Said this, you got 3 good & fairly common options:
If your site has any backend, you should be able create HTML templates using backend language of your choice (for example, Node.js). This way you could split your HTML into pieces commonly called "partials".
You can construct an SPA application using something like React, Vue or Angular. This way you could split your HTML into pieces called "components".
You could also generate a static website with static website generator like Gatsby, Next or Nuxt. This way of development is very similar to point 2.
The link tag adds a link to the stylesheet. You just need to create a css file with that css in it.
<link rel="stylesheet" type="text/css" href="url_of_stylesheet" hreflang="en>
You can use PHP for that it's much easier to include one file into other files with PHP that with plain HTML.
Solutions
With PHP
<?php
include('filename.php');
?>
Writing your code in JS and including the file where you want
<script src="file_name.js"></script>
I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet.
I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
What's the possible solution?
You need to download the Bootstrap Sass files. You can do so from this link.
Once you have them you can open the main bootstrap .scss file and search for:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.
Source: https://getbootstrap.com/docs/4.3/getting-started/theming/
You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Bootstrap 4 also works on the variables
You can try changing the variable values at run time as mentioned below:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
// get variable from inline style
element.style.getPropertyValue("--main-bg-color");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");
// set variable on inline style
element.style.setProperty("--main-bg-color", "red");
There are different ways do it. I am describing one of them.
Import below lines to your scss file.
#import '~bootstrap/scss/bootstrap.scss';
After that write below code to override it.
$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
#include button-variant($primary, $primary, $primary, $primary);
&.disabled,
&:disabled {
border: $gray;
background-color: $gray;
}
&:hover {
opacity: 0.85;
}
}
}
Check the link to use sass mixins to override bootsrap classes.
Simple question... how I can resize p-checkbox?
Without primeng I did something like
<p-checkbox style="transform: scale(2.0)"></p-checkbox>
But with primeng Im getting
Error: Cannot find a differ supporting object 'transform: scale(2.0)'
at ...
How to make checkbox bigger then?
You can do it by simply overwriting their css. First, change the size of the checkbox.
You have to set both classes below for the checkbox to be centered:
body .ui-chkbox {
width: 25px;
height: 25px;
}
body .ui-chkbox .ui-chkbox-box {
width: 25px;
height: 25px;
}
Then you can modify the size of the checkmark:
body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
font-size: 20px;
}
And if needed you might also want to change the offset of the label:
body .ui-chkbox-label {
margin: 0 0 0 0.8em;
}
This solution might not fit all scenarios but it worked for my case.
/*Increase p-checkbox size*/
:host ::ng-deep .ui-chkbox .ui-chkbox-box {
width: 2em;
height: 2em;
}
You can specify width and height in the CSS, for example:
.p-checkbox .p-checkbox-box {
width: 14px;
height: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
font-size: 8px;
}
EDITED::::: Have simplified trying to figure out what the problem is. Below is what I currently have:
Inspect element(portion with .navbar):
#media (min-width: 768px)
.navbar {
border-radius: 4px;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
localhost/media="all"
.navbar {
border-radius: 0px;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white;
}
Text editor, I have this both in my pages.css.scss & my application.css.scss
#import 'bootstrap';
.navbar {
padding-top: 50px;
}
The inspect element is not picking up this change in the in padding-top at all. Also my application.css.scss says CSS at the bottom right while my pages.css.scss says Sass in the bottom right may this be the problem?
That is not CSS you are editing but a file with a SCSS extension . i.e. Sass. But in the bottom right corner you are editing it as a CSS file...click this to change it to Sass. (If you have installed Sass in the package manager)
The question is though do you know this is a Sass file or where you just hoping to create a CSS file?
Alright, if you want to enforce your "striked through" styles, you can use the !important declaration. Such as:
.navbar {
border-radius: 0px !important;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white !important;
}
Watch out for media queries that Boostrap uses all over the place though .. especially for important components like the navbar. It will affect the style for all screen width then.
I have a table that is custom created and have it styled in the .ascx, through CSS. See below:
<style>
.divTable {
display: block;
height: auto;
width: calc(100% - 25%);
font: normal 12px/150% Arial, Helvetica, sans-serif;
overflow: hidden;
text-align: left;
}
.divBody {
position: relative;
height: calc(100% - 42px);
border: 2px solid #000000;
font-size: 12px;
font-weight: normal;
top: 0px;
left: 0px;
right: 0px;
overflow-x: scroll;
overflow-y: scroll;
color: #383838;
width: auto;
height: 500px; -- this is the one I am trying to get to be the custom height; either 500px if on a view tab or auto if on another tab.
}
....
</style>
Now, this is in a custom control called DataGridForDetails. When I bring this in to a 'VIEW' page, then it lists things perfectly, looks great. However, I have a 'DETAILS' sheet that has this control being re-used for other data that may or may not have as many items in the table (i.e the user clicks on a row in the view, takes them to the details page that has 2 of these datagrids that display asset costs and timesheet costs).
I want to be able to re-use this datagrid so that it 'can' be 500px height on the view tabs, however, to be auto height when it's on the other pages.
Is there any way of doing this? I've tried using !important, .style1.style2. Everything short of creating a new control purely for the other pages (maybe this is what needs to be done?).
Cheers.
One suggestion
design your user control as u like with divs and tables
create a seperate css file for view tabs
create a different css file for other pages
and use id selection in css. That is use #div , #Table etc. So it will affect all divs on that page.
Apply css carefully on to respective pages.
I am not sure it's the best way.
So rather than creating a separate CSS style sheet, I modified the original CSS styling and class names, then in the code behind, depending on whether it is a 'VIEW' tab or other tab, I run an if else statement and assign the corresponding class to the grid.
It may not be pretty, but it works.
Hope this helps.
Cheers.
If Request.RawUrl.Contains("VIEW") Then
sb.AppendLine("<div class='divBodyView' id='" & TableName & "'>")
Else
sb.AppendLine("<div class='divBodyOther' id='" & TableName & "'>")
End If
.divBodyView {
position: relative;
border: 2px solid #000000;
font-size: 12px;
font-weight: normal;
top: 0px;
left: 0px;
right: 0px;
overflow-x: scroll;
overflow-y: scroll;
color: #383838;
width: 100%;
height: 100%;
}
.divBodyOther {
position: relative;
border: 2px solid #000000;
font-size: 12px;
font-weight: normal;
top: 0px;
left: 0px;
right: 0px;
overflow-x: scroll;
overflow-y: scroll;
color: #383838;
width: 100%;
height: 100%;
}