I am adjusting a Wordpress site using twenty fourteen theme.
I have removed the left sidebar - i did this by simply commenting out the php code.
Whilst the sidebar div is now removed, when i try to remove the margin-left that moves all the the other content 222px it hides the content.
Here is the website
http://pacificwhiteboards.com.au/product/communicate-corporate-magnetic-whiteboards/
Any ideas ? I am at a bit of a loss.
Thankyou
James.
Look for the .site:before CSS selectors; it's injecting content, and that's what's covering your stuff. When I removed all the '.site:before' rules, it seemed to work fine, though I don't know the theme itself well enough to say that there won't be other tweaks you'll need to make.
Add the custom css to remove the whitespace:
.site:before {
display: none;
}
Then you can center your site content adding:
.full-width .site-content {
margin:0px auto;
}
.full-width .site-content .has-post-thumbnail .entry-header {
margin:0px auto;
}
.singular.full-width .site-content .has-post-thumbnail.hentry {
margin:0px auto;
}
Also, I know you didn't ask about it, but I noticed some whitespace on your fixed header, you can get rid of it with a little more css:
.masthead-fixed .site-header {
max-width: 1000px;
}
Cheers!
Related
I'm trying to make a single link in a WordPress top navigation menu that has a different background color but running into some issues.
What I have works on most of my pages but others not (as seen below). I assigned a CSS class (.contact-us-menu) to the individual menu item in the menu builder in WordPress, but I can seem to figure out how to get it to work across all the pages.
Wrong. (https://www.csolsinc.com/insights/)
Correct. (https://www.csolsinc.com/insights/webinars/)
This is the custom CSS I added with the "Wordpress Add Custom CSS" plugin.
li.contact-us-menu {
background-color:#f47e00!important;
height:50px!important;
border-radius:50px!important;
padding-right:15px;
color:#ffffff!important;
font-weight:bold!important;
vertical-align:middle;
}
li.contact-us-menu a {
color:#ffffff!important;
}
Any advice?
I looked through both of your site pages to look for the differences and I am seeing this line affecting the 'wrong' links:
#top-menu .menu-item .dropdown-toggle {
position: relative;
top: 11px !important;
For a fix, with your I would either change the top to -1px as in your 'correct'
or try to add:
li.contact-us-menu {
line-height: 50px;
}
to your css.
I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:
If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo
If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content
(if there is enough content to fill the page): Demo
This is my current CSS customizing:
body {
height:100%;
}
.wrapper {
min-height:100%;
position: relative;
}
#site-generator {
position:fixed;
bottom:0;
width:100%;
background-color: #fff;
max-width: 1038px;
}
Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.
For your Demo 1 example above please add this to your CSS style-sheet:
html {
height: 100%;
}
This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.
For your Demo 2 example above add this:
html {
height: 100%;
}
.wrapper {
padding-bottom: 65px; /* same value as footer .site-generator height */
}
#site-generator {
position: absolute; /* use absolute instead of fixed */
}
The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.
If you visit http://sealbeach.thinkbluedesign.com/, you will see that there is a gap which I believe is for the WordPress Admin bar. I tried putting a filter that removes the space but it still shows to those who are not logged in.
This is the code that I used that worked for those who are logged in but did not for those who are not.
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
That space actually appears to be caused by the margin on the #topmenu element. Adding the following CSS to disable the margin on that element should solve your issue.
#topmenu {
margin: 0;
}
the problem is within your #topmenu.. it has float li...
try adding this in you css file...
#topmenu {
display: inline-block;
}
You can use margin to align it to the top. Add margin-top: -30px to div with css 'top-menuwrapper'. So it becomes -
.top-menuwrapper
{
background-image: url("images/top-banner-back.jpg");
background-repeat: repeat-x;
height: 44px;
margin-top: -30px;
}
Thanks & Regards
Yogi
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
I'm having a weird issue with the way my Category page is displayed, elements of the selector are displayed in the body tag. This is causing an alignment issue with the navigation bar and the logo header.
Strangely enough this issue occurs only on the Category Page (Archive.php) while the same header.php file is loaded in all of the templates (homepage, product page, category page etc).
I've tried to disable all of the plugins but with no success and also reverted to the original archive.php file but the results are the same.
see the following link: http://www.best-foods-for-fat-burning.com/wordpress/?product_cat=%D7%91%D7%A9%D7%A8-%D7%91%D7%A7%D7%A8
Any assistance or guidance is well appreciated.
Regards
Ofer
Though it is very difficult to debug css without having the actual files in hand, but i think that the right padding in current_page_item is causing the problem,
nav li.current_page_item {
padding-right: 13px;
display: block;
height: 40px;
}
Change this to,
nav li.current_page_item {
display: block;
height: 40px;
}
And let me know. Think it should work.