I have a WordPress site up atm where i need to hide the header and footer but still load them. I tried using css to set their display to none but they still appear on the site, is there a way to hide them, have i just done something wrong?
the site is: Link to website you can see there is a white band at the bottom.
Or maybe its a problem with something else, i am running this jquery script to set the background of the page to the browsers height.
<script>
$(window).resize(function() {
$('body').css('height',window.innerHeight);
});
</script>
Road to the solution:
Make sure the CSS rules you have created for this purpose are applicable to the elements you are talking about
Make sure that those CSS rules are the most specific CSS rules, beating any other CSS rule which is in conflict with your display: none;
Make sure you do not have display in the inline CSS
Make sure there is no script adding display value to the given tags
Make sure that your CSS is not cached
Profit
Related
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.
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
On my website, the search box on the top moves and changes right when you load the page on Google Chrome. It doesn't do this on other pages even though the header on the top has the same HTML and CSS code. Can someone look at the code to see what's wrong?
And also, how can I change the URL to from something like http://www.example.com/user?u=username to http://www.example.com/username and have it load the same page?
First, you're asking 2 different questions:
How do I make this CSS Transition run on page load?
How do I change my links from parameters to paths?
The CSS transition? I don't see any transitions. If you're asking about the opacity, your tos and user pages use two different stylesheets, formstyle.css and style.css. The opacity of style.css is set to 1 and the opacity for formstyle.css is set to 0.8. And I don't see any searchbars.
For changing paths, look into .htaccess. It is what configures how browsers view files on your server.
EDIT: You fixed the avatar issue.
I don't know why the space between the content-bottom and the footer is bigger than the space between header and content-top you can see an example here: [not found]. I want the same equal spacing for the content(that box) between header and footer...but always I get bigger spacing between content and footer..and I don't know how to fix it, please help me guys.
Best Regards
You have given your header, position:absolute and footer position:fixed. also height to middle container. This way your elements won't flow correctly.
My suggestion:
give header and footer position normal.
and give content:
.wrap {margin:100px auto; width:---px;}
Instead of using .css('height'), use .height() or .outerHeight() if you want to calculate also padding and margins of the element in question.
You can download the Firebug plugin (http://getfirebug.com/) if you have Firefox. Using this plugin, you can view the CSS of individual elements on the page by hovering over them and pressing ctrl+shift+c.
You may also view paddings, margins, and heights via the "Layout" tab as well as edit CSS and see updates immediately as live, local changes. That allows for rapid CSS debugging.
How can I give the user the ability to change the style of a webpage, of course I have to make several CSS files , but how can I make the code that permits the change upon the user's choice
We're all pretty unlikely to give an answer as thorough as A List Apart's.
They even provided some freely-usable code for you.
You would basically have css classes for all the major components of the page such as header, content, footer, nav_menu items, heading, etc. Everything that you want the user to be able to customize you would create a css class/ID for it.
Then you would show all these classes to the user and let him either type in the CSS code manually, or show him dropdown boxes with all the possible colors, for example, or other settings.
When the user changes an option, you could use javascript to change that property of the css ID/class he selected. E.g if he changes the background color of the header from black to blue, you could do this:
document.getElementById("header").style.background-color="#ABCDEF";
(Jquery might have an easier way of doing this)
At the end of the page you could have a submit button which would POST all the css settings to a php script, which would write these settings to the database. Then you would do a query like:
SELECT css_id,css_class,css_code FROM css_styles WHERE user_id='$user_id';
This would return all the css code, and then you would put this in the <head> command instead of an external css file.