I'm using Luna theme and would like the images on the home and product pages to be viewed as squares (to fit the theme) and then viewed as the original landscape photos when the product is clicked on. Is this possible?
Thank you!
Your question is super vague, but I assume this is your solution:
Ripping from the source after viewing the template, this is an example from the "Products" page. Here is the original code:
<li id="product_9230867" class="product">
<a href="/product/mobile-ready" title="View Mobile Ready">
<div class="product_header">
<h2>Mobile Ready</h2>
<span class="dash"></span>
<h3><span class="currency_sign">$</span>20.00</h3>
</div>
<div class="product_thumb">
<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/95861562/max_w-560/MobileRun.png" class="fade_in" alt="Image of Mobile Ready">
</div>
</a>
</li>
Change the "href" of the link to an image url like this:
<li id="product_9230867" class="product">
<a href="THE_URL_TO_YOUR_IMAGE" title="View Mobile Ready">
<div class="product_header">
<h2>Mobile Ready</h2>
<span class="dash"></span>
<h3><span class="currency_sign">$</span>20.00</h3>
</div>
<div class="product_thumb">
<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/95861562/max_w-560/MobileRun.png" class="fade_in" alt="Image of Mobile Ready">
</div>
</a>
</li>
Now, if you want it to pop-up really pretty, you're going to need another solution. If you want a better solution, I'd suggest asking a more clear question with examples of what you've tried already.
Related
Semantic-ui is integrated with my laravel app. All buttons are working but Menubar is not working i.e whatever code I copied from documentation it is showing like that only.
I have linked these files -
<link rel="stylesheet" type="text/css" href="{{asset('semantic/dist/semantic.min.css')}}">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{asset('semantic/dist/semantic.min.js')}}"></script>
<div class="ui secondary menu">
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item"> Logout </a>
</div>
By default Home is active but when i click or focus on another item i.e messages or Friends , it is not showing as active otherwise hovering effect is working fine.
As you see, only the first menu item is marked as active in your code, so why do you expect any other menu items to be marked as active when you click on them?
<a class="active item"> Home </a>
You should detect which menu item is active when you render the menu and set active class to the necessary item.
So, for example, when you are on "Home" page your menu should look like this:
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
But when your are on the "Friends" page your menu should look like this instead:
<a class="item"> Home </a>
<a class="item"> Messages </a>
<a class="active item"> Friends </a>
And everything else depends on your implementation (either it's PHP or other server-side language if you generate your menu or JavaScript if you toggle its state in the browser).
I need to display date and time above Login in Magento page. I changed the Menus of My Account, Login with Contact Us & About Us, and now I need to display date and time above these options in header.phtml.
I used the below code:
'<div class="date-time">
<?php echo strftime('%c');?>
</div>'
Time and date is showing on site, but not exactly where I want. Any support will be highly apreciated.
Site: www.ozams.com
You just need to move your code above ul tag like:
<div class="header-right">
...............
<div class="clear"></div>
<div style="text-align: right;" class="date-time">
<?php echo strftime('%c');?>
</div>
<div class="clear"></div>
<ul class="links">
<li class="first"><a title="Contact Us" href="contact-us">Contact us</a></li>
<li class=" last"><a title="About Us" href="http://ozams.com/index.php/about-us/">About Us</a></li>
</ul>
</div>
I am newbie in Telerik (Kendo). I want to know how can I hide or show tab based on roles or authentication as per user. I guess its been done by Helper, but I am not sure how to do it.
Please help me regarding this.
Thanks in advance.
Regards,
DS
Its a bit difficult to provide you with the best answer without seeing what you have so far, but if your initializing the TabStrip using JavaScript you will have a list if tabs in your html:
<div id="example">
<div id="tabstrip">
<ul>
<li id="TabParis" class="k-state-active">
Paris
</li>
<li id="TabNewYork">
New York
</li>
<li id="TabLondon">
London
</li>
</ul>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</div>
<div>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
</div>
Give each of the tab list items an id.
Then simply show or hide the list item by Id using JQuery
$('#TabNewYork').hide()
Here is a working example in JSFiddle: http://jsfiddle.net/loanburger/9mLz5wnc/
I'm trying microdata for breadcrumbs on a development site, and I've followed Google's own example, but for some reason the actual breadcrumb doesn't preview in the Structured Data Testing Tool
This is how my code looks like:
<div class="back" xmlns:v="http://rdf.data-vocabulary.org/#">
<h3>
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Steaks And Game
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Wagyu Steaks
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">Tenderloin - Filet Mignon
</span>
</h3>
<div class="clear"></div>
</div>
And this is what the Structure Data Tool is showing me:
It's showing URL under the title instead of the breadcrumb links.
This is an example showing the breadcrumb links:
The test page is here
And the preview of the page using the Structured data tool is here
site is built using Asp.Net
I've tried a number of things like:
Using the › sign instead of ::
I've even copy pasted Google's own example code for microdata breadcrumb implementations:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
I've copy pasted the entire source code of the page on another page on a linux server and amazingly that validates correctly. I really don't know what to do further. Any advice would be appreciated.
I found a way to use the current Schema.org markup for valid breadcrumbs. It is important to not just append the breadcrumb links one by one, but to nest them and give all but the first one the 'child' itemprop.
<p id="breadcrumbs">
<span itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Green Dresses</span>
</span>
</span>
</span>
</p>
This is exactly how it works with Data-Vocabulary.org, it just uses the more current Schema.org markup instead. This will tell the search engines how your breadcrumbs are connected.
Use This SCHEMA strcture
**
Use this for Microdata for breadcrumber
**
<div class="breadcrumbs">
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
<a href="index.html" title="Go to Home Page" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href="product.html" title="Product" itemprop="url">
<span itemprop="title">product name</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href=".finalproduct.html" title="final product" itemprop="url">
<span itemprop="title">final product</span>
</a>
<span>></span>
</li>
<li class="category6"><strong>Final Product view</strong></li>
</ul>
</div>
**
Important: It also used for SEO Purpose
**
enter link description here
I have a fixed header.TPL file that is loaded on every page.
There's a DIV in this .TPL file with IMG SRC=xxx.png replacing the TEXT. (a twitter and facebook icon linking to the twitter page)
Ok, on the homepage it works well. The DIV is showing on the header with the image linking to the twitter page.
But when I go to another page, the DIV with the image disappear. All other DIVs are in the same way as before, only the DIV with the image has gone.
And if I change the image for a TEXT, it works fine. If I put an image again, the DIV only load on the homepage.
What's happening?
<div class="fullWidthBlock headerMenuBlock">
<div class="fixedWidthBlock">
<div class="headerMenuWrapper">
{module name="menu" function="top_menu"}
</div>
{extension_point name='modules\main\apps\FrontEnd\IWidgetDisplayer' HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
<div class="socialMenuWrapper">
<ul class="socialMenu">
<li><a class="twitterMenu" href="http://www.twitter.com/"><img src="modules/theme_iauto_grey/main/_files/icons/twitterblue.png" /></a>
<li><a class="facebookMenu" href="http://www.facebook.com/"><img src="modules/theme_iauto_grey/main/_files/icons/facebookblue.png" /></a>
</ul>
</div>
<div class="loginMenuWrapper">
{if !$GLOBALS.current_user.logged_in}
<ul class="loginMenu">
<li><a class="loginDialogControl" href='#'>[[Login]]</a></li>
<li><span>|</span></li>
<li><a href='{$GLOBALS.site_url}/user/registration/'>[[Register]]</a></li>
<li><span>|</span></li>
</ul>
<div class="loginDialogWrapper" style="display: none;">
{module name="users" function="login" HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
</div>
{else}
<div class="userGreeting">
<span class="welcomeMessage">
[[Welcome]], {$GLOBALS.current_user.user_name}
</span>
<span class="myAccount">
[[My Menu]]
</span>
<div class="myAccountDialogWrapper" style="display: none;">
{module name="menu" function="user_menu"}
</div>
</div>
{/if}
</div>
</div>
</div>
Solved.
When the image is inserted by CSS the DIV display the image not only in the homepage, but in every page.