I need to hide the +100 or -100 price next to the values in my option field.
The preview for the form looks like this with the prices under accommodations:
http://trailtalkpc.com/trailtalkwp/?gf_page=preview&id=3
I tried to target the prices in CSS and use {display:none;} to hide them but am having trouble with it. So far I've been able to target the options with this:
.medium.gfield_select {display:none;}
This targets the entire drop-down menu. Anyone know how to target the prices from here? Here is the code I have been looking through to target the prices:
<select name="input_12" id="input_3_12" class="medium gfield_select"
tabindex="11">
<option value="Bare Bones (No Accommodation Needed)|2500" price="">
Bare Bones (No Accommodation Needed) </option><option value="Washington
School House: Town House|5000" price=" +$2,500.00">Washington School House:
Town House +$2,500.00</option><option value="Newpark Resort: 1 Room
Suite|4000" price=" +$1,500.00">Newpark Resort: 1 Room Suite
+$1,500.00</option><option value="Newpark Resort: (Family) Townhouse|4500"
price=" +$2,000.00">Newpark Resort: (Family) Townhouse +$2,000.00</option>
<option value="Waldorf Astoria: King Suite|4000" price=" +$1,500.00">Waldorf
Astoria: King Suite +$1,500.00</option>
</select>
Thanks!
Jen
Use the following code in your theme's footer or within GF HTML Field. Worked for me.
<script type="text/javascript">
function gform_format_option_label( fullLabel, fieldLabel, priceLabel, selectedPrice, price, formId, fieldId ) {
return fieldLabel;
}
</script>
Directly assinging css to part of text is not possible. You need to run a javascript after form load which will wrap the price inside span. Assign a class to span and define display:none for span class.
Related
Do you guys have any idea how i can colorize the backend variation list?
Let's take product "Jeans" as an example. This product has 3 variations (sizes) like size 6, size 8 and size 10. Now, let's say that just 2 variations are available.
If I want to edit the product in backend, and if I click the Variations icon, I have to expand all three variations just to see which one is the one sold out.
I was thinking to a solution in which the "sold out" variation is colored in red and the available one in green. I think this way it's easier to change the status from available to sold out.
Example provided below:
- The only available (in stock) variation is 38. The other ones are not available (sold out/out of stock).
enter image description here
Do you have any idea how this can be done in backend?
Thanks a lot!
Unfortunately the template has no hooks or filters in that tag that you could use to do that, so the only way to do it would be with javascript, or overriding the template.
The javascript you'd need would be like this:
$( '#woocommerce-product-data' ).on( 'woocommerce_variations_loaded', function() {
jQuery( '.woocommerce_variation' ).each( function( index, variation ) {
var $variation = $( variation ),
stock = $variation.find( '[id^="variable_stock_status"]' ).val();
$variation.addClass( stock );
} );
} );
This would add a class to each variation item, which you could then use to style the heading, like so:
.woocommerce_variation.instock h3 { background: #DEF0D8 }
.woocommerce_variation.outofstock h3 { background: #F2DEDF }
Better would be to use the :after pseudo to add a little coloured "dot" before the variation ID.
I am currently using the Flatiron Template in Squarespace 6. Each image in the gallery currently displays the image, a title, and -view- under it. I am looking to change -view- to a different name (a city to be specific) that is unique to each gallery item.
The source code for one of the grid items is this:
<script>
Y.use('squarespace-ui-base', function(Y) {
Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
});
</script>
<!-- Main Grid -->
<div id="grid" data-collection-id="53ebab59e4b0c8271c405596">
<div class="item">
<a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3" >
<div class="wrapper">
<div class="project-title">
<h2>DIESEL POP-UP</h2>
<h3>— view —</h3>
</div>
</div>
<img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg" data-load="false" />
<noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>
</a>
</div>
I have tried using this in the custom CSS section (just to attempt at targeting one item) but it has only effected the page that the image links to, not the image itself.
.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
background-color: red;
}
Is there a code that can target each individual element?
Go to:
Page > Settings > Advanced > Header injection (Index page)
Then paste the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".item:nth-child(1) h3").text("1st item");
$(".item:nth-child(2) h3").text("2nd item");
$(".item:nth-child(3) h3").text("3rd item");
$(".item:nth-child(4) h3").text("4th item");
});
</script>
Cool. Now you can change the text in the quotations (1st, 2nd, 3rd, 4th item) to whatever text you want to replace 'view'. If you have more than 4 galleries in the index, you can copy a line and paste it below, but just make sure to increase the nth-child item from (4) to (5).
Hope that helps!
Thanks for adding the additional data. Unfortunately you cannot do this. Changes in SquareSpace are global changes. You can make a cosmetic change to all galleries but you cannot target a specific gallery by ID. Squarespace object IDs are dynamic and session based. If you target a specific object ID in your CSS, once you refresh the page the ID will change and the CSS will no longer be valid.
However if there is a scenario where you have individual galleries on separate pages then you can work around the global change by inserting the CSS at the "page" level under settings and not a the site level that calls the object category (not the object ID).
Also changing the content of a label is not a css change. That is an HTML change. In Squarespace you cannot modify/hack the actual HTML in the templated versions.
I'm trying to find an element by a CSS selector. I have a script which I'm using on multiple sites, and there is the same element, but with different classes. Is there any way to find by something like that:
css=div[(id='resultVersionA']||[id='resultVersionB')]
It must work for my next elements
#first-order price, #first price input[type='submit']
To be more clear: In upon query I want to select button which is under div which is I 'first_order price' OR 'first price'.
This should do it:
#first-order price input[type='submit'], #first price input[type='submit']
#first-order price, #first price input[type='submit']
Do both elements have different IDs as well as classes? If they have different IDs you could just use:
document.GetElementById('resultVersionA');
Otherwise, if this element is only used once on the page with a given class, then:
var rsltVerA = document.GetElementsByTagName('div').getClass('resultVersionA');
var rsltVerB = document.GetElementsByTagName('div').getClass('resultVersionB');
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.
I am using a Wordpress 3rd party theme and it limits me because for customization i need to (guess what) pay even more... even for small things like this...
I have this class which shows me the "€" currency sign after the price "1000 €"
But i have a price range like this: 1000 - 2000 €
How can I put the currency sign after the 1000, so it will look like this (1000 € - 2000 €) ??
HTML code :
<span class="post-rice"><span class="text">Prices:</span>6000 - 7000</span>
At this moment i use this CSS code:
.post-rice:after{content:"€";}
.post-rice:before{content:"€";}
But with those CSS codes I have the price like this:( € 1000 - 2000 € ) ... The :before method is not correct. Can you please give me an advice ?
Something like this is probably what you are looking for. Right now the HTML interprets your span as one block of text, so the :before selector will put content in front of the whole text block.
HTML
<span class="post-rice">
<span class="text">Prices:</span>
<span class="price">6000</span> - <span class="price">7000</span>
</span>
CSS
.price::after {
content: "€" // alternatively use "content: €"
}