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
Related
I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq
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.
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 have a code snippet:
<fieldset class="shareMe"><br />
<input type="checkbox" id="share_me" name="share_me" value="1" {if $default_share_pref}checked="checked"{/if} onclick="if (this.checked) { var perms = 'publish_stream'; fb_login_cached(function(response){ if (!response.perms.match(new RegExp(perms))) $('share_me').checked = false; }, perms); }"/>
<label for="share_me">Post this question to my friends on
<span class="">
<a class="fb_button fb_button_small">
<span class="fb_button_text">Facebook</span>
</a>
</span>.
</label>
</fieldset>
I want to change the text in <label for .. > field via CSS.
I know i can do it by placing duplicate copy of this snippet and use css to toggle. However, i want to do it minimum code change. May be using some CSS trick to change <label for..> text and not affecting the code inside <label for...> at all.
You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:
label[for="share_me"]:before{content:'Post this question to my friends on '}
label[for="share_me"].othertext:before{content:'Some other text!'}
However, just because you can doesn't mean you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?
Following the example at https://blog.escapecreative.com/how-to-replace-text-with-css/, this is what worked for me:
label[for="donate-choice-14724"]{
visibility: hidden;
position: relative;
}
label[for="donate-choice-14724"]:after{
visibility: visible;
position: absolute;
top: 0;
left: 0;
content:'Make this donation monthly';
}
You can only change the content of :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE support of pseudo elements. But that might not be problematic for your project.
Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.
Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Use a definition list or white-space nowrap.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.