Adding HTML and CSS in Wordpress editor? - html

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;
}

Related

Apply different CSS style to :after element on another page?

I have a navigation, where I use:
.header-link:after { .... background-color: red; .....}
I have this in my global scss stylesheet, affecting all pages.
On one specific page I need this :after element to be different color. When I use the same code and put it in the page specific css style sheet:
.header-link:after { .... background-color: white; .....}
It naturally rewrites the original one and all pages become this new color. As the page specific CSS stylesheet is imported after the global css stylesheet.
How do I apply this new background color, so that only the specific page is affected and it's not rewriting the original one on other pages?
Why don't you use an ID on the page that goes against your rules ?
Normal Css
.header-link:after { .... background-color: red; .....}
Specific Page, but with an id="pageHeaderWhite" on ou per example, and then create the custom rule.
#pageHeaderWhite .header-link:after { .... background-color: white; .....}
Your CSS specificity triggers because a rule with an ID is stronger than a rule with only class: selector.
Hope it works!
apply different classes
use another way of targeting this element - by ID

Two style files and conflict issue in use on one page

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;
}

Overriding a CSS value in a WordPress website

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;
}

Can we edit bootstrap css style without download the packaging?

I used a lot of bootstrap template that I didn't download, when I open the 'inspect' to change the color etc it show a ..bootstrap.min.scss (something like that) link that I can't even open. Is it posibble to modified the template without having the css file in our computer?
you can always override the styles applied by a framework or external style sheet by creating rules that are more specific. Let's say the bootstrap code styles your links, you will have to create a more specific rule that overrules the previous in your own style sheet on your local machine.
Let's say bootstrap styles the a tag, you can give your body a class like:
<body id="cherry">
my link
</body>
in your css file:
#cherry a {
color: magenta;
}
For further reading I recommend: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Multiple External Style sheets?

Hello I want to added a pop-up login screen using downloaded code. However the problem is the CSS file that comes with it conflicts with my exiting one.
Is there any way to have a style sheet just apply within a set of div tags or any other method to make this work? thanks.
You can't make a style sheet only apply within div (or any other) tags, but you could put your login code within a div, give it a specific id (say 'login') and then place #login before all the styles in the login CSS. This will make them only applicable within that div.
So, if for example your login CSS has a line:
form { border: none; }
it would become:
#login form { border: none; }
...and the same for every other entry. That's the easiest way I can think of - assuming of course you can't just have the pop-up load a separate HTML file and not include your main CSS.
You can use Inherited CSS Classes for example -
.newParentClass .theConflictClass{
/*Override unnecessary CSS properties and use the one you wanted*/
/*In case if this doesn't work you can fallback to "!important" */
border: 1px solid #f00 !important;
}