I haved tried to modify the css of a plugin background-color: blue . I have added in the correct file:
.woocommerce ul#shipping_method {
display: none;
background-color: blue;
}
Inspecting the shipping method I can see the code is just display:none. I also see the css file from which this css comes, and opening it on "Sources" would not display my change.
I have also tried to override the file in my child theme like:
Parent structure of the file :
/wp-content/plugins/shipping-zones-by-drawing-for-woocommerce/assets/szbd.css
Child structure :
/wp-content/themes/my-theme/shipping-zones-by-drawing-for-woocommerce/assets/szbd.css
Still I can only see the original css file in the Google Chromes's Sources tab.
Maybe it has something to do with the way it is loaded in the .js file: wp_enqueue_style('shipping-del-aro-style', SZBD_PLUGINDIRURL . 'assets/szbd.css', SZBD_VERSION);
Related
I have an anomaly. So, I'm trying to edit\remove the background in the .site-header-main of my of a site. I edited via theme editor however, seems that such is not taking as the code is in the index file. Here is the website: https://retrocarsales.com/
Code in theme CSS after change via style.cc and\or theme editor:
.site-header-main, .site-description, .site-title-text a {
background: none;
}
.site-header-main {
border-bottom: none;
}
Code in (Index):258 when inspecting:
.site-header-main, .site-description, .site-title-text a {
background: #444444!important;
color: #ffffff!important;
}
.site-header-main {
border-bottom: 1px solid #444444!important;
}
NOTE: The code above is NOT found in Domain\WP-Content\Theme\index or in Domain\index I only find the related code in domain/wp-content/themes/theme-name/style.css in which there its good but its not executed on live site ... seems the site gets code from index not style.css
Thank You
You should never direct edit the theme's file if you are not a developer - this may be break your site or even make your site down if you make mistakes.
Instead of that, you can safely add your custom CSS by go to Appearance > Customize > Additional CSS (remember to add "!important" to overwrite current CSS rules).
See below image for more detail:
Editing sass/scss is working via source maps only through code editor in devtools.
But when i make changes in elements -> styles tab, these changes are not saved to sass/scss file.
For example, if I change border-radius to another value, it will not be saved to scss file.
Here is my scss code
.SiteBuilder .e-row__select {
position: relative;
&:after {
content: '';
}
select {
border-radius: 4px;
}
}
The styles you see from inspector are coming only from css files.
You can see the "sass/scss" source for each css property because there is a *.css.map associated with the current css file. The *.css.map file is generated from the sass compiler.
Every change you make on the Styles tab is not saved anywhere.
In order to make css changes you could use Chrome Devtools "Local Overrides" or "Workspaces". But even on this case you could edit the css or scss files from the Sources tab, not from the inspector.
I'm using a video plugin for my wordpress site.
I want to change the width of the videos.
However it seems like I'm not using the correct path for the id, as I'm not seeing any changes from my css styling.
This is the info I have gotten from using the editor in chrome:
I want to change the inline styling, so I read I had to use !important to overrule it. But for testing I just used bg-color.
I have tried to access the video with these attempts with no success:
.vjs-tech {
background-color: red;
}
#player_html5_api.vjs-tech {
background-color: red;
}
#player_html5_api {
background-color: red;
}
video#player_html5_api {
background-color: red;
}
After a good chat with Gosi, I found the issue to be the video I wanted to be changed had its css located in another folder than the regular wordpress css folder, since it's a plugin. So I had to go in the plugins css folder and make my changes there.
I am facing header media issues. I don't want that header area on my top of the website. I tried CSS code
.home #wp-custom-header {
display: none;"
}
but it's not working. please check my site for more details hindizone.in
It would be a better solution to change your theme template file so there is no such div container to be hidden. This can normally be found in header.php file of your theme. Delete the div with the class header-bottom.
Another way would be using CSS as you already tried. But you do not have an element with id wp-custom-header so this code is doing nothing. You can find out the right element to target with using the inspector of your browser.
I did this with your code and therefore found the classes you need to address in your css file.
Add following code to your custom css in the theme editor, or inside style.css of your theme:
#site-header.top-header .header-bottom {
display: none !important;
}
With the !important statement you make sure, that the display value is not being overwritten somewhere else in your stylesheet.
#site-header {
display: none;
}
...should work for your site.
I installed that angular2 plugin called "ng-daterangepicker" , then I wanted to resize a div inside it, I changed the .sass file but nothing changes on my browser (I cleared the cache but still not working) , I think that I should modify .scss files but I found none on the plugin, I found just plain sass files.
.calendar-container
display: inline-block
width: 330px
height: 100%
padding: 20px
border-right: 1px solid $border-light
float: left
I changed the width from 340px to 330px, but on the browser I still find that 340px.
here is the strange part : I deleted the .sass file but everything is still working, so I think that maybe the component gets its styles from somewhere else.
Usually, it's a bad idea to change the source code of a plugin. In case you update the component or reinstall the project, every custom change you added to that specific plugin will be discarded.
What you can do instead is to add a CSS class to the directive like so:
<!-- app.component.html -->
<ng-daterangepicker class="myCustomDateRange" [(ngModel)]="value" [options]="options"></ng-daterangepicker>
and then point to the element you need and add custom CSS for it in one of your SCSS files.
<!-- someStylesFile.scss -->
.myCustomDateRange .ng-daterangepicker .calendar .calendar-container { width: 330px; }