I built a custom calculator using HTML5, CSS3, and jQuery.
I have a basic hosting account and loaded all the files through cPanel to my root directory. The files include calc.html with a CSS folder holding my stylesheet and a JS folder holding my custom jQuery.
Now someone would like to put my calculator on their Wordpress site and we can not figure out how to do it. For now I just used iframe to show my site on their Wordpress page but we want the calculator to be hosted from his site.
I tried copying and pasting my HTML code from my calc.html file into a Wordpress page which works but I do not have the styling of my CSS and the JS dose not function. So I used FileZilla and created a folder called CALC with the follwing path (public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/) and added the JS sand CSS contents in there.
I linked my CSS in the header of my calc.html code
<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">
I linked my JS towards the end of the body in calc.html
<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>
I view the page and still have my ugly HTML code with no styling and no JS functionality.
Im new to Wordpress/coding and this is the first thing that popped in my mind so I tried it and failed.
I also thought I could put calc.html, mainCalc.css, and main.js inside of the calc directory i created(public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/)
and then use iframe to display calc.html on the wordpress page. I also failed at this.
I used
<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>
You could do with creating a custom page template.
Basically you will follow the docs https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/ and create a page with the HTML + CSS + JS in the content part.
When you done, you just create a new page in the admin part, select the template from the list under the publish button. Save it, and that's it.
Its simpler from writing a plugin.
Related
I'd like to place a button on the header/footer of the docfx generated site that is when clicked it downloads an already generated/saved PDF in the asset folder of the site.
Tried to scour the web for documentation on how to go about this but I don't think this is documented that well.
Any feedback will be appreciated.
To do so you should create a new template. DocFX provides a basic tutorial to do so (here).
In the new template you should copy the navbar.tmpl.partial file (resp. footer.tmpl.partial) in the _exported_templates/default/partials/ folder to modify the header (resp. footer). In these, you can add an anchor section as suggested in here.
You will have less trouble modifying the footer who is "pasted" as it is in the master layout (The navbar is populated using javascript).
Don't forget to apply the new template in your docfx.json file.
When I run the pagespeed test of Google with my website, it tells me to optimize the CSS delivery.
I checked a lot of websites, tried to combine my CSS files into one and deregistered the wp_enqueue_styles handles. My new CSS file loaded when I tested, but the website was void of CSS . (I deregistered files like Bootstrap and FontAwesome).
It seems that it did not load the CSS of my new file, although I copied and pasted exactly what was in the old CSS files.
For information, I am using the Beaver Builder Child Theme and plugin. I created a folder includes/css in the root directory of my website in which I placed the new CSS file. This new file I loaded in header.php.
I followed exactly the steps described here.
Could someone help me with the steps to resolve this?
Did you link the CSS file you created in the page in question?
Something like this in your head:
<link rel="stylesheet" href="/mynewcss.css" />
Also, if you have a test page set up, I can tell you exactly what you need to do.
I have been trying to develop a website as a front end for a Audio Stream. I am working with a responsive template that uses jQuery and CSS. I am having trouble incorporating two jplayer widgets (Player & Now Playing bar) into my page. I can build a page in the same dir as my site and they will work. but when I try to use them in my index.html they do not display or function. My question is could the jquery already in my index.html be interfering with the scripts for jplayer? Or can it be an ordering issue, where some script refs have priority?
/example.com/sample.html <---works
/example.com/index.html <--does not work
These are the jQuery references in my template
bootstrap.js
bootstrap.min.js
grayscale.js
jquery.easing.min.js
jquery.js
hello i am in a fix on what to do with my current situation.
I am trying to implement an html5 blog template with Umbraco. My template loads the css files with the help of jquery for the sake of responsive design.
Now this is okay for the home page as all the files are placed at the root of the site.
But whenever I click on a particular blogpost, the css files are not correctly retrieved because of the folder structure. A blogpost is placed in a datefolder directory as you already know.
I cant explicitly include the css files as all the files are not loaded at once. They are loaded one at a time depending on the browser window size.
Please give me some directions about which way to go. Ask me if you need more details.
You could use the base tag to define the base URL for all linking attributes, e.g. href, src
<head>
<base href="http://www.site.com" />
</head>
Even if this does not work exactly as intended in loading your CSS dynamically, you could use jQuery to pull the base tag's href value out to prepend the CSS file location.
You can of course make the href value editable via the CMS if required.
Contao CMS gives the possibility to import .css files (which is the only way to get your css into this weird CMS), but interprets them and re-writes them somewhere into the file structure (or DB ?).
Problem is: It cannot handle modern CSS, and throws everything away that's not basic 2002 style css. Like gradients, media queries etc...
Is there a way to get around this ? Like linking to real .css files ?
Contao 3.2.2 does not need the manual insertion of a <link rel=stylesheet …/>.
Upload the CSS to the contao file tree.
Then proceed via Themes → choose for your theme its icon “Edit the page layouts for theme” → Edit layout → in section “Style sheets” below “Additional style sheets” click on “Change selection” to select the CSS you want from the server file tree.
Contao will then serve your CSS content as part of the CSS it generates (under a somewhat synthetic name) and itself place a <link rel=stylesheet …/> to it in your page.
If you have access to FTP or some other way to get files onto the server, just serve your .css file without passing it through the CMS, and put a <link> to that file in the headers. I used to do this with TextPattern because I didn't want to edit my css in the browser.
Write your custom css and place it in the files folder.
You have two choices to link the css to your template
1.Via the theme :
Mouse click and select style sheet or paste in code to path <link rel="stylesheet".... in relevant field.
2.Make a custom template :
In menu item 'template', create a fe_page.html5 or .xhtml. re-name it something.html5 put your code <link rel="stylesheet".... in the header. Don't forget to add the new template to your theme setup (default template is fe_page..)
How to edit css without ftp :
In the menu item 'File manager' browse to the css sheet, press on the blue square icon. you can now edit your style sheet online.
All the above can be made in css3, html5 or whatever your coding pleasure.