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.
Related
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
I am working with drupal 8 and Ubercart. I am trying to change the color of the "Add to cart" button from red to green. Below is the code on each products page.
<input name="op" class="button js-form-submit form-submit" id="edit-submit- 32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32">
So what I did in my css file was the following...
#edit-submit-32
{
color: #FFF;
background-color: #0F3;
font-weight:bold;
}
This obviously worked for this one particular product but I was wondering if there was some CSS I could use that would make this change for all my current products and all future products? The code for each products exactly the same only difference is the id tag for each product. Any help is greatly appreciated.
The first thing I would do is identify if all of these kinds of buttons have a similar parent container and then use that as a parent selector:
<div class="add-to-cart-wrapper">
<input name="op" class="button js-form-submit form-submit" id="edit-submit- 32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32">
</div>
.add-to-cart-wrapper .button {
color: #FFF;
background-color: #0F3;
font-weight:bold;
}
Without more HTML context, I can't provide what the actual parent selector would be - but for sake of example I have added a div with the class "add-to-cart-wrapper". You would replace this selector with an applicable one.
It's also a good rule of thumb to try and use classes rather than IDs for your CSS.
If you wouldn't mind changing all submit buttons, this would work:
.form-submit
{
color: #FFF;
background-color: #0F3;
font-weight:bold;
}
Or, if all of the buttons have value="Buy Now", then you could do this:
input[value="Buy Now"]
{
color: #FFF;
background-color: #0F3;
font-weight:bold;
}
With Drupal (and CMS's in general) you need to look at the patterns that are generated by the theme to write your selectors. Whenever possible (and with Drupal's default themes it's nearly always possible) you want to avoid IDs and use classes. The classes are intended to be used to target multiple elements and help you write reusable elements.
It's worth taking a little time reviewing the generated HTML in some detail to get your head around what's being generated. You may also want to review some of the basic themeing guides so you can understand how you can take control of the generated markup.
I want to make some custom form elements. Which is the best library to use to make custom form elements ?
Mainly i am looking at File upload and Select Box.
The rest of the set i can style it in CSS3.
Harsha bhai try making your own design, it will be a good learning experience, because it is easy
You just have to understand few tricks (like for the choose-file element that you see),
these tricks just involve overlaying the non-stylable elements with divs that you create.
Use jquery/css for quikly learning how to position these divs on top of non-stylable elements, once this is done it will be fairly same across all browsers, but there is a slight difference like for the choose file element. I have given the necessary html,jquery that I use, if you have any doubt you can ask another question.
$(function(){
$('div#input_file_outer input[type=file]').change(function(e){
$('div.file_name').html($('div#input_file_outer input[type=file]').val()); });
$('div#input_file_outer input[type=file]').css({'cursor':'pointer'});
if($.browser.opera) {
$('div.file_name').css({'float':'left'});
$('span.input_file_label').css({'float':'right','cursor':'pointer'});
}
if(!$.browser.opera) {
$('span.input_file_label').css({'left':'-4px'});
}
$("div.input_file_cover,div#input_file_outer").css( { 'width':$("input.upload_file").outerWidth()+9+'px', 'height':$("input.upload_file").outerHeight()+2+'px', 'cursor':'pointer' });
$("div.file_name,span.input_file_label").css( { 'height':$("input.upload_file").outerHeight()+'px', 'cursor':'pointer' });
});
<input type="file" name="photograph" class="upload_file" title="Upload your jpeg/jpg photographs" style="cursor: pointer; ">
<div class="input_file_cover" style="width: 249px; height: 23px; cursor: pointer; ">
<span class="input_file_label" style="left: -4px; height: 21px; cursor: pointer; ">
Choose File
</span>
<div class="file_name" style="height: 21px; cursor: pointer; ">
File name
</div>
</div>
Sorry for typos, I have to rush
you should try foundation css front-end framework
Should do the trick for you
http://foundation.zurb.com/docs/forms.php
If you know your way around Jquery, that is the best way to create custom elements.
For custom select buttons I'd suggest using the Jquery library customSelect. It lets you create select elements with a variety of things like text boxes inside of the select, radials, etc.
If you want a prebuilt fancy looking file upload with a progress bar, I'd suggest using FancyUpload
I have an alerting system that sends out alerts by email. I would like to include diagnostic information but only make it visible if the end user clicks a [+] button.
Is this possible to do in email? Can I do it without using Javascript and only CSS?
If it helps, most of my clients use Outlook, iPhones, or Blackberries
Most likely, not. JS has been disabled in a lot of clients, due to viruses and stuff.
A workaround might be to include a URL to the full error-page with all details, and edit your mail to only summarize the diagnostic information.
Also, you could try to see if you can use :hover CSS, to show the element with some nasty selectors... CSS3-style? http://www.campaignmonitor.com/css/
You can do this with a checkbox, but I don't know if it is cross email client compatible. I would thoroughly check it. Here's some more information:
Reveal and hide a div on checkbox condition with css
There are tonnes of other examples throughout the web. Here is a really good working example on Litmus which uses a Hamburger Menu:
https://litmus.com/community/discussions/999-hamburger-in-email
Here's the simplified version:
<style>
#hidden-checkbox:checked + div #menu{
... css to display menu ...
}
</style>
<input id="hidden-checkbox" type="checkbox">
<div>
<label for="hidden-checkbox">Hamburger Button</label>
<div id="menu">Menu Content...</div>
</div>
Based on https://stackoverflow.com/a/31743982/2075630 by Eoin, but using classes to avoid the use of IDs for this.
Edit. For me it works for standalone HTML files, but not in Emails; In Thunderbird, the checkbox is not changeable, and in Gmail <style> tags are stripped before displaying the email and applied statically as inline style attributes. The latter probably means, that there is no way to make it work for Gmail recipients, for Thunderbird I am not sure.
Minimal example
<style>
.foldingcheckbox:not(:checked) + * { display: none }
</style>
<input type="checkbox" class="foldingcheckbox" checked/>
<div class=>Foldable contents</div>
.foldingcheckbox:not(:checked) selects all unchecked checkboxes with class foldingcheckbox.
.foldingcheckbox:not(:checked) + * selects any element directly after such a checkbox.
.foldingcheckbox:not(:checked) + * { display: none } hides those elements.
The attribute checked makes it so, that the default state of the checkbox is to be checked. When omitted, the default state is for the checkbox not to be checked. The state is preserved when reloading the page at least in this simple example.
Larger, visually more appealing, example
In order to demonstrate how it works for larger examples:
<style>
.foldingcheckbox { float: right; }
.foldingcheckbox:not(:checked) + * { display: none }
h1, h2 { border-bottom: solid black 1pt }
div { border: 1px solid black; border-radius: 5px; padding: 5px }
</style>
<h1>1. Hello there</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
<h2>1.2. Nesting possible!</h2>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
</div>
</div>
<h1>2. More things.</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>This is another test.</p>
<p>This is yet another test.</p>
</div>
I don't think you can, email clients won't allow you to run javascript code due to security issues. And you can't do what you want only using CSS.
you can't respond to click events without js.
you can try an approach using :hover on css, but i'm not sure how many email clients support it
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;" />