I am working on my portfolio website. I just finished working on all the HTML CSS JavaScript and now I want to convert my website to WordPress. So I create my custom theme, create my pages and templates, rename all my .html files to .php and upload evrythin on my server. However, when I go to my site, the content is there (you can see it in the page inspector), but it is invisible for some reason. Only the header (header.php) is visible. I tried reinstalling WordPress on my server, nothing changed. Does anyone have a solution? Thanks! Here is the link: problematic website
You have some console errors that need to be fixed:
Additionally there is CSS hiding the content:
Removing the opacity: 0 reveals the content:
Dang, #mikerojas, you beat me to it. ;)
Just to add a little bit: In the page source you'll see <script src="js/script.js"></script> near the top. It seems the browser looks for the script at https://felixpoirier.ca/js/script.js, and doesn't find it.
You might start out by looking up wp_enqueue_script and see how to solve the problem the WordPress way. Or you could for now double-check the code that's adding the bad link for typos or other mistakes.
You also might at least partially solve the problem by going to themes/customizer/Additional CSS - if they're working for your theme in its current form - and add something like .elementAnimer { opacity: 1 !important } Alternatively, you could just remove the elementAnimer class from the sections it's currently being applied to - the first section and the third. You might then at least get readable output, if not fully animated output as intended.
Related
I'm asking for help for those who have experience in changing an html file to a php file. I've tried everything I know (and I'm not the smartest I admit) but I don't understand why the following is happening.
Currently: When viewing on mobile, the mobile menu button has gone, the toggle switch which changed prices from monthly to annually, tabs which displayed different content has gone. As a result:
If there was a toggle, both the toggle results are displayed one above the other
If there was a tab, each tab element is displayed underneath the other
The mobile menu button has gone completely
Background:
I purchased an HTML template but it turns out the seller didn't want to help. I wanted to split and convert the page into a php page as I wanted a single header/footer file which I could import. As you will see (if you check the repo) the header.php and footer.php file is getting imported into the page php file.
I created the pages by first:
Renaming the original html file to a php file
Cut the header and footer and import them back into the page php file
That's all I have done. It seemed to work, however another check (after cache cleared) I noticed the issues.
The link to the site page im referring to is:
https://blueboxhosting.co.uk/products-cloud-hosting
But if you look at any of the pages, you'll see errors on all of them now where they're should have been controls (eg toggles, mobile menu, tabs etc)
I've created a snipped so you can view the code and HOPEFULLY spot where I've been a moron:
https://bitbucket.org/snippets/bbhostinguk/7e5qxp
Any help with this would be amazing as I just can't figure it out.
Start by running the HTML generated by PHP through a validator, e.g. https://validator.w3.org/
Your code has numerous stray tags which may or may not affect the rendering.
Another tip is to comment off everything and then uncomment section by section and check when things start to break.
I'm following a PHP Ecommerce tutorial and for personal reasons I had to stop with the tutorial for a few months and today I got back to it and started off with a video where we are writing CSS code for a sidebar with categories so that it can have a scroll feature on it when more categories are added. I wrote the CSS and it didn't work, I tried watching the tutorial again and everything seems to be fine...then I noticed that if I delete the link for the stylesheet in index.php or any other file the CSS obviously won't work, but when I got into the styles.css file itself and delete all the code, save and refresh the page, the CSS remains on all page's while the CSS code doesn't exist anymore.
Please can anybody help? I will also post any code that you need.
There might be a default css file that's resetting your styles.css file. Check to make sure there is no other css file that controls the styling (one that acts as the main-stylesheet); simply do an inspect element on whatever div/id you want changed and see the css style that controls it.
I've used a modified themeforest template for a single php page and have an issue where the navigation links that take you to the various unique id's on the page are working fine but cut off the top part of the section h3 that it has linked to.
It's a positioning problem for sure and most likely to do with the modifications I made to the flex-slider that the template included.
But I can't determine how to adjust the css (or script) to correct the issue.
For example, the site is http://goudkamp.stacklaw.com.au/ and when you click Services, you can see what I mean.
I have the template on the site as well so you can see how it SHOULD work - http://goudkamp.stacklaw.com.au/v2/template/.
I came across another article that suggested using the script
if(window.location.hash.length){
$(window).scrollTop($(window).scrollTop() - 100);
}
However, I don't think I should need it when the template works perfectly.
I just don't know where to start looking to make the necessary adjustments.
Please help!
Thanks in advance
Wait - I found it!
After looking at the suggestion on the other article, it made me think that it must be done in the theme's custom scripts. So I looked in the custom.js file for any script that referenced the main nav.
There was an "offset" line with the markup "//use this to position the window exactly where you want". Testing a small change to this had the desired effect.
Thanks anyway.
I have tried removing the title by all the methods I could find on Stackoverflow and wordpress support such as pacing a css rule and finding the get_title in the page, single and template php files. But this title doesn't seem to want to go away.
The only way I have had any success is by using a plugin that removes the title but then I am faced with the problem that the spacing remains where the title once was.
Here is a picture showing what I mean: http://i.imgur.com/vj0vbc7.jpg
Thanks in advance for your help!
You need to go into your template file and remove where the title is being outputted.
I checked the source code on your site and it looks like the theme files are not in the regular place. So do this. Go to your FTP client and open up:
/assets/956/themes/header.php
It might be named something slightly different.
Now within that theme locate your h1 tag. At this point I would recommend removing it, saving it, and making sure you have the desired change. It should be gone completely from the page. If it's not, perhaps the H1 tag is located in another file? Check other template files till you find the right one.
You can remove it all together or surround it in a div with ID='homepg-h1' Then just do a rule like this in your CSS:
#homepg-h1 {
display:none;
}
Hope that helps, let me know if you have any questions.
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.