we have review tab in product page here , please search using CTRL + F for "review"
once we click on "Be the first to review this product", it displaying like this , means complete design is spoiled
<div class="form-add">
<h2><?php echo $this->__('Write Your Own Review') ?></h2>
<?php if ($this->getAllowWriteReviewFlag()): ?>
<form action="<?php echo $this->getAction() ?>" method="post" id="review-form">
<?php echo $this->getBlockHtml('formkey'); ?>
<?php echo $this->getChildHtml('form_fields_before')?>
<h3><?php echo $this->__("You're reviewing:"); ?>
<span><?php echo $this->escapeHtml($this->getProductInfo()->getName()) ?></span>
</h3>
<div class="fieldset">
<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
<h4><?php echo $this->__('How do you rate this product?') ?> <em class="required">*</em></h4>
<span id="input-message-box"></span>
<table class="data-table review-summary-table ratings" id="product-review-table">
Because When you click on link you .main-container has .col2-right-layout and default it have .col1-layout.
Your .col-main has float:left and width:75%, so you need to change css or you need to change class name.
Default layout has css:
.col1-layout .col-main {
float: none;
padding: 0;
width: auto;
}
So you need to add css for other page like this:
.review-product-list .col2-right-layout .col-main {
float: none;
padding: 0;
width: auto;
}
Related
I have a site with a sticky footer, which is not so sticky and I am having a hard time figuring it out.
This is the html part: html.tpl.php
<?php
?>
<!DOCTYPE html>
<head>
<?php $head; ?>
<title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
<?php if ($default_mobile_metatags): ?>
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_html5_shim and !$add_respond_js): ?>
<?php elseif ($add_html5_shim and $add_respond_js): ?>
<?php elseif ($add_respond_js): ?>
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="container">
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible
element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<?php print $page; ?>
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
</html>
And page.tpl.php part
<div id="navigation">
<?php print render($page['navigation']); ?>
</div>
<header class="header" id="header" role="banner">
<?php $front_page='http://kvf.fo/vit';
if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print
t('Heim'); ?>"
rel="home" class="header__logo" id="logo"><img src="<?php print
$logo; ?
>" alt="<?php print t('Heim'); ?>" class="header__logo-image" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
<h1 class="header__site-name" id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Heim');
?>" class="header__site-link" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div class="header__site-slogan" id="site-slogan"><?php print
$site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php print render($page['header']); ?>
</header>
<div id="main">
<?php print render($page['content']); ?>
</div>
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
The css part.
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
.container {
margin: 0 0 125px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
The page adress is www.kvf.fo/vit , and it seems to be working ok, but on an Ipad, the footer "sinks" halfway under the bottom of the screen, which is a bummer because the main users to the site, are Ipad users :/
Any help is much obliged!
If you want your footer to be sticky so add this property in its css
footer {
position: fixed;
}
It seems you're closing the body tag to early:
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
I'm converting someone's static HTML design to Wordpress, but I run into a problem when working with the titles.
The case is that the title expands downwards, which means that when one title becomes more than one line, the other titles also jump up, even though they are only one line.
This is what happens
This is how I want it
This is the CSS I use to position the titles so the bottom of the title hits the bottom of the image:
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
margin-top: -86px;
position: fixed;
}
So the question is: Is there a CSS property that can solve this problem, so extra lines of text get added on TOP of the title instead at the BOTTOM of it?
As requested, the HTML:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="content_container">
<div class="thumb_art">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="thumb_img" style="z-index: 0;">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}?>
</div>
</a></h2>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="single_title">
<?php the_title();?>
</div></a></h2>
</div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div class="navigation"> <div class="alignleft"><?php previous_posts_link('« Next Entries') ?></div> <div class="alignright"><?php next_posts_link('Previous Entries »') ?></div></div>
<?php get_footer(); ?>
Make thumb_art position relative and then set bottom to 0 on single_title to get it always stick to the bottom
css
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
bottom:0;
position: fixed;
}
And if not already set to relative add this aswell
.thumb_art{
position:relative;//actually any positioning would do
}
Still not entirely sure if I understood your question correctly, if there is something im missing please do tell.
Edit:
This is how it would look like if you had used my method
http://jsfiddle.net/nhewu/
I have a demonstation here: DEMO
You should be able to see audio players displayed in a slider. The issue I am having is that I do not know how to center the audio player into the middle of slider. How can this be acheived and I want this working in all browsers:
Below is code displaying slider and an iframe which links to the audio player itself:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
I am using Galleria as my slider and documentation could be found here if you want to see: http://galleria.io/docs/
MORE INFORMATION:
I only want audio players in the slider to be centred in the slider.
Below is full code where if there is no audio then it displays a blank, if there is one audio then display single audio player on page (that is most of the code below), if multiple audio players then display in slder. This is for each questions even though I have not included the loop for each question in code snippet below:
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
if(count($arrAudioFile[$key]) == 1){
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
$(this).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
},
cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
<?php
}
}else if(count($arrAudioFile[$key]) > 1){
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure audio
You can center by adding margin: 0 auto to the element you want to center.
.jp-audio {
margin: 0 auto;
}
Please note that this only works if the element is a block element and has a set width.
Apply these styles, It should work
div.jp-audio {
margin: auto !important;
width: 85% !important;
}
* RESOLVED BY INTENSE RESEARCHING *
[DOWNLOAD CODE, NO COPYRIGHT =)] .rar file ( always scan before opening .rar - F4LLCON
Problem is that without text the boxes are placed 2 on each row, but with text the boxes
appear under each other with spacing. To get the text in the boxes I used <style> in <head>.
How can I FIX this annoying problem?
IMAGE:
Without the p and h3, both echo text will appear under the box and not in the box
Code:
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
and
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0/>';
// echo "<h3>" . $products['products'] . "</h3>";
// echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
RESOLVED BY DOING:
<STYLE TYPE="text/css">
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
</STYLE>
</head>
and
<div>
<?php while($products = mysql_fetch_array($result)) {?>
<table align="left" background="includes/images/box.gif" width="473" height="285">
<tr>
<td width="35%" height="100%" id="title">
<?php echo $products['products'] . " "; ?>
</td>
<td width="70%" height="100%" id="desc">
<?php echo $products['description'];?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</body>
This might be easy for some, but I'm new to this.
Now working correctly.
Thank you for giving me directions and Thank you Google and Stackoverflow for so much help =)
I am asuming that content_box.png is the background for the box right?
instead of including it in a create it in the background of a div with a class like this
CSS:
.product_box {
bacground:url(includes/images/content_box.png);
width:xxxpx; /* the width of conrent_box.png */
height:xxxpx; /* the height of conrent_box.png */
position:relative;
float:left;
}
php:
<?php
while($products = mysql_fetch_array($result)) {
echo '<div class="product_box">';
// echo '<img src="includes/images/content_box.png" border=0/>';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
echo '</div>';
}
?>
Hope it helps!
I am developing an application which generates barcodes, I want to print them but the barcode div is getting cutted in some pages.
CSS:
<style type="text/css">
* {
margin:0px;
}
#cod {
width: 180px;
height: 150px;
padding: 10px;
margin: 10px;
float: left;
border: solid black 1px;
text-align: center;
display: block;
}
</style>
Code:
<? foreach ($this->ouvintes as $ouvinte): ?>
<div id="cod">
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>
Does anyone know how could i avoid this cut?
Thanks
How about trying the page-break-after / page-break-before CSS properties?
You could set it up to break after every 9 barcodes like this:
<?
$i = 0;
foreach ($this->ouvintes as $ouvinte):
$i++;
$pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : '';
?>
<div id="cod"<?= $pageBreakStyle ?>>
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>
I think the problem is in float:left.. this is a big problem, but you can find some tricks here
I ran into a similar problem... the (only) working solution is to place the barcodes in the table... because multi-paged content really only works (without cutting the content or other problems) with tables.
Try something like this:
<table>
<? foreach ($this->ouvintes as $ouvinte): ?>
<tr id="cod">
<td><?= $ouvinte->nome ?></td>
<td><?= $ouvinte->instituicao ?></td>
<td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td>
<td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td>
</tr>
<? endforeach; ?>
</table>
Try setting page-break-inside to avoid:
div {
page-break-inside: avoid;
}