I'm working on a project built on Volusion, but unfortunately this platform does not offer full interface edition capabilities so I am trying to edit some labels which are hardcoded into the HTML (I need them to show in spanish).
I tried multiple options discussed in this forum, but so far I am only able to add an alternative text "after" the labels through the CSS; take for example main title on Shopping Cart page (http://pkheu.ahnfg.servertrust.com/ShoppingCart.asp):
/* ========== ORIGINAL LABEL IS "YOUR CART" ============ */
.shoppingcart h2.v65-your-cart-title span {
visibility: hidden;
display: none;
} /*THIS DOESN'T DO ANYTHING AND WITHOUT THE SPAN IT DELETES THE DIV COMPLETELY*/
.shoppingcart h2.v65-your-cart-title:after {
content: " / Su Orden";
margin: 15px 0 0;
visibility: visible;
} /*THIS AT LEAST PERMITS ME TO ADD "/ SU ORDEN" AS A SPANISH ALTERNATIVE*/
Would appreciate any advise on effective way to fully substitute the content on the div on Volusion HTML interface (ie delete the original "Your Cart" from view). Thanks in advance.
Cheers! Max
The easiest way to accomplish what you want without using JavaScript would be to add the following to your template.css file.
h2.v65-your-cart-title { display:none; }
Then simply add the following HTML to the bottom of your article 64 code.
<h2 class="v65-your-cart-title-spanish">Su Orden</h2>
Related
I'm dynamically generating cards for a board game and for the sake of brevity on-screen I want all of the extra rules captions to only be displayed when the rule keyword is hovered over. I'm trying to avoid nested div tags here for a few behind-the-scenes reasons.
I have the alternate text setup with tags (shorted here with '...'):
<span title="Beasts of Nurgle secrete a Slime Trail ... "><b>Slime Trail</b></span>
and above, in the style section, I have:
[title]:hover:after {
position: absolute;
content: attr(title);
background-image: url('images/spanbg.jpg');
padding: 5px;
width: 250px;
border-radius: 8px;
border: 2px solid;
z-index: 100;
}
Initially when I hover over the text I get the title text formatted as desired, but a second later if the mouse cursor stays there I also get the default formatting for title show up on top (see attached image). The attached image shows what the initial display looks like before hovering for the extra second... with the unappealing and unformatted second copy of the title I can't seem to get rid of.
Weird second title text from formatted title
Anyone have suggestions how to get just the formatted title text that shows up for the span element without the additional default one? I'm not sure it's needed, but this is hosted on a node.js server being served via proxy from apache2 on the same host, and the behaviour has been confirmed in the latest version of Chrome and Firefox.
I don't believe there's any way of disabling the browser's default behavior for title. To get around this, you could use the aria-label attribute, instead:
<span aria-label="Beasts of Nurgle ... "><b>Slime Trail</b></span>
[title]:hover:after {
/* ... */
content: attr(aria-label);
/* ... */
}
I have a page which generates a phone number in HTML, like this:
<div class="phone">01987123456</div>
What I want is to simply put a space inside the number, like so:
01987 123456
The generated number and HTML will always be the same, but I only have access to client side code (HTML / CSS / Javascript / etc).
I want to find a way of achieving all of this without using Javascript if possible, so Ideally I am looking for an answer in CSS or HTML.
I'm pretty sure this could be done fairly easily in Javascript, but the client wants to make sure the phone number is formatted correctly even if Javascript is disabled (don't ask).
I want the most effective and efficient way of changing the number to what I want. If someone can figure out how to add brackets to the number (like this: (01987) 123456) as well as the space using just CSS/HTML you will immediately get marked as correct as well as my eternal gratitude.
EDIT:
I get that CSS is for design, Ive been a web developer for 15+ years. I could really do with a CSS hack to produce what I want, and explaining to the client the basics of web design is unfortunately not an option (they think they know better and I am in no position to dictate anything to them). I'm in a bit of a nightmare situation, and I need your help!
I know that content can be added to a page with CSS using content. I am aware of the ::first-letter method that #gillesc mentions in the comments. I was hoping something like this might help me.
The client uses modern browsers so a CSS3 solution would be fine.
And no, I cant change the outputted HTML.
I was interested to see if this could be done with CSS, even if it shouldn't be done! The following is quite hacky, ideally the phone number would be formatted server side or, if that isn't an option, with JavaScript.
A few caveats:
This requires an attribute to be added to .phone for the pseudo element to use. This may or may not be a deal breaker given that you seem to have limited access to the HTML
If the phone number is not in a suitable format (e.g. something like 01 987123456) it will not display correctly
A nasty little hack is used for IE as it doesn't calculate the width of the pseudo element correctly using ch for some reason. Credit to SW4 for this: https://stackoverflow.com/a/20541859
A solid background colour is required
The general idea behind this is as follows:
.phone
text-indent: 1ch; on .phone moves the whole text to the left by one character
.phone is set to position: relative; to allow the pseudo element to be positioned relatively to it
white-space: nowrap; ensures that this doesn't wrap onto a new line if there is a break in the number
.phone:before
background-color: white; masks the digits in .phone
border-right: 1ch solid white; hides the sixth digit in .phone, in effect this is the space
content: attr(data-phone); uses the data-phone attribute on .phone to populate the pseudo element with the same number
left: 0;, position: absolute; and top: 0; are used to position the pseudo element
overflow: hidden; hides any characters over the 5 character limit
text-indent: 0; resets text-indent: 1ch; set on .phone
width: 5ch; ensures that the pseudo element is only 5 characters long
The weird media query is the hack to target IE
Tested and working in FF 38.0.5, Chrome 43.0.2357.124 m and IE 11. Browsers not supporting the ch unit (such as Opera 12.17 and Windows Safari 5.1.7) seem to show the phone number in its natural state.
.phone {
position: relative;
text-indent: 1ch;
white-space: nowrap;
}
.phone:before {
background-color: white;
border-right: 1ch solid white;
content: attr(data-phone);
display: block;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 0;
top: 0;
width: 5ch;
}
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
.phone:before {
width: 5.8ch;
}
}
<div class="phone" data-phone="01987123456">01987123456</div>
JS Fiddle: https://jsfiddle.net/scarjnb1/
It's not possible using CSS, just JavaScript. Then it'd be:
<div id="phone">01987123456</div>
<script>
var el = document.getElementById('phone');
phone.innerText = phone.innerText.replace(/^(\d{5})/, '($1) ');
</script>
I am using Squarespace as my website builder. I have added a search icon above my blog feed https://www.livingwithphotography.co.uk/learn/ however for some reason the search box also appears on each blog post as well. This is what I don't want, instead I just want it to be shown on this page https://www.livingwithphotography.co.uk/learn/.
In order to code search icon I added this code in the site header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
I then added this css code
.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px;
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Lastly I then added this code to the PAGE HEADER CODE INJECTION
<div class="myTitle"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px"> <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</div>
<script>
$(document).ready(function() {
$(".myTitle").prependTo("#content");
});
</script>
I hope there is a way, thanks for your help :)
This is a little hacky, but it should work. Wrap the code where you prepend the div in this if.
$(document).ready(function() {
if(window.location.pathname == "/learn") {
$(".myTitle").prependTo("#content");
}
});
Lawrence,
In your CMS (SQ), the type of mod you're wanting here is actually best done in 'developer' mode. Essentially, there's only one collection-ID assigned to the blog itself, which is why when you inject to the main page/content area, it appears across the board as you've noticed. The only differentiating factor is that blog overview pages have added class of "blog-list", while blog entries pages have added class "blog-items" (again, both still contained within the same collection).
So that all said, if you're trying to do this with Jquery in an existing template on a blog module specifically (and you are not toggling into developer), one way to workaround is to target the first instance of the ".entry-header" class on the blog [instead of using 'prependTo' #content].
After targeting the first instance of the entry-header, you would additionally need to also hide the display on the '.blog-items' pages as well (these are the actual entry items themselves). With this approach, your new class "myTitle" should appear only on the blog overview page (in your case: /learn/), but keep it hidden on actual article entry view.
So instead of what you have now, try instead using:
$(document).ready(function() {
$('.myTitle').insertBefore('.entry-header:first');
});
Then in Custom CSS put:
.myTitle {
font-size: 30px;
margin: 40px auto;
padding: 10px;
text-align: center;
width: 201px;
}
.blog-item .myTitle {
display: none;
}
As a note, while it's not totally "proper" form, many just put the whole shebang right into the blog module header since it's page specific and won't run globally.
In that case, you would just input all your code directly into: > Configure Blog > Advanced. Here's a screenshot example (note: shot taken directly from their UI and why the line wraps look funky):
Last note: This method does work, however, bear in mind that if you've manipulated other elements in your site as well (which I wouldn't know if you did) then those other changes could also impact.
Hope this helps.
You could use the Squarespace search block and summary block to do this without any coding:
Just create a new page.
Insert a "search" block and constrain it to only search your blog collection.
Insert a "summary" block and set it to display your existing blog.
Here is an example I set up on my site to demonstrate: http://www.figjamit.com.au/example
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.
Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.