I'm trying to add (Download on The App Store) buttons (for both the app store and google play) in my nopcommerce website footer.
Any idea on how I can get it done?
Like This One
I'm not sure if any plugin is available for your requirement. But I can give you a reference to modify your code.
Go to: Presentation > Nop.Web > Views > Shared > Components > Footer > Default.cshtml
After the div <div class="footer-block follow-us"> add your code:
<div class="footer-block information">
<div class="social">
<div class="title">
<strong>Download it from</strong>
</div>
<img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" width="140" height="auto" />
</div>
</div>
It will display as below, also you can add for app store.
Perhaps, you can create a separate partial view and use here; that'd be the best practice instead displayed here.
Also, I'm not good in css, so didn't make much effort.
Related
I work for a company and have taken over responsibility for maintaining the website. The company hired an outside agency to create its website. They used Wordpress and templates. I'm used to coding with things like Divi...I'm not 100% sure how to manipulate their work.
http://comfortcarehomehealth.com. We have a fly out on the right hand side that says "Contact". It used to house a form that wasn't directing correctly so I deleted the form. However, I have no idea how to delete this little "contact" piece. I've searched within the Wordpress theme customizer and attempted to find it in the editor but I don't really know what I'm looking for. I'm not a coder so...
How do I get rid of the "contact" fly out completely?
I can find it in the view source:
<div class="cover" data-img="https://comfortcarehomehealth.com/wp-content/uploads/2015/09/CC_Vol2_1440x620_HIRES1.jpg">
<div class="help">
<div class="container">
<a href="#" class="button-open">
<i></i>
<span>Contact</span>
</a>
<div class="form">
<div class="header">How can we help you?</div>
</div>
Any help is much appreciated!!
I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.
I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'.
The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.
I'm setting a responsive Navbar just like this
<template name="nav">
<div class="row navbar centered" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
<ul id="nav-ul" class="eight columns">
<li>Quienes somos</li>
<li>Marcas</li>
<li>Servicios</li>
<li>Laboratorios</li>
<li>Contacto</li>
<li>Otros</li>
</ul>
</div>
</template>
but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.
you can see a sample here
any idea on how to get it up and running?
Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.
I assume you want to run the js script after the template is rendered. In this case, you need to write like this.
Template.nav.rendered = function() {
// Run the js to render the dropdown or whatever.
}
This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.
In addition, you can refer the official document here http://docs.meteor.com/#template_rendered
Very new to webdev here, but trying my hand at Meteor! I'd like to create a collection that contains some text, a link, and an image and show each item in the collection in a grid-type layout similar to Pinterest.
I have found some resources, such as Meteor-isotope (https://github.com/digioak/meteor-isotope), cast.js (http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid-layouts-with-cast-js) and even maybe using twitter bootstrap's own grid system?
Is there a recommended approach to a gridview with Meteor? Thank you.
Masonry works nicely for me (here's my app). Simply add it to your project.
meteor add sjors:meteor-masonry
In order to make rendering work correctlly with images, you'll also need to add the imagesLoaded library.
meteor add mrt:jquery-imagesloaded
Here's an example on how to use it in your code:
result.html
<template name="resultPage">
<div id="result-container">
{{#each posts}}
{{> post}}
{{/each}}
</div>
</template>
<template name="post">
<div class="result-item">
<a href="{{url}}" target="_blank">
<img src="{{url}}">
</a>
<div class="author">
Submitted by: <strong>{{author}}</strong>
</div>
</div>
</template>
result.js
Template.resultPage.rendered = function() {
var $container = $('#result-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.result-item'
});
});
};
I found this sample project and ended up learning from it. I'm not sure if it helps others, but this is the project: http://isotest.meteor.com/
I went with isotope myself, but not the meteor package. I ended up having to use the library itself and then use jquery ImagesLoaded to do a isotope reLayout call. The way meteors Template..rendered works doesn't take into effect images or something so my "blocks" would intermittently overlap from time to time. I stopped developing the site but you can see how I went about it at www.mmohype.com. Click any game.
Can an experienced MS Visual Web Developer please give some guidance(links welcome as well) on how best to set out content sections in masterpages.
The microsoft documentation shows (here)creating masterpages using tables. However it is my understanding that the use of tables is not really good practise, somewhat frowned upon.
I have got a masterpage but on my subsequent derived pages I am struggling to get content on to the content area without using a table in the code.
I know this is very basic but it isn't defined very well and I am more used to the direct drag and drop of windows forms.
You might want to check this tutorial out:
http://www.asp.net/web-forms/tutorials/master-pages/creating-a-site-wide-layout-using-master-pages-cs.
They don't use a table element, but div elements & some css.
I think this has more to do with web design skills than being expert in Visual Studio master page. MasterPage only allows you define regions to put stuffs, the design is up to you, tables or div.
You can even get well designed templates from the web, paste the markup in your MasterPage file and fill in the ContentPlaceHolder tags where you want stuffs to be e.g. SideBar, Navigation Menu, MainContent, Footer, etc.
<div id="header">
some header content here
</div>
<div id="layout">
<div id="leftsidebar"></div>
<div id="maincontent">
<!-- Content Pages will go here -->
<asp:ContentPlaceHolder runat="server" ID="MainContent">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer">
some footer content here
</div>
That's just a sample. It can be more beautiful, complex, slick etc. than that. It depends on your skill as a web designer
I use MODx Revolution ver.2.20 with Gallery module ver.1.4.0.
So, I need to get the number of images in a folder. I googled it, but I didn't find any working solution.
How can I get it? Thanks.
Ok, this is the solution.
Snippet call
[[!GalleryAlbums? &parent=`5` &showAll=`1` &sort=`rank` &dir=`ASC` &limit=`50` &rowTpl=`b-top-img`]]
b-top-img snippet
<!-- p-cover -->
<div class="p-cover [[+id]]">
[[!Gallery? &album=`[[+id]]` &thumbWidth=`300px` &thumbHeight=`300px` &thumbTpl=`b-middle-img`]]
</div>
<!-- /p-cover -->
b-middle-img chunk
<div class="p"><img src="[[+thumbnail]]" alt="[[+name]]" /></div>
If you are familiar with PHP you can create your own snippet from this example — http://rtfm.modx.com/display/ADDON/Gallery.GalleryItem.GalleryItemPagination