have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.
If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)
Website: http://www.viskasseimai.lt/
P.S. it works great on a singple post, but something is wrong inside the home page...
Plugin used: https://wordpress.org/support/plugin/facebookall/page/3
The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.
CSS
.blog-grid.element.column-1.masonry-brick {
position: relative !important;
top: auto !important;
}
The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used.
If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.
Related
I am configuring the widgets for my wordpress site but I would like that these start to be visible after 1200px (for example). It is like to have a margin between the first widget and the top menu of 1200px but I do not find the way to achieve this behaviour.
If you wanna see a real example you can go to this post:
https://www.thetravelerlens.com/tutorial/photoshop/enfocar-photoshop
The widgets must appear right after the black and thin line divider (where the social icons are).
Thanks a lot for all your help in advance.
I'm not sure which widget you are referring to. If you're talking about the "ENFOCAR IMAGEN EN PHOTOSHOP" and "Lo más destacado de este artículo" sections, then the correct way to achieve this would either be to check in your theme documentation if there are other widget areas you can use, or move the widget area where you want it to be displayed via php and a child theme (which I think you're already using) or use CSS, but not just with margins.
Find other widget area
By the look of it, you're using this theme. It's no longer available so I couldn't check a working demo, but by looking at the screenshots on the page, there may be other widget areas you can use. See screenshot below:
See red rectangles in the screenshot
I suggest you read your theme documentation to see if you can use those, but generally speaking, you can:
Go on a single post, and click on Customize in the top admin bar.
Click on Widgets and you should see a list of all the available widget locations on this page. Add the widget in different locations and check if another one fits your needs better. If you can't find anything, then check the solution below.
Move widget area
Locate a file called single.php or single-post.php in your parent theme and duplicate it into your child theme.
In this child theme file, locate the widget area in the code, it should look like this dynamic_sidebar( 'some_identifier' );. Take this code, and move it to the desired location in the page template.
Reload your page and check if it is placed correctly. You'll likely need to remove additional elements on the page to remove the top section and add CSS in the style.css file of your child theme to add some styling to the new widget section
Please note that this is just general instructions and each theme is different so it may differ for yours.
Moving the whole widget area using CSS
You could also move the whole widget area using CSS. If there aren't any better widget locations and you're not too comfortable playing around in php, this may be the best solution.
With flexbox:
This is a more modern approach but has less cross-browser support. You should also add vendor prefixes for better support.
First, we'll apply flexbox to the parent container:
.single-post #tve_editor {
display: flex;
flex-direction: column;
}
Then we'll change the order of the section with the social media icons to place it first, before all the other elements:
.single-post .thrv_symbol_72533 {
order: -1;
top: -49px; //Little fix for the CSS Thrive builder applies
}
With absolute positioning:
This solution has a bit more cross-browser support but will require more CSS tweaking on your end, mostly for responsive behavior with media-queries (which I'm not going to get into details here).
First, we will add a margin at the top of the widget section that is exactly the height of the section with the social media icons:
.single-post #tve_editor > .thrv-page-section.tcb-window-width {
margin-top: 115px !important;
}
Then we'll move the section with the social media icons at the top of the page using absolute positioning:
.single-post .thrv_symbol_72533 {
position: absolute;
top: -114px;
}
Once done, you need to check the responsive behavior and apply CSS tweaks using media queries to adjust the layout for all cases.
Adding margins to current widget:
Again, I'm not sure if you're really referring to the top section with the dark backgound image, but if that is the case, here are the reasons why it's not a good idea to simply add CSS margins to this section:
1200px high is not a fixed distance you can move your widget and that will work on all screens. Your theme is responsive, therefore this height will change depending on the device. For example, it will be much taller on a mobile device.
The height of the widget also depends on its content. If you have more text on another post, it will be taller so you can't just apply a margin of a specific height and hope it to work in all cases.
You would still need to create an empty space below the section with the social media icons that is tall enough to receive the widget section. However, since the height is dynamic, you can't just set a value for its height.
I'm adding increment buttons on product page around quantity div, which contains quantity input field. I hook my button-generating functions create_button_before and create_button_after:
add_action( 'woocommerce_before_add_to_cart_quantity', 'create_button_before' );
add_action( 'woocommerce_after_add_to_cart_quantity', 'create_button_after' );
This works great apart from one thing. I would like the buttons to be adjacent without space to quantity div as inline-block elements. Unfortunately inline-block in CSS separates elements with line breaks styled as white spaces.
On product page there is no way I can apply regular CSS hack to make parent element's font-size 0 (space would have 0 width) and explicitly state font-size of all children. It's because there is no constant element structure of ancestors - it changes based on whether product is single, variable, grouped etc. Maybe I would somehow be able to handle all cases, but maintenance-wise it would be worse than overriding templates.
Is there any way I could eliminate line breaks after my first button and before second button with PHP, while not overriding template?
EDIT: I found out that as CSS solution, display: block and float: left will work properly, assuming that I add left margin to Add to cart button which is next to my buttons. I still would like to know if I can achieve this through PHP.
How about in your 'create button' functions, when creating the button html, include inline styling in your button?
style="display:block; float:left"
If this style is meant to be applied to a parent container, then include <style></style> on your page to override that container with this style?
I couldn't get the rid of the spacing at the top of every page in my wordpress site.
Where can I see the px on my theme? So I can adjust it to be applied to all the pages on the theme instead of applying a piece of code to every single page.
Click here to see the white spacing at the top
Click here to see the page demo
go into wordpress dashboard, click appearance and click editor. Find the CSS file with the body declaration and put in:
padding: 0;
margin: 0;
This is liable to break all manner of things but will sort the first place that the padding/margin could be.
But you really need to post the CSS for us to have a clue
Add the following to the bottom of your css file:
article.enl-page {
padding: 0 !important;
}
It should achieve what you want. It would be better to find out where the original rule is being set though.
I am trying to replicate a page http://www.haylockpittman.co.uk/ onto http://www.haylockpittman.co.uk/new-refurb-publish/ but it can't get the images at the top to align correctly.
They call a div id 'outer' for the sizing but it appears correctly on te home page and not on the new page.
How can I change it so it calls the correct code on the new page without messing up the original page.
Thanks in advance.
Wordpress adds a series of utilities classes to your <body> tag; in your case the CSS targets .home #outer while the second page you linked is not the home page and is added other css classes. In order to make this work, you can change your css (style.css::976) selector from
.home #outer
to
.page #outer
this will target both your pages (as your home gets the page class as well). You can decide a different selector, perhaps just #outer, if you want to make sure that it will work also on articles.
That really depends on your goal.
Images have a diffrent class applied to them, causing resizing issue and the div is 600px instead of 400. I would change the page template to match all used classes/ids for all elements and make sure they are the same for both the homepage and this subpage.
My page is http://bonemarrow.ipage.com/contact/.
I'm using reCaptcha with Contact Form 7 under a Wordpress install. Without reCaptcha, my form looks fine and doesn't interfere with the look of the page. As soon as I pop in the reCaptcha, I new have a gap under the main content area, between it and my footer.
It seems like reCaptcha is pushing the footer div down by about the same height as the reCaptcha table itself. I tried wrapping it in a div of my own (#my_captcha) and setting a height, but that didn't work either.
I also thought it might be because of the way I style the labels and/or fields in my form, so I removed all the styling to see what would happen. No deal, even without styling reCaptcha still insists on introducing that gap.
Any help would be appreciated.
footer{
margin-top: -30px;
}
This is one way you could do it.
EDIT: Based on your comment...
Well you could just be more specific with your CSS for example like this
.some_specific_container footer{
margin-top: -30px
}
Assuming that form class only appears on the page I don't see a problem with that.
EDIT 2:
Just took another look, the problem is caused by the iframe, you currently have visibility:hidden if you add display:none you will fix it. No hacks required. The reason that is happening is because visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. source.