I'm fairly new to Wordpress/CSS/PHP and I'm having a few issues when designing the company intranet. As a design brief I was asked specifically to use only the primary sidebar as a navigation menu, leading me to remove the main/top menu.
I am currently using the code:
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
header {display: none; !important
}
Within a child theme to successfully hide all headers, unfortunately I've reached a point where I actually need to use the "entry-header" class in the featured content window to show the titles.
I am very happy with all other titles staying hidden as I've done a lot of my styling around this.
Basically, all I'm wanting to do at this point is keep everything else hidden whilst only showing the entry-header on the featured content section. I hope this makes sense! Thank you very much in advance for your help.
Unfortunately the site is hosted internally so I can't provide a link to show what I mean!
There should be a file named header.php
Inside there should be the "top header" where the nav is contained, etc., that you want to hide. It should have an ID or a class along with, if it does not, give it one. For example...
<header>
Could be edited to be...
<header id="top-header"> or <header class="top-header">
Then, in your CSS, change...
header {display: none !important; }
To this if you are using an ID...
header#top-header { /*code*/ }
OR this if you are using a class...
header.top-header { /*code */ }
The above is the more "proper" way of hiding those items, although in the interest of site speed, if you arent using those headers at all, simply delete them from header.php. (be careful of any wrapping div's that end in footer.php")
Off the top of my head, the 2014 theme has an ID attached to the top element already that you can re-use.
Alternatively, you could just "undo" the styling for the entry-header... Though at this point it would be considered bad practice. To do this... Right beneath the header line you already have in your css, add this:
header.entry-header { display: inline !important; }
Make sure that the above code is directly AFTER the code you are using to hide all headers. It will not work if it is above.
Again, i caution you however, that this is not best practice. Hiding all headers, then unhiding the ones you want isn't the best way to code. This would be called an exception, and you are forcing yourself into writing potentially multiple exceptions any time you run across an instance where you want to see .
Also, simply setting them to display: none; does not mean they are REMOVED from the page. Only hidden from view to users. Google bot will still see and read any content inside those hidden elements. This could potentially be very bad for your SEO.
If you want the .entry-header to be visible on only the featured content page, you'll have to use a conditional statement in the featured page template to enable the header to be displayed on that page alone.
Related
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
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.
I'm using NextGEN Galleryview template Wordpress plugin.
When I load the page, it first loads a very tall, blank document. Some 3000px in height.
Then this disappears and it loads the carousel with the correct height/elements.
I'd like it not to double-load, although I've not been able to identify where and how it occurs. I've compared it to another NextGEN gallery template (which loads properly) and FireBug shows them to have identical scripts/images, CSS and loading times.
Found the problem.
In the galleryview.css file there is this crucial bit:
/* IMPORTANT - Change '#photos' to the ID of your
gallery list to prevent a flash of unstyled content */
#photos{ visibility: hidden; }
Not sure why the default ID in the JS file isn't used here.
There is no ID for the gallery list in the JS file anyway, only a class. Changing the code to:
#myGallery{ visibility: hidden; }
.galleryview { visibility: hidden; }
Eliminates the flash of unstyled content. #myGallery is the actual ID, and changing its visibility seems to make the page load faster with no side effects, so I'm not pushing my luck. Leaving as is.
Hope this helps others. It took two days to solve this issue.
I am having a hard time figuring out what's going on with a theme for a new script that i just bought.
My site is azngirls.com (don't worry it's not pornographic hahah) and if you go to the frontpage you will see that there is a nav bar on top or header bar that shows Login - Register (Forgot Password) and etc. and that bar is supposed to be on top without any gap but if you go to other parts of the site like for example http://azngirls.com/tos - you will see that there is a gap between that nav bar and the actual top of the website which makes it look awkward when you scroll down. This problem occurs everytime i edit the smallest things inside the php file, as in even if i change a single word or letter it suddenly shows that gap.
Another problem that I am having is that on the same page - on the side bar to the right there is a "Show me" button for Browser Plugins but when i click the link it takes me to a 404 page, but when i click the Tools link in the footer menu it takes me to a page that works.
Thanks alot for any help you guys can give! Really appreciate it!
you have a huge empty line filled with whitespace between <body> and <meta> tags. and you included a <meta> tag inside a body, as it should be in the <head> tag.
As #tpaksu suggested, your html is totally messed up. And there is a easy fix to your problem, just add the following code to your style sheet.
.content-infobox {
top: 0;
}
use this code on the respective ID
#id{
margin:0px;
}
For a current project I'm doing I'm using PHP includes for my nav bar to save time when making changes to it. The nav bar is composed of a CSS sprite, which currently caters for the default background image for the anchor tags and the a:hover states. In this case having the same nav bar included on every page via the PHP include obviously works fine as neither of these states need to be conditional to any of the pages.
However, what I want to be able to do is to have a different section of the sprite visible depending on what page the user is currently visiting - just to show them what page they are on.
Without doing a PHP include I could have a different ID or class for each page (i.e. "page1Current") and just change the CSS accordingly. However, using the PHP include method I can't seem to work out a way to get around this.
I'm guessing that, using a bit more PHP, it would be possible to use some sort of IF statement to get the page address and use that to conditionally alter the CSS accordingly. Unfortunately I'm a total PHP beginner so I can't quite get my head around it.
I've not posted any code as I'm just looking to get the right idea, but if it helps I can post some.
Any help would be appreciated :)
Rich
You don´t need more php, you can set a class or id to every page on the body tag and give all your links a separate class as well.
If for example the id of your contact page is contact and the class of the contact link in the navigation menu is contact you can style that button on just that page using:
#contact .contact {
// highlight button
}
Why not include some a style tag in the html rendered by the include that changes whatever css attribute you want for your bar, ie :
<style type="text/css">#menu .navbar { background-position: 0 0 }</style>
in include #1 and
<style type="text/css">#menu .navbar { background-position: 50px 0 }</style>
in include #2