Include HTML + CSS files without collisions - html

I have a HTML header template with its own style sheet. This HTML code is complex, it contains menu's, different blocks and other floating elements. The CSS file contains styles from whole website. It total 800 selectors.
When I just include the HTML and the CSS in my existing website, it breaks. This is due the fact that a lot of CSS rules are interfering with the rules of the website. For example CSS from the header template has a selector with name ".nav" and the website has that too. Because both of them have different rules, the website breaks.
My question is how do I 'include' this HTML file in an existing website without complete recoding.
I though the following: process the styles from the template and give each a unique name. So every '#body' becomes "#body-1", every ".nav" bocomes ".nav-1", etc. Doing this by hand will take a while.
Is there a tool which could do this?

Use what I call "CSS Namespacing".
Change the CSS rules for the new page such that they are contextual to an ID or class.
For example, take this:
.nav // nav for new page
{
blah: blah;
}
and make it this:
#NewyThingy .nav
{
blah: blah;
}
And surround the newly included page in div with id="NewyThingy".
Or
.NewyThingy .nav
{
blah: blah:
}
and change the body tag of the newly include page to have class="NewyThingy".

Related

CSS selector for an :after element if body has class

I'm desperately trying to hide an automated added image on a checkout page.
I'm trying to select the element div.panel-body:after which is on a page that has a body class.
I've tried:
body.offer-checkout-offer-311523 div.panel-body:after {
display: none !important;
}
div.panel-body is not a direct child of body that's why I used a space between the selectors instead of > But despite my attempts, the image does not hide.
Any clue?
Edit:
the HTML element I'm trying to edit:IT's the ::after I'm trying to target
HTML code
I've tried to export the whole path to the element but...
Edit2:
This is my website, It's probably easier if I show the page here: photoserge.com/offers/yDBpDfqi/checkout?coupon_code=FBPSQS
I'm trying to hide the credit card images but only on this page. The whole site uses the same checkout page thats why I'm trying to target only this specific instance.
Maybe try:
.checkout-panel .panel-body::after{
display: none
}
I just tried by inspecting the page.
Also, if you want to target this specific page. You will have to remember to add the css to only this page, and not add this code to a global css file.

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

How can I include multiple CSS without overwriting the existing CSS?

I am using a template (A). This has some CSS files and I want to inlcude an other template (B) in this template and the other template has also some CSS files. By including the css of template B in A, some forms are looking different because of the new CSS of template B.
How can I inlcude all CSS files of both template without replacing some forms.... Can I set a priority to one CSS? Or is there a tool where I can put more CSS files which will compress all CSS files to one?
Or can I use one CSS file to only one DIV?
CSS means "Cascading Style Sheets". Here "Cascading" means that If something is found two times than the last has priority. So link the CSS file at last which you want to give priority. You can also use !important to give priority. For instance:
color: red !important;
Here red will be used overall.
I’m not completely sure what you are trying to do.
However assuming you want to link more than 1 css file to page. You could play with priorities of CSS selectors. An ID for example has more priority than a Class. You could also make them more specific.
For example:
body ul li span {
Color: red;
}
Span {
Color: blue;
}
Here the span should be red
You should try to include the CSS you want for your login page only (template (B)) into your login page HTML only, like for instance:
index.html file :
<link rel="stylesheet" href="templateA.css">
login.html file :
<link rel="stylesheet" href="templateB.css">
The objective if simply to avoid conflicts between both template, you cannot use both of them on the same page it will cause a lot of bugs and slowdown your website a lot.
Please feel free to ask me in the comment if I'm not clear about anything.

Adding HTML and CSS in Wordpress editor?

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

Html pages and one css page

I am currently making a website for my college project and I want to make it as good as possible. I basically want to have several HTML pages for my website which I have setup but I want to use only the one CSS page. So basically if I edit one page, for example my second page, how do I change the look of it without editing any of the CSS for my first page. I have tried several things but I honestly have no idea.
Any help is appreciated and thank you in advance.
You cannot just change the layout of each page in CSS, CSS is not aware of what the page you are at.
Either do you change the layout by changing the whole CSS file. Or you try to put the CSS special functions for that page inside the page elements.
Otherwise you can't do that!
For example:
You can create a single CSS file and link it as:
<link rel="stylesheet" href="site.css" type="text/css">
Then in each page, where you want the style to be different you can change the style inline:
<element style="property: value; property_2: value_2;"></element>
Like this!
How about adding a class to the body tag on the second page, then specifying the style that are just for that page by using the class.
Page one:
<body>
<p>This page is boring</p>
</body>
Page two:
<body class="page-two">
<p>That's a mighty fine body</p>
</body>
Then your CSS could be
p {
background: white;
}
.page-two p {
background: red;
}
If you have a lot of extra CSS to apply to the second page, then you might consider using LESS or something similar to make your life easier.
Your best method is to have an app.css file that has global settings like height, width... and then have specific page files index.css, portfolio.css.. that have specific styles like colors.
You can specify your button general style in your app.css, and then more specific styles in each page css file.
app.css:
button{
height: 30px;
width: 150px;
border: 1px solid purple;
color: purple;
}
index.css:
button{
border: 1px solid black;
color: black;
}
Add the app.css to each html file, and then only the specific page css file to each html file. This will make it easy to expand in the future.
You need to create a template for your HTML pages and then link an external style sheet in your <head> section of each page like this:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Then for any special cases that are not part of the template, you can link additional style sheets. Just a side note, embedding styles in elements directly is harder to maintain than linking multiple CSS files.
If you are allowed to use JavaScript, you might like to use a JavaScript template engine like Handlebar.js.
The beauty of template engines is that you can define sections and create dynamic HTML. This may be more complex than what you're wanting here, but it is very cool.
A large list of template engines can be found here: http://garann.github.io/template-chooser/