My html code:
<div class="row header_div">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 logo_grid">
<img src="img/logo.png" class="focus" >
</div>
</div>
My scss code:
div.header_div {
background-color: green;
div.logo_grid {
border: 2px solid blue;
img {
width: 50%;
padding: 10px
}
}
}
In Chrome version 38 just first 2 line from scss are recognized. I used 2 online scss compiler code (http://beautifytools.com/scss-compiler.php and https://www.sassmeister.com/) and i receive few line of css code. If i will replace my code with css generated code, all style will be recognized. My question is what is wrong in my code.
Browsers does not understand sass/scss/less, it can only understand css.
Sass/scss is just a CSS pre-processor which helps to reduce repetition with CSS and saves time.
So, whenever you are using sass/scss, you need to pre-compile it which will generate some css code and then use those css into your project.
You can use some software like 'koala', 'liveroad', etc to compile your scss file to generate a new css file.
Related
Is there a way of writing CSS to reduce the file size of a style sheet containing lots of adjoining classes. Example...
body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}
hey Use :is selector to reduce the code please check. to learn more about it here
body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37 ) .elementor-widget-spacer {
margin-bottom: 10px;
background: red
}
<div class="elementor-2">
<div class="elementor-element elementor-element-949d9dd ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-427933f">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-cb8ce37 ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
If you use the widget spacer in a different position every single widget makes those classes with the different ids. So you can't reduce the classes.
So if you need not write all the classes on the CSS file.
Use this CSS.
body .elementor-widget-spacer {
margin: 0 !important;
}
or
body .elementor-widget-spacer {
margin: 0;
}
It works with all of the spacer widgets on the webpage.
if you are using elementor.you don't need to do it with custom CSS. Elementor has a dedicated control for this. edit the column, select the layout tab to find widget space, and make it 0. Inside the column, your widget gap will be 0.
Before Doing 0
After Doing 0
Or
you are not using Elementor you can go with :is().To learn more about it follow the article Here
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I want to override the style padding-top:100px to padding-top:0px. How can i override the inline style inside wordpress template?
<!-- Sidebar With Content Section-->
<div class="with-sidebar-wrapper">
<section id="content-section-1" >
<div class="gdlr-full-size-wrapper gdlr-show-all" style="padding-top: 100px; padding-bottom: 0px; background-color: #ffffff; " ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item" style="margin-bottom: 0px;" >
<!-- MasterSlider -->
I already tried the below code in style.css but its not working!
.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}
To select this perticular <div> you to write your CSS like:
.gdlr-full-size-wrapper.gdlr-show-all {
} /*without space between*/
you're using
.gdlr-full-size-wrapper .gdlr-show-all {
}
viz selecting
<div class="gdlr-full-size-wrapper">
<div class="gdlr-show-all"></div>
</div>
Also if you're willing to override inline CSS only then you can use [style] selector also.
As:
<div class="someClass" style="font-size:10px; "></div>
So we can write CSS like:
.someClass[style] { font-size:14px !important}
what's trick here is this CSS only works when someClass has inline CSS for font.
Use following code it will work for both cases if you have one or both classes on div tag.
.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
padding-top:0px !important;
}
Justinas explains it well and that should work perfectly, I have applied the same to custom CSS of a WordPress theme and has worked for me. The CSS I had trouble changing were inline a div.
I am trying to apply a different theme to panels I have displayed on different pages. I am not not that accustomed to working with css and javascript so some help would be appreciated.
<div id="rules" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="back:'DASHBOARD',moveTo:'general'" class="style1">
REALTIME-COUNTS
</h1>
<center>
<div dojoType="dojox.mobile.RoundRect" style="width: 1200px;
height: 400px;" shadow="true">
<h4>TOTAL DAILY RESULTS</h4>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="chartdiv" style="width: 70%; height:342px;"></div>
</div>
</div>
</center>
Now I have a theme.css file added into the project but not sure how to do this. I want to apply to the panel/view above named 'rules'. Is this possible or am I way off here?
What does your theme.css file look like? If you're just trying to apply styles to the "rules" panel and not any other panel at all, then you can do something like this:
#rules {
width: 100%;
}
but if you were trying to reuse this CSS elsewhere then just add a class to your div (with id rules) like this:
<div id="rules" class="mobileView" data-dojo-type="dojox.mobile.View">
and then add a css rule like this:
.mobileView {
width: 100%;
}
Not sure if this is what you're looking for but I could probably help you a little better if you put something into JSFiddle.
I wrote the following CSS:
MyForm.css
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
If i use it in my code:
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
It doesn't work. If I delete the subclass .my-inner it works properly.
Is it really possibe to use the subclass that way?
I would have done something like:
.my-container [class^="col-md"] .my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
...depending of what you try to acheve.
Based on the markup, it looks like you're trying to use a preprocessor like LESS or SASS. The reason the CSS isn't outputting correctly is because you didn't close .my-inner.
If you're using a preprocessor, it should look like this:
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
} <-- forgot this closing tag
}
If you're using plain CSS, see Fredric's answer.
Please change your html code to this
HTML
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
You missed the double quotes , maybe this is causing problem in your html code and also check this for css code.
CSS
.my-container [class^="col-md"]
.my-inner
{
padding : 10 px;
background-color: #eee;
.... etc...
}
Are removing subclass .my-inner from MyForm.css or the HTML page?
As Dead has said, you stylesheet must be after bootstrap's, so I
ask, is that in the correct order?
If you inspect your page in
the browser, can you see your custom properties there?
Try to write you .my-inner class directly (removing .my-container [class^="col-md"]).
If none of that work, try to post more details about.