Been creating a website recently with Elementor.
I have a line of code in the source code of the website saying
img
{
height:auto;
}
Is there any way to add custom css to the website to ignore this line of code and somehow override it?
Yes, via the customizer in WordPress you can.
Navigate inside the wp-admin to:
display -> customizer -> extra CSS
Then inside the textarea just put
img
{
height: 200px; // whatever you wanna overwrite it with
}
Don't forget to click publish!
Or if you have access to the theme editor, you can edit the CSS file there, you can find it under
wp-admin -> display -> Theme editor
Then try to locate the source file where that line of code has been defined.
You can locate the source file by looking in your element inspector using any browser. It will show you which file has that line of code and on which line you can find it.
Following #Red instructions for adding extra CSS on Wordpress, you can also override it by using !important, you can use it everywhere, also before the first declared css as i made in this snippet.
img {
height:50px !important;
}
img {
height:auto;
}
<html>
<img src="https://www.adslzone.net/app/uploads/2019/04/borrar-fondo-imagen.jpg">
</html>
Without !important you need to collocate your new css after the one you want to override.
img {
height:auto;
}
img {
height:50px;
}
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
in my css file there is a class called .header
This class also exists in WordPress' stylesheet
as a result, both style files I call have the same class and the last one has an effect.
as a result, unwanted results occur
the solution is probably this;
#custom-div .header{
color:red;
}
but my style file is too big. It will be very difficult to add this to the beginning of the whole classes.
Is there any other solution?
Wordpress Admin Dashboard > Appearance > Customize > Additional CSS >
#custom-div .header{
color:red !important;
}
This code copy paste and Published.
1- You can change the name of your own style css code.
2- You can write the following code to the style css code in the related page.
#custom-div .header{
color:red !important;
}
I am using a child theme of "freestore". (https://en-gb.wordpress.org/themes/freestore/)
I am attempting to add some content to one of my pages using simple HTML and CSS.
I've managed to successfully change CSS styles in the theme via the style.css, however I am trying to add my own HTML and then CSS to style it.
I have created the page 'home' and through the wordpress tinymce text editor I can add my HTML fine. When I try to add the CSS via my style.css, it doesn't apply the styles. I can however add the styles inline, but I would like to add the styles externally.
Example:
On the wordpress text editor I would add the line:
<div id="cssTest">TEXT</div>
In my style.css file I would add:
#cssTest {
background-color: red;
}
The CSS style is not applied. However adding the following to the HTML editor will work fine:
<div id="cssTest" style="background-color: red;">TEXT</div>
My question is either:
How can I apply my styles via an external stylesheet?
Should I be creating my own template for that page and adding the HTML there?
check if child themes style.css has Text Domain: freestore-child parentthemename-child. Any css id/class element you add would be implemented.
Best way would be to create custom.css file and enque it in your child theme's functions.php via wp_enqueue_style function.
I believe it's best practice to create page template for specific pages like home.
Most likely there is a CSS rule that belongs to your original theme which is more "specific" than the rule you are trying to apply. To check this, inspect the element with the browser tools and look which CSS rule is applied to that element.
If that rule would for example be
.content main .section_1 .gxt1 {
background-color: black;
}
, you'd have to overwrite it adding a rule which has a higher specifity, like
.content main .section_1 .gxt1 #cssTest {
background-color: red;
}
If the original rule contains an !important, you also have to add !important. So to overwrite
.content main .section_1 .gxt1 {
background-color: black !important;
}
, you would need something like
.content main .section_1 .gxt1 #cssTest {
background-color: red !important;
}
For some reason I am unable to set the background color by simple using
body {
background-color: red;
}
Inside off my App.vue file.
I can change the background color by using page-content:
.page-content {
background-color: red;
}
But this is a bad hack because it also messes up my panels and other components.
Is there a sure-fire way to set background color for F7+Vue apps?
Set a classname to your page element as <f7-page class="bg" ..
and css
.bg.page {
background-color: red;
}
it depends on how you are creating your app, if you want to change a single page but no the others then probably you are either using components or having them in separate files, either way you can use a scoped style bracket to specify some css to apply only to a specific component
<style scoped>
your css here...
probably...
.page-content{
background-color:red;
}
</style>
also a good idea is when you are creating a new page give it an id so you can define styles easier and without some unexpected behaviors using the easier method above (scoped style) then you just style that specific content using
#yourID
I have a question about my default print and email icons not displaying in my Joomla powered site.
I enabled them in the Joomla UI, but nothing than a list with both links is displayed.
As I was checking the web I found one reason that this could happen if your using a custom template, and the images are missing.
Now my question is how to get around that with CSS coding?
Thanks for any kind of hint or help.
Assuming you also want to remove the list formatting and your icon files are 16x16 pixel just add the following to your CSS file:
ul.actions {
list-style:none;
float:right
}
.print-icon, .email-icon {
display:inline-block;
width:16px;
height:16px;
text-indent:-3000px;
overflow:hidden;
}
.print-icon {
background-image:url(path/to/yourprintimage.png);
}
.email-icon {
background-image:url(path/to/youremailimage.png);
}
Obviously replace the file names with actual icons ;)