I am new to website design, sorry if this sounds like a silly question, I am working on a wordpress project where I have 4 pages in my project in total [home, about us, services and contactus]
I have built the home page and contact us page using bootstrap4 and services page using plain HTML and CSS. now i have 2 style.css sheets (style1.css and style2.css) style1 pertaining to bootstrap pages and style2 pertaining to plain HTML CSS. can i combine all these into a wordpress theme?
Combining External CSS files in the WordPress site
One of the easiest ways to do this is to use a free WordPress plugin called Autoptimize, developed by Frank Goossens.
This plugin is pretty lightweight, only 176 KB to be exact. As of writing this, it currently has over 1,000,000 active installs with a 4.7 out of 5-star rating.
STEP 1
You can download it by searching for it within your WordPress dashboard under “Add New” plugins.
STEP 2
Once installed you will want to go into the settings and enable the “Optimize CSS Code” option. This will concatenate (combine) your CSS files. And if you are using a Bootstrap CDN, make sure to input your CDN URL. This way your CSS files will load as one single request on your CDN.
RESULT
After enabling the above settings you will now see your CSS files in one “autoptimize_xxxxx.css” file.
Related
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
I have a simple jekyll site and am trying to get netlify cms to work as the editor for the pages aswell as the posts.
If I tryt o move the pages into a pages folder in the the custom collections folder then it doesn't seem to build them unless they have an .md extension but the pages have plenty fo custom html in them and using .md appears to render the html on the page as text not html.
If I leave the pages in the root then netlify cms doesn't pick them up however I configure it.
There are 3 main kinds of page, Home page, a second level gateway type page, content pages
and then blog posts.
How should I configure this so that netlify can edit my pages and users can create new pages?
Site is here:
https://github.com/tofuwarrior/sites-clearspringacupuncture
Thanks.
Netlify CMS is a great system. However, if you want a WordPress-like experience that is also very forgiving for the developer, I recommend CloudCannon. This is a paid CMS, but it supports visual editing, which means any static page with <div class='editable'></div> can be edited within their system. It also supports image resizing. Creating new pages in CloudCannon is as simple as cloning old ones and renaming them. It is absolutely worth checking out.
Back to your question... It seems like you wrote 'page' instead of 'pages' in your config.yml file. Here is a working config file for Netlify, in which you can see that the correct name is 'pages'.
PS. I noticed you have a 'customcollections' folder. This seems odd to me. Aren't all collections custom collections in Jekyll?
I have developed a website using xampp. And I want it to replace a current website on Wordpress.
I tried looking for tutorial/steps online, have tried a few, nothing seems to work.
I desperately need to upload it, so it would replace the current website. So any help would be greatly appreciated.
P.S: the website is fully static, no database is required.
Remove everything in the wordpress folder (or move it to a subfolder for the time being while you test) via ftp and upload the html site. As long as your new site has a index.html/index.htm it will replace the wordpress site at the url.
Step 1. Create Template in theme folder
Step 2. Give Template at the top of the page Like this
Step 3. Place all Html code below the template name
Step 4. Go to wordpress dashborad choose your template 'CustomPageT1' from dropdown
Further Detail check the link below
For Example: http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
I have been trying to create just one page based on the Wordpress CMS called blog. Now this page created will need to be linked to my normal website which was created using the foundation framework HTML, CSS, and JavaScript.
I am having no luck in linking my website to the Wordpress blog page website. I have been told to create a sub-folder within the public_html folder in Filezilla. I just can't seem to migrate both of them together.
I have an issue. I have made a custom website using CSS and HTML. I want to allow my client to edit and add posts to the website without any knowledge of HTML or CSS while still giving myself the ability to manage the code. Is there any programs or online tools?
I have tried wordpress at (Wordpress.org) and set it up on my website but I was unable to figure out how to use my custom HTML and CSS on the wordpress.
You can create custom sites in Wordpress by using the default installation (I think currently it's the "TwentyTwelve theme), and simply copying the files you want to customize into a child theme directory - named anything you want.
Also copy the default CSS into the child theme directory you make. These files will then be what supercedes the default files when you choose yuor child theme in the Appearance > Themes menu in the default dashboard.