I'm using Drupal 7 and Field Slideshow plugin. I published my slide and working. It's have a pager and that's name 'Prev' and 'Next'
I don't want text, must image. How can i do it?
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php print t('Prev'); ?>
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<?php print t('Next'); ?>
</div>
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
</div>
And styles like this:
.prev {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/prev/image.png') no-repeat center center;
}
.next {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/next/image.png') no-repeat center center;
}
Or you can have something like this:
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<img scr="path/to/prev/image.png" alt="<?php print t('Prev'); ?>" />
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<img scr="path/to/next/image.png" alt="<?php print t('Next'); ?>" />
</div>
Related
First please look to the picture to know what different
Sample picture
my css & html is like this:
#media screen and (max-width: 360px) {
.bg-product {
background-image: url(../../assets/img/home/mobile/3.png);
position: absolute;
}
}
<div class="col-12 px-0">
<a href="<?php echo site_url($link_product) . $link ?>" class="link-default">
<h2 class="h5 product-background">
<?php echo $value->item_name; ?>
</h2>
<p class="my-0 product-background">
<?php
if ($value->item_discount != 0 ) {
?>
<strike class="text-discount product-background"><?php echo currency_display($value->$price); ?></strike>
<?php
if($value->item_discount >= 10) {
?>
<span class="text-nowrap product-background"><?php echo $value->item_discount . '% Off' ?></span>
<?php
}
?>
<?php
}
?>
</p>
<p class="price-product bg-product">
<?php
if ($value->item_discount != 0 ) {
echo currency_display($value->$price - ($value->$price * ($value->item_discount/100)));
}else {
echo currency_display($value->$price);
}
?>
</p>
</a>
</div>
its for mobile version, i have some problem why i have space like that in my view, where i call a function for discount price , the space is apear between the real price and discount prince
Please try using background-size: cover -
.bg-product {
background-image: url(../../assets/img/home/mobile/3.png);
position: absolute;
background-size: cover;
}
I'm creating a static block to show the subcategories of a category in Magento. The code is made by me and with some ideas taken in the web.
The idea is to show a title with plain background called back.png as thumbnail of the subcategory when this one hasn't a thumbnail or the category thumbnail if the image is uploaded. For the moment I can't show the thumbnails, could anybody help me?
Thanks.
<div class="product_list" style="width:900px;">
<?php $_helper = Mage::helper('catalog/category') ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if($currentCategory->children_count > 0) { ?>
<?php
$cat = Mage::getModel('catalog/category')->load($currentCategory->entity_id);
$_categories = $cat->getChildrenCategories();
?>
<?php if (count($_categories) > 0): ?>
<ul>
<?php foreach($_categories as $_category): //print_r($_category); ?>
<?php
$imageUrl = Mage::getModel('catalog/category')->load($_category->getId())->getThumbnailUrl();
$imageName = substr(strrchr($imageUrl,"/"),1);
$imagePrefx = Mage::getBaseUrl('media')."catalog/category/";
$newImageUrl2 = $imagePrefx.$imageName;
?><div clas="subcat-el">
<li style="float:left; margin-right:10px;">
<div class="subcat-name" style="z-index:20; width:270px; position:absolute; margin-top:134px;text-align: center;">
<a href="<?php echo $_helper->getCategoryUrl($_category) ?>" style="text-decoration:none;">
<h3 style="margin-left:18px; font-family:Helvetica; font-weight:200;text-shadow: 1px 1px 1px #030;font-size: 24px;color:#fff; ">
<?php echo $_category->getName() ?>
</h3>
</a>
</div>
<div style="width:270px; height:270px;background: #fff;
border: 9px solid #fff; border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.15);-moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.15);box-shadow: 0 0 6px 0 rgba(0,0,0,0.15);margin-bottom:10px;">
<a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
<img src="<?php
if ($newImageUrl2 == $imagePrefx): $newImageUrl2 = Mage::getBaseUrl('skin')."/subcat/back.png";
endif;
echo $newImageUrl2; ?>" alt="<?php echo $_category->getName() ?>" style="width:100%;">
</a>
</div>
</li>
</div>
<?php endforeach; ?>
</ul>
<br style="clear:left;" />
<?php endif; ?>
<?php } else { echo "<h3>No Sub-category found</h3>"; } ?>
</div>
There is no such method by default as in your line:
Mage::getModel('catalog/category')->load($_category->getId())->getThumbnailUrl();
you should try getThumbnail() instead
Or you could try smth like this
$imageUrl = Mage::getBaseUrl('media') . 'catalog/category/' . $_category->getThumbnail()
Or you can try to specify your own method getThumbnailUrl in your own extension
public function getThumbnailUrl(Mage_Catalog_Model_Category $category)
{
return (bool)$category->getThumbnail()
? Mage::getBaseUrl('media') . 'catalog/category/' . $category->getThumbnail()
: '';
}
I am using codeingiter and have soms results that i am showing from a database. The results are shown using PHP as follows:
<?php
if(isset($foo)){
foreach($foo as $bar){ ?>
<ol><li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li></ol>
<?php
}
}
?>
I've also tried adding the class 'results' to the ol li.results and no luck. Have added a border and the border wraps around each result so i know my tags are in the right place.
CSS:
ol li {
border:1px solid red;
list-style-type: decimal;
}
In the reset.css i had this:
loads...of...elements including ul, ol and li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I removed the ol, li from this and i got the numbers working but all have 1. for each result rather than 1, 2 3
These are shown as a list of addresses and i would like to have them numbered so the first one would have 1.RESULT 1, 2.RESULT 2 and so on... I've tried to use the ordered list tag and nothing seems to show up regarding numbers. i have checked in firebug and the tag is firing out for each one. Is this a css issue or the way PHP is showing the results?
Any help would be much appreciated.
You forgot the <li> tags inside the <ol> tag
<?php
if(isset($foo)){
echo '<ol>';
foreach($foo as $bar){ ?>
<li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li>
<?php
}
echo '</ol>';
}
?>
Try the following
<?php if(isset($foo)): ?>
<ol>
<?php foreach($foo as $bar): ?>
<li class='results'>
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
<li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
It's a CSS issue if the numbers are not showing. Common issue with reset stylesheets. Try adding:
list-style-type: decimal;
to your list style.
If I got it right, your <OL> and </OL> tags should stay outside the for cicle, while you should wrap your output between <LI> and </LI> inside the cicle.
Also, it's not a good practice to put DIVs inside LI elements, avoid it if you can by changing your styles.
I'm creating a feedback. I show the success message when it's good and error when there is something wrong, but my css (red and green block) is there from the beginning. How can I hide this before there is feedback?
<div id="feedback_success">
<?php if(empty($feedback_success)) { ?>
<h1 ></h1>
<?php } else { ?>
<h1><?php echo $feedback_success ?></h1>
<?php } ?>
</div>
<div id="feedback_error">
<?php if(empty($feedback_error)) { ?>
<h1 ></h1>
<?php } else { ?>
<h1><?php echo $feedback_error ?></h1>
<?php } ?>
</div>
css
#feedback_success
{
background-color: #45e589;
color: white;
padding:10px;
font-size:1.0em;
}
#feedback_error
{
background-color: #ff5555;
color: white;
padding:10px;
font-size:1.2em;
}
I think what you are asking is how to do this
<?php if(!empty($feedback_success)): ?>
<div id="feedback_success">
<h1><?php echo $feedback_success ?></h1>
</div>
<?php endif; ?>
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<h1><?php echo $feedback_error ?></h1>
</div>
<?php endif; ?>
This is what I am using:
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php else : ?>
<?php the_title(); ?>
<?php endif; ?>
<div>`
and..
#banner {
clear:both;
width:980px;
overflow: hidden;
background: #F4F5F6;
padding:12px 0;
margin: 0 0 15px 0;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
border-radius: 15px; /* future proofing */
-khtml-border-radius:15px; /* for old Konqueror browsers */
}
#banner img {display: block; margin:0 auto;}
I don't want a title displayed so that if/else is not necessary.
If there is no img / the custom field is not being used, can the div just not show? Right now if the custom field is not being used it is still showing an empty div.
SOLVED IT!!! Sorry for even posting here. Though it's not pretty, it works.
<div id="bannerHolder">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div id="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
</div><!--banner-->
<?php else : ?>
<?php endif; ?>
</div><!--bannerholder-->
Put the if clause around the div, not inside:
<?php
if ($banner = get_post_meta($post->ID, 'banner', true))
{
echo '<div class="banner">', $banner, '</div>';
}
?>
Put the if clause encapsulating the div element and remove the else part of the php sentence.
Example:
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div class="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<div>
<?php endif; ?>