How can i separate WHMCS css and my own HTML css code - html

I downloaded a template that i want to use on my new website.
I also want's to integrate it with WHMCS, but when i try to do it WHMCS get affected by my CSS code that my HTML website have.
Is there easy way to separate these 2 different CSS classes?

Related

How do we manage multiple html pages about css?

I'm totally beginner, and I was wondering about page management in my folder. I'm creating a website that has 5 different pages, that are all located in the same folder. By the way I'm using sass for my css.
At the moment, I only have 1 css file, that was designed originaly for my first page. But now that I'm doing the 4 others, I'm wondering if :
is it ok to create as many css file as I have html pages ? In my case I'd have 5 html page and 5 css.
I don't know how to manage my sass : should I create 5 different package.json files ? Or I can create 5 different scss files, that would be compiled in 5 different css files ? In this case should I create 5 different scripts in my package.json file that would indicate for each scss file the right css file ?
Sorry if my questions are not clear , as well as my english. Thank you so much guys.
I am no expert in sass but I can give you the CSS file management for your HTML file. By the way everyone will have their own suggestion. Create a common CSS file. In this file you will add your default theme for all pages. Then connect it with all the HTML files, And finally for individual CSS for each page, do it in the style tags in your HTML pages.
I don't know a lot about sass either, but for CSS, I would recommend creating one CSS file for all of your HTML files. Then, you can create a base style for all of your pages (styling that's the same for all pages). For individual CSS (CSS that changes per page), you could:
Use classes
Put your individual styling in the style tag in the head of your html page
I think using classes is easier, especially if you have a common style for all of your pages, but it's up to you. Hopefully that helped!

Creating AMP friendly website in an existing website

I have a dynamic blogging website built on NodeJS and Bootstrap 4. The website currently has about 8 JS files and 5 CSS files. It is responsive.
I'm trying to implement AMP but it's throwing all the AMP errors.
My question is:
I cannot remove those JS & CSS files because that's use for Desktop version. How then should I go ahead? Is there a way that I could ask AMP to ignore the desktop CSS and JS files?
You can't use your own JavaScript with AMP. You'll have to remove your JavaScript files and use the elements available within the AMP framework itself.
Here you can find a complete list of AMP components:
https://www.ampproject.org/docs/reference/components
And examples for some of them here:
https://ampbyexample.com/#components
About your CSS: You can't use external stylesheets, you'll have to include them inline. Also note that your CSS has to be smaller than 50kb.

CSS broken on upload

I built a site based off a bootstrap template.
I linked to my own CSS to add my own design touches.
It works in dreamweaver, but when uploaded to the hosting site, the css breaks.
The bootstrap CSS links fine, however my added CSS won't load or apply correctly.
I'm kind of a noob, there may be some very simple thing I'm overlooking.
http://mhatlaw.com/index.html

how to let CMS make use of my css files instead of its own css?

(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.

How to use BootStrap inside a WordPress theme?

I am pretty new in WordPress and BootStrap CSS framework and I have the following doubt:
I have installed this theme that integrate BootStrap framework and I want to use it as a start point: http://bootstrapwp.rachelbaker.me/
I have change the background color of the homepage changing the background-color property into the body field in a file named bootstrapwp.css inside my theme using FireBug plugin
Ok...my doubts are:
1) Why this CSS file is named bootstrapwp.css and not bootstrap.css as in the downloaded BootStrap 3 framework? And why this file is slightly different form the dowloaded bootstrap.css file?
2) What is the better way to change a style in BootStra? I can change it directly inside my bootstrapwp.css or is better do it in another file overriding this behavior?
Tnx
Andrea
Andrea:
There are a lot of answers for your questions but I will work to simplify it for you.
First, what the developers are trying to do is get Bootstrap functionality within the Wordpress CMS. They are two entirely different animals. Bootstrap consists of individual pages that must be hand coded. Wordpress is a Content Management System (CMS) where you can apply a style, theme, sidebar, template or widget and have it appear on every page site-wide.
So, what the developer is doing is using the bootstrapwp.css file to handle the CSS for the entire Bootstrap themed Wordpress site. Remember, this is NOT a Bootstrap site. It is a Bootstrap themed Wordpress site that seeks to incorporate the functionality and design of Bootstrap within the confines of the Wordpress Codex.
If you're running a Wordpress site, the best way to change a style is always going to be in the CSS file provided by the child theme.
You can try Impulse Press. It's the most complete Wordpress Bootstrap 3 starter Theme
Take a look at the demo impulsepress.twoimpulse.com
with this you can change your css style in bootstrap-theme.css and don't touch bootstrap.css , so when we have an update it doesn't ruin your site styles
And Vincent Polisi is right, you can also make a child theme and get Impulse Press always updated