I've noticed that on some product pages of my site (but not all) I'm getting a strange issue where one of the product images appears in the row below the one it's meant to.
So on some pages the 'People who bought this also purchased...' images, on the last line one of the products drops down a line and is obviously out of place.
http://tinyurl.com/cs6d3q5
but most other pages are fine!
http://tinyurl.com/clwq3dz
I can't figure out whats the problem. As far as I can see they should both act the same way. Can anyone enlighten me and also tell me how they debugged it? I use Firebug and developer tools on FF but they don't seem as useful as they once did
thanks
here's the code used to create it:
if($also_purchased_products->RecordCount() > 0) {
echo '<div style="clear:both"></div>';
echo '<div class="sideboxHeading">People who bought this also purchased...</div> <div class="ProdInfoDotSpacer"></div>';
while (!$also_purchased_products->EOF) {
$also_purchased_products->fields['products_name'] = zen_get_products_name($also_purchased_products->fields['products_id']);
echo '<div class="alsoPurchasedWrapper">';
echo '' . zen_image(DIR_WS_IMAGES . $also_purchased_products->fields['products_image'], $also_purchased_products->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br />';
echo '' . $also_purchased_products->fields['products_name'] . '';
echo '</div>';
$also_purchased_products->MoveNext();
}
}
its because
Black/Sage Guinness harp knit
here Black/Sage Guinness harp knit scarf is long try sorting it
The problem appears when the previous item text link is more than one line long. You can truncate it, as NullPointer says, or set a height on .alsoPurchasedWrapper:
.alsoPurchasedWrapper {
float: left;
width: 150px;
margin: 5px 0px 10px 20px;
height: 170px;
}
Related
This started out as a Question, but I sort of made it work. I am sharing it for anyone who needs to know. Or maybe there is a better way?
I'd like to show a welcome message on the home page. Should be placed in the upper left corner.
This is what I did:
add_action( 'storefront_header', 'pfn_userinheader',1);
function pfn_userinheader() {
?>
<span class="pfn_great_header2"> Hello! blablabla</span>
<?php
}
Now the text is placed where the secondary menu. More like top, right of middle. I have no idea why just there. Anyway, I would like it to be placed in the top left corner.
This is my css:
.pfn_great_header2{
position: absolute !important;
left: 0;
top:0;
width: 10% !important;
color: #0071A1;
}
It works. Is it a good way of doing this?
I have something similar on my site but it displays a different message if the customer is already logged in.
If you wanted to do this, you could use something like this:
add_action( 'storefront_header', 'pfn_userinheader',1);
function pfn_userinheader() {
if ( is_user_logged_in() ) {
echo '<span class="pfn_great_header2">Welcome back <?php $current_user = wp_get_current_user(); echo $current_user->user_firstname; ?>!</span>';
}
elseif {
echo '<span class="pfn_great_header2"> Hello! blablabla</span>';
}
}
I am attempting to add text beneath the product gallery images of my Wordpress Woo-commerce site.
I have attempted to use the general scripts found online:
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
function bbloomer_add_below_prod_gallery() {
echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em">';
echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
echo '</div>';
}
You can see in the following screenshot that the text appears here and not beneath the actual image
The website link this is referencing can be found at: https://www.tattiniboots.com/product/retriever/
Update:
After trying the proposed solution below, the div text shows all the way at the bottom:
I am attempting to get this div to appear here:
The link I am working at is found here: https://www.tattiniboots.com/product/terranova/
You need to add style clear:both in your div. check the below code.
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
function bbloomer_add_below_prod_gallery() {
echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em; clear:both;">';
echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
echo '</div>';
}
I am working in wordpress (I don't think it matters much though in this case), and I need to include a header after the menu, full width and only 180px height. But no way it is working!! If I try to put my height (different than 100% or auto), the video becomes small enough to keep the size scaled, but it is not what I need.
The thing is, the final video would be a video recorded through a post box mouth (not sure how it is called), so it is quiet width but not much high.
I'm finding to explain myself quiet hard, so if anyone doesn't understand what I mean, but they have an idea what I can do, please, let me know!!
<video id="video" width="100%" height="180px" controls autoplay>'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.mp4" type="video/mp4">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.ogg" type="video/ogg">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.webm" type="video/webm"></video>
I've tried to use plugins but I have the same problem....
I would appreciate any kind of suggestion! Thank you
Well, it wasn't very difficult.... maybe it was too early to think properly. So I've just added a wrap and give it the 100% width and 180px height and then overflow:hidden and it solved my issue...
php:
if(is_page('solutions')){
echo '<div class="wrapperVideo"><video id="video" width="100%" height="auto" autoplay loop>'
.'<source src="'.get_stylesheet_directory_uri().'/video/money.mp4" type="video/mp4">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.ogg" type="video/ogg">'
. '<source src="'.get_stylesheet_directory_uri().'/video/money.webm" type="video/webm">'
. '</video>'
. '<div class="sentenceOfTheDayVideo"><span>"Enjoy a cup of tea"</span> - SOMEONE</div>'
. '</div>';
}
css:
.wrapperVideo{
width:100%;
height:180px;
overflow:hidden;
}
Please Use this Plugins
https://wordpress.org/plugins/hana-flv-player/
Requird https://get.adobe.com/flashplayer/
Usage Example
You can place the specific tag element [hana-flv-player] in your wordpress article to show the video. The 'video' attribute is mandatory. There are other optional attributes. Default values for the options can be defined in this pages. See the bottom of the page for the example.
[hana-flv-player
video="http://yourwebsite.com/wp-content/plugins/hana-flv-player/babyhana.flv"
width="1000"
height="180"
description="Sarah is having fun in a merry-go-round"
clickurl="http://yourwebsite.com/"
clicktarget="_blank"
player="5"
autoplay="false"
loop="false"
autorewind="true"
splashimage="http://yourwebsite.com/wp-content/plugins/hana-flv-player/splash.jpg"
skin="mejs-wmp"
/]
Insert flv into template theme files (such as sidebar.php):
Okay, here is the function that you can use in the theme template files to show FLV movie. Basically you need to use hana_flv_player_template_call method. The method takes a single argument. The argument should be just the string of the attributes of usage explained the above. Just copy below code into your theme file and edit red colored attributes accordingly.
<?php
if (function_exists('hana_flv_player_template_call')){
$hana_arg="
video='http://localhost/wp/wp-content/plugins/hana-flv-player/babyhana.flv'
player='2'
width='1000'
height='100'
more_2=\"showStopButton: false, showScrubber: false, showVolumeSlider: false,showMuteVolumeButton: false,
showFullScreenButton: false, showMenu: false, controlsOverVideo: 'locked',controlBarBackgroundColor: -1,
controlBarGloss: 'none', usePlayOverlay:false \"
";
echo hana_flv_player_template_call($hana_arg);
}
?>
I'm a beginner of php, I found this custom style in Wordpress Redux framework but I don't understand how the code work.
I would like to know how this formula works:
<?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
Can someone please explain. So much appreciated.
<?php
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
?>
#header .header_container {
height: <?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
}
.header3 #header .header_container {
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
}
.header3 .desktop_nav {
left: <?php echo $logo_w; ?>;
margin-left: 10px;
}
.logo {
width: <?php echo ($logo_w) ? str_replace('px','',$logo_w) : 160; ?>px;
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
margin-left: -<?php echo ($logo_w) ? (str_replace('px','',$logo_w)/2) : 80; ?>px;
}
i haven't used that framework yet but looking at the code i can surely tell that this framework certainly offer you to set the height and width of the logo in your backend and gets those entered values as
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
and uses the $logo_w and $logo_h to create the design accordingly.
If you are planning to use just this part of the code from the framework without the framework then you can't. You must have the whole framework and set those values from the appropriate locations.
//add this in functions.php
function mytheme_custom_options(){
global $sellegance_opt;
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
<style>
/*use your style here */
</style>
}
add_action('wp_head','mytheme_custom_options');
Ok so I try to explain, but im not sooo good in explaining things :P
The PHP
The redux optionsname seems to be "sellegance_opt" see lines 12 & 13 in the sample-config.php shipped with redux.
logo_size seems to be a field with (at least) the values url, width and height.
the PHP string is dropped to the header.php just before the closing header tag I guess. So the variables are callable in a file.
THE CSS
the css styles the output of the php
He (or she) is calling the attribute and gets a result with the uploaded media sizes. He now do some math to get the image size needed to fit the template.
But without all the code, much of this is guessing.
All the best.
I want to make a long list of elements, images for example that will be added into the grid which width is span12 and every elements width should be span3, that makes 4 elements in 1 row.
The problem is, when I list all the elements or I make a php function that lists them Boostrap thinks I want to put it in one row, but I don't. I want to make a new row every 4 elements or so... I want to be able to add as many <li> as I want and not worry about where another row should be.. What should I do ?
This is what happened to me, the 5th image has wrong margin on the left side. I want to make it in the same position as images in the first row.
Screenshot here
I use this php logic to echo out pictures
$dir = "../img";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if (preg_match("/.jpg/", $file)) {
echo "<li class='span3'>
<a href='$dir/$file' class='thumbnail'>
<img src='$dir/$file'>
</a>
</li>
";
}
}
closedir($dh);
}
}
And I have no idea on how to post a new row each 4th picture or so.
Row is marked as <div class='row-fluid'>
That's a common problem, and I think there's no elegant solution. Consider one of these approachings.
Solution 1 Review your iteration logic
If refactoring your PHP logic is an option, try to render a row each 4 elements (I can't suggest an specific code without viewing your current logic).
EDIT
The code for a while loop could be as follows:
<?php
$count = 1;
echo '<div class="row">';
while (your_condition) {
echo '<div class="span3">your_content</div>';
if ($count % 4 == 0) {
echo '</div>';
echo '<div class="row">';
}
$count++;
}
echo '</div>';
Solution 2 Hack the fifth element's margin
Correct the margin-left of the affected elements, so you don't need to respect the native Bootstrap markup.
.thumbnails .span4:nth-child(4n+1) {
margin-left: 0;
}
Unfortunately, that code is not compatible with Internet Explorer, so maybe you'll have to find a JavaScript or jQuery solution.