I have a survey that I am creating, but it may be difficult to complete if the respondents do not have additional information about the topic.
I would like to create a button to redirect the respondents to a specific pdf for more information.
I can very easily have them click the link. But a button would be more professional and pleasing to the eye.
Here is the link: http://sfrc.ufl.edu/Extension/FFSnl/FL_Land_Steward_5.1.pdf
Add this to your question text (in HTML mode):
<button type="button" onclick="window.open('http://sfrc.ufl.edu/Extension/FFSnl/FL_Land_Steward_5.1.pdf');">Click me</button>
You can add the following to the HTML view of your question or "Source View" of the Rich Content Editor (You may consider making a new descriptive text question for the button alone). It essentially is a link that opens the PDF in a new tab but looks like a button.
<div style="display:block; background: #0077CC; padding: 8px 15px; border-radius:3px; color: #fff; width:95px; font-family: sans-serif; text-align: center">View PDF</div>
What the button would look like
You can edit the style attributes to change the background color, font color, or whatever else you want to change.
Related
I have a html code that i'm trying to edit, but it seems like a theres some css with it but I want to make it so that on checked there's a strike through and when all checkboxes are complete a modal comes up that says congratulations on to the next step. I've include the html and a screenshot of what I'm talking about. Very novice at this stuff.
https://www.w3schools.com/code/tryit.asp?filename=GCBQRUJTL64Yenter image description here
if (!wlcl_site_url_post) {
var wlcl_site_url_post = 'https://rachelwhynot.com';
}
input[type=checkbox]:checked + label {
color: darkgrey;
text-decoration: line-through;
font-style: italic;
}
<h3 class='wlcl_title chk_title_8'>Action Items: Tracking Your Onboarding Process</h3>
<input class='item_chk shortcode_chk' id='item_chk_0' type='checkbox' name='item_chk[]' value='8-32-14' />
<label for='item_chk_0'><span class='item_name_8'>Watch Video Training</span></label>
Give this a shot. You can do some pretty cool things with CSS attribute selectors and different inputs.
You could also use jQuery to do this in a $(document).ready() function, but that's certainly not the only way to do something like that.
When I add following code to MailChimp editor it display me correct version, but after sending test email all links become blue.
<span>info#mysite.com</span>
<span style="margin-left: 15px; margin-right: 15px">|</span>
<span>Unsubscribe</span>
</span>
What is interesting that gmail show links blue, but google inbox show correct version.
Any ideas how to solve this issue?
Make anchor tag css as follows
<style>
a {
color: #000000!important; // Black
}
</style>
Change the anchor tag color to whatever you want.
I am using Adobe Contribute (HTML editor) to edit a website. I have two links on my page that both link to the same PDF file type. However, when the links are clicked they are displaying the PDF differently in IE (the issues does not occur in Chrome): One with the PDF tools and thumbnail sidebar, and the other just as a plain PDF file by itself.
One looks like this:
The other looks like this:
Here is the HTML code:
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 1 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK</p>
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 2 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK 2</p>
What I need is for them both to look like the second one. Any ideas as to what might be causing them to come up differently?
I'm pretty sure that Chrome and IE will display PDF's differently. It's just how they were designed. I'm not to sure about how to make them look the same, I'm not even sure that you can. But, I think it's just the browsers themselves.
Turns out that it was a setting within the PDF itself that I needed to change. The following settings fixed my issue.
Go to File>Properties
In the Document Properties window, select the Initial View tab
In the Document Properties window, choose "page only" for Page layout, and check the "hide toolbars" box.
In the Document Properties window, click the OK button
Go to File>Save
Reopen the document
html has link element
as well as button element
<button></button>
in fact their responsibility are different but... sometimes design want them look the same.
I don't any clue to style them look exactly the same, beside reset display, margin, padding, border, background, font etc... they won't look the same at the end and sometimes they screw up each other default positioning attribute.
so my initial solution as below:
example of a link
designer want a link look like a button. I wrap a button in a link!
<button class="coolbutton">look cool</button>
I like this solution, especially i think a button are a lot easier to style.
then the a tag will response to the click and link
now, example of a form :
a button for submit the form and a links beside the button. they need to look the same.
and the link button shouldn't submit the form.
but it is inside the form...
<button class="coolbutton onclickreturnfalse">I just want to link it</button>
<button> Submit </button>
the class .onclickreturnfalse are bind to javascript click event to return false anyway. so it won't submit the form... but the problem is.. it return false to the link also.. so the link won't work...
sorry for my poor description and title. I need some opinion now. how a web designer solve these problems?
#
so i put my CSS here
#
button,a.bt1,a.bt2,a.bt3{
border: 1px solid rgba(152, 152, 152, 0.1);border-radius: 2px;color: #666666;cursor: pointer;
font-size: 8pt;font-weight: bold;min-width: 54px;padding: 4px 8px;text-align: center;
}
button,button.bt1,a.bt1 { background-color: #F5F5F5; }
button.bt2,a.bt2 { background-color: #F5F5F5; color:#BF0000; }
button.bt3,a.bt3 { background-color: #BF0000; color:#EFEFEF; }
button:hover,a.bt1:hover,a.bt2:hover,a.bt3:hover{
border: 1px solid rgba(208, 0, 0, 0.1); text-decoration:none;
}
seriously... they look a little bit different :(
You should either use a button or an anchor, but I don't see why would you use a button inside a link. You can style the anchor to look as a button or simply use a button and handle the click event.
For example, clicking on this link will not cause a postback (with JS enabled in the browser): <a href="#" class="coolbutton" onclick="alert('test'); return false;" />
I want to have image button for "browse" and "upload"
I have textbox using the following code:
CSS
.uploadpathdiv
{
margin:0;
height:44px;
width:464px;
background:url('images/img-upload.png') no-repeat bottom;
}
.uploadpath
{
background:none;
border:none;
width:400px;
height:40px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
HTML
<div class="uploadpathdiv">
<input class="uploadpath" name="path" type="text" />
</div>
<img src="/themes/scaccarium/images/button-upload.png" />
<img src="/themes/scaccarium/images/button-browse.png" />
The image code is for both "browse" and "upload" button.
Please help me to correct the above code so that when i press the browse button i get "file selection option" as you see when you use <input type = "file" name="browse">. Secondly, the path of the file must be shown in the textbox above.
Thirdly when i press the upload button the file should be uploaded
If you label an image with the label tag, you can click on the image and it will select the browse button.
<div id="fileInput">
<label for="FileID"><img src="ImageURL"></label>
<input type="file" id="FileID"/>
</div>
It is not possible to target the "browse..." button of file upload controls via CSS.
A HTML-based workaround can be found here: Styling an input type="file"
not sure whether it can do exactly what you need, but I think that's the closest you can get.
If you want full control over the control (no pun intended) you would have to use a Flash-based uploader like SWFUpload. Note that those uploaders work a bit differently from a normal file upload control, so you may need to change your workflow to get it to work, and decide whether it's worth the effort.
Most of the CSS properties we usually use to style form controls don’t have any effect on the upload control, there are ways to style it, a good example is Here
This technique basically sets the opacity of the control to 0 and placed another "styled" button underneath it. thus when clicking on the style button you are actually clicking the upload control.
I have spent many hours battling with custom file upload controls for clients and have found by far the best approach is making use of Valums jquery file uploader everything is already built and you can customize as much as you want, also has drag and drop functionality.