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
trying to get my head around sass/scss and variables.
I'm trying to have a different URL path to images based on a theme light/dark.
So I have this variable setup:
$icon-url: "/templates/default/images/network-icons/";
I then want to do something like this to have it inside each different icon used:
background-image: url($icon-url+"twitter.svg");
That doesn't work, can't quite get it right, got any pointers?
You can make it work like this:
// import
$icon-url: '/templates/default/images/network-icons/';
// declaration
.foo {
background-image: url('#{$icon-url}twitter.svg');
}
which results in compiled CSS:
.foo {
background-image: url("/templates/default/images/network-icons/twitter.svg");
}
The key here is the #{variable} which replaces the variable with the assigned value to the variable. Read more about interpolation in the Sass documentation.
Related
This question already has answers here:
How can I define colors as variables in CSS?
(19 answers)
Closed 1 year ago.
I'm trying to figure out how to be able to create, what I think, is called a utility class for a particular set of colors in my color theme to help get rid of unnecessary code, and just be able to type the name -- ei - primary-green -- instead of the color code.
For example
.titleAbout {
color: primary-green;
}
I know I can do it with Sass and scss, but is there a way to keep it in my css file. I'm developing my own wordpress theme and it wants it to remain in a css.
For examples: in a Sass .scss it would look like this
// Delta Theme Colors
$primary-green: #16571D;
$bg-green: #7fb985;
$title-Purple: #4E1282;
$primary-blue:#3051C7;
$primary-yellow: #F0AF13;
$primary-orange: #D66550;
Thanks!
You can use CSS custom properties or so-called variables.
To declare them use
:root {
--primary-green: #16571d;
--bg-green: #7fb985;
--title-Purple: #4e1282;
--primary-blue: #3051c7;
--primary-yellow: #f0af13;
--primary-orange: #d66550;
}
To use them use var(--property-name)
background-color: var(--primary-orange);
Check it in action below:
:root {
--primary-blue: #3051c7;
}
body {
background-color: var(--primary-blue);
}
Documentation
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 have the following issue : background image was perfectly working, then after deployment it's not, the image is in a folder in the public folder here is my code :
react component :
function Header() {
return (
<div className="bannerContainer">
<div className="banner">
<h1>news reader</h1>
</div>
<h3>USER GUID</h3>
</div>
)
}
css styling :
.banner {
height: 20vh;
width: 100%;
background-image: url('/images/banner1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
'/images/banner1.png' is an absolute path. It will start at whatever is considered to be the root. This can be different for your local environment and deployed environment.
It's best practice to use relative paths, so that it is not dependent on where the root starts:
background-image: url('../relative/path/to/banner1.png'); /* example 1 */
background-image: url('./also/relative/path/to/banner1.png'); /* example 2 */
EDIT: To test whether the problem is with your url, replace your path with a regular image link we know works. Something like:
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
If the image does appear in the background, then the problem is definitely with your image path.
In that case I'd recommend playing around with it. Place the image in the same folder as the CSS file trying to access it, and see if you can get any success there before moving the image further away.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I am using the Discy Wordpress theme.
What css code could I use to hide the share button and author's name from the post loop only.
Here is a screenshot of what I would like to hide
I'd recommend inspecting the elements you want to hide in your browser and add display: none to the class/id on those elements.
Ex. Say I want to hide the 'Your Answer' text here.
I would then add some CSS
h2.space {
display:none;
}
Edit:
Based on your needs there are a couple options:
Edit the templates used by Wordpress to exclude these elements on the necessary pages.
or
Insert some jQuery that will hide the elements on a specific page.
$(document).ready(function() {
if (window.location.href.indexOf("home") > -1) { // What the url contains on the page you don't want these elements to display
$( "h2.space" ).addClass( "hidden" );
}
}
Of course, this solution requires jQuery and a hidden CSS class defined, like:
.hidden {
display: none;
}
Some sort of class like that may already be defined in the Wordpress theme you're using.
Fiddle for this solution: https://jsfiddle.net/p6af32td/
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 3 years ago.
Improve this question
I have two css file for arbaic layout and english layout , so I want to conditionally change the styleurl in component . is possible or not
?
you cannot put a condition in the styleUrls attribute of the component, but instead, you can use something like that:
.some-class {
// your css style
}
// arabic css overrides
._ar {
.some-class {
direction: rtl;
}
}
<div class="parent" [class._ar]="your_condition">
<textarea class="some-class">
</textarea>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm totally Noob and New with programming. I know few thing like where to find CSS, rewriting PhP and stuff like that but it's very limited.
So actually, there is my question :
On my website (Woocommerce on Wordpress), I've got a drop down menu. When you reach the Home page, the drop down work perfectly.
But if you click on one the menu items like "Fleting and Spinning" section, you will see that you can't choose any of the items in the drop down menu because this one will disappear before the mouse cursor can get on to it.
Did someone know where and which CSS (I guess it's gonna be a class or something like that) do I have to modified to get things right ?
WEBSITE : Wordpress Website
Hope I'm at the right place to seek for an answer ^^
Take care...
on lines 3842 - 3846 of /wordpress/wp-content/themes/theretailer/style.css
Change :
.category_header
{
padding: 63px 0;
margin-top: -70px;
}
To :
.category_header
{
padding: 0 0 63px 0 ;
margin-top: -7px;
}
IMPORTANT If this is not a theme you created, you should not make changes directly to it. You should instead create a child theme and make the changes there.