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.
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.
The question I want to ask is, "Is it possible/good practice to refer to a child of an element that is not a direct child?"
For instance, if you have HTML like this:
<form class="formation">
<p>
<span>
<input class="phone input">
</span>
</p>
<p>
<span>
<input class="text input">
</span>
</p>
</form>
And you want to refer in CSS to the inputs only in that particular form, so you call the class of the form followed by the class of the inputs without referring to the elements in between, like this:
.formation .input {
width: 10px;
}
will this work properly?
I tend to think I've done this already on projects and it has worked properly but usually I refer to all the children in between (because I don't go that deep). But I'm currently working on a media query for a wordpress site that doesn't seem to be respecting this rule. Is this bad practice? Or is this downright incorrect? Thanks for all your help!
Yes, it is not only possible but also advisable to do so. Choose your selectors for your css rules as lean as needed to reduce dependency on your markup structure. This is not only wise for performance reasons, it also saves you quite some work in case your markup should ever change, e.g. later on you notice the span is not needed any longer and you remove it to keep your markup as clean as possible. In case you used the full DOM path to your .input you will then also have to adjust your css selectors. Same if for any reason in the future your <p> should become a <div>.
Just make sure you give the rules as much DOM context as necessary to not apply your rules to the same classed element in other contexts (if you have any at all, and if you want to apply a different set of style rules for it).
Yes, it'll work fine. What youv'e got with .form .input allows for any number of intermediate nodes between the two classes.
If you'd had .form > .input, then your CSS wouldn't match at all. > is the "immediate descendant" selector, so
.form .input { color: green }
.form > .input { color: red }
<div class="form">
<div class="input">This is red</div>
<div class="whatever">
<div class="input">This is green</div>
</div>
</div>
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'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>
The parent element is <div class="tagcloud">
Normally, with the theme I'm using, I can add custom styles like this
.custom .tag-link-1- {font-size: 10px}
but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?
Not in a backwards compatible way, no.
CSS 3
a[class^='tag-link-'] {
font-size:10px;
}
I would define a numberless class to hold all the common style info.
.tag-link { font-size:10px; }
Then attach it to each element.
<a class="tag-link tag-link1">Link</a>
You have two options that will work well for you in this scenario.
Option 1: Use CSS Selectors
If your tags are wrapped within some kind of a div, such that:
<div id="tag-cloud">
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
.
.
.
</div>
Use this CSS:
#tag-cloud a { ... } /* Each tag will be styled */
Option 2: Use jQuery!
If you can't figure out option 1, you can always use jQuery to style the element:
$('a[class^="tag-link"]').css( ... );
Refer to this for documentation on how to use the CSS function in jQuery
Option 3: Modify the Wordpress Widget file
You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.
The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.
If all tags are getting the same style can you not do:
.tagcloud a {font-size: 10px}
If not please clarify your question.
Thanks!
edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');
Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)
Thanks in advance.
EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).
I'm guessing you want
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
<div class="coupon">15 points for your reputation</div>
around a div? Or something more involved?
I stole it from here.
I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.
For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
You can also do this directly in an existing CSS doc, by using CSS directives, like so:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
#media print
{
p.test {font-family:times,serif;font-size:10px}
}
but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.
For a good run down of some printable CSS issues read this list apart article.
<label for="dwfrm_cart_couponCode">
CODE
</label>
<input type="text" placeholder=" CODE" name="dwfrm_cart_couponCode" id="dwfrm_cart_couponCode">
<button type="submit" value="dwfrm_cart_addCoupon" name="dwfrm_cart_addCoupon" id="add-coupon">
</button>
<div class="error">
Please Enter a Code
</div>