Client asked me to make hover effect on Add To Cart button but only for Single product, i have managed to do that via css, but now he instructed me that he want that solution implemented inside his Customize Panel so that he can change the color of that product himself.
Any help would be appreciated here, since i don't even know where to start, or how that is supposed to look.
For start i would like to know weather this is possible or not?
What you are looking for is information on "Theme Settings". Shopify sometimes refers to this as the Storefront Editor
A tutorial is here: http://www.tetchi.ca/shopify-theme-from-scratch-part-14/
You're going to have to understand some of that and try some things before we can be of much further help
Found the solution on how to add this based on your tutorial links, now that I see it looks pretty simple...but in case someone get stuck on a similar problem.
I have achieved this with following 3 steps:
1: First adding unique ID to every button based on the product page, in file that is generating every product page:
id="atc_single_product-{{ product.id }}"
2: For generating option in Customize Panel, added following inside Config file "settings_schema.json":
{
"type": "color",
"id": "atc_single_product-7214350529",
"label": "Montreal #9",
"default": "#333333"
},
Added some basic HTML for hover effect that will call to action and combine both step 1 and 2 and once hovered :
#atc_single_product-7214350529:hover, input#atc_single_product-7214350529[type="submit"]:hover, input#atc_single_product-7214350529[type="button"]:hover
{
background: {{ settings.atc_single_product-7214350529 }};
border-color: {{ settings.atc_single_product-7214350529 }};
outline: none;
}
End Result: http://i.stack.imgur.com/M2RiG.png
Maybe it doesn't look pretty, but it hey it works. Thanks!
Related
I need to add my custom button to the order page, best if near edit/delete, it should just open link for some route with orderId parameter.
Also it would be nice to remove unnecesary buttons like discount and coupon code.
How to do that? I tried to do smth with placeholders but didnt succeed.
These buttons are rendered using actions:
The code that renders "Edit" and "Delete" buttons
Actions documentation
But, if your button just renders a link, you can override the {% block navButtons %} block in OroOrderBundle:Order:view.html.twig template. See how to override templates.
Or, you can extend the button list without template inheritance, using placeholder view_navButtons. See placeholders documentation.
Decided to use action as its very smart and powerful mechanism even for such simple thing as download button, dont need to override templates or work with templates at all. So here is all that need to display the button:
#MyBundle/Resources/config/oro/actions.yml
operations:
download_action:
label: Download
button_options:
icon: fa-download
routes:
- oro_order_view
entities: ['Oro\Bundle\OrderBundle\Entity\Order']
for_all_entities: false
actions:
- '#redirect':
route: 'test_download'
route_parameters: {id: $id}
new_tab: true
preconditions:
'#equal': [$internalStatus.id, 'open']
The only confusing thing is that button appeared not only on oro_order_view page but on edit page too despite of specified route, anybody knows why?
Because I'm using a logo in my header, I don't need the title-text. But I would like to have a browser-title.
So I need to set a title and have to hide it in the header - but how?
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
I assume that your wiki looks like dokuwiki.org (meaning that you are using one of recent versions and default template). If not the approach still should be the same, search for $conf['title'] in your template.
There is a block in lib/tpl/dokuwiki/tpl_header.php:
// display logo and wiki title in a link to the home page
tpl_link(
wl(),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="[H]"'
);
Remove <span>'.$conf['title'].'</span> from it.
Each update of Dokuwiki engine will overwrite this change. You'll need to repeat it manually after each update or copy paste doku template into a new one and update this new template manually.
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
This is the good answer. It works for me.
In prestashop I want to have my cart block in displaynav position. I hooked it from header to displaynav hook, but it does not display correctly, css has to be modified. Can somebodey help me, what i need to change in what css.. thank you !
I did something that works but is quite dirty. Hopefully, someone will post a better answer. Also, I assume you're on the downloaded version of PS and not the cloud one. To my knowledge you can't customize like that with the saas solution :s
So I went to the css of my blockcart module ( themes\default-bootstrap\css\modules\blockcart\blockcart.css ) and adapted the first few lines to this
#header .shopping_cart {
position: absolute;
margin-left:860px;
padding-top: 0px; }
I also commented out the little arrow for convenience ( in "#header .shopping_cart > a:first-child:after" comment the line with "content" ). Try using F12 and make live edits, it's quite useful with PrestaShop ! You get to know to which files are the elements related to.
Anyway, hope it helped and that someone will propose a cleaner way to do this ^^
video.js - hello, newbie here, and i'm hoping someone could tell me what code i would need to place in the video-js.css file so that the full screen button does not show ?
have tried some codes I found online, but the button still shows in all browsers.
fingers crossed!
In your css look for the block of CSS marked:
.vjs-fullscreen-control { ... }
or
.vjs-default-skin .vjs-fullscreen-control { ... }
Within that block add display:none;
instead of display:none; you can use visibility:hidden;
the advantage is that the width of your tool bar remain the same and is correctly displayed.
I've been playing around with Dojo over the last couple of days.
The script below changes the background position of the list item when the mouse is over the link.
dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {
dojo.connect(linkTwo, "onmouseover", function(evt) {
dojo.query('#main-menu ul li').forEach(function(linkThree) {
dojo.style(linkThree, {
"backgroundPosition": "right center",
});
});
You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/
I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.
Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.