The wordpress theme I've been using has been acting up so I'm trying my hand at editing my site using style sheets (I've 0 experience with html or CSS). I'm finding the googling process to discover the selector names I must use to edit each element within my site very time consuming so I've started looking at the source code to try and identify the selector I need.
For the example below I'm looking to change the signup form's button's background colour.
<div class="notif">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup_appstage">
<form action="http://HUDKingPro.us7.list-manage.com/subscribe/post?u=0c2c35acf6b36619d521176a9&id=8d4d76b2db" method="post" id="mc-embedded-subscribe-form_appstage" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL_appstage" placeholder="Enter your email address" required />
<input type="submit" value="Notify me !" name="subscribe" id="mc-embedded-subscribe_appstage" class="button" />
So far using the selectors I have identified I've come up with this but it doesn't appear to work, is there a methodology for identifying the CSS selector from the HTML source code?
#notif input {
background: #1A1A18;
}
Apologies if this is overly naive, I've an app to launch for next week so I've had insufficient time to develop a thorough understanding of CSS.
Have you tried to use the class the button has? i.e. .button
So it will be:
.notif .button {
background: #1A1A18;
}
Your div has <div class="notif"> therefore you're CSS is invalid with the #
You use . for classes and # for id's.
Edit
It's taking this stylesheet http://hudkingpro.com/wp-content/themes/apptamin-a-hor/yourstyles-example4.css
Edit the background colours by line 76 or:
This is the class or input you want to edit:
.notif input#mc-embedded-subscribe_appstage{
background: #1A1A18 !important;
}
Add the above to the Appearance - Editor.
# is for IDs, whereas you have class="notif". Additionally, without further restriction it will affect the email input as well as the submit button.
So try .notif input[type=submit]
Related
I'd like to use CSS in one place to specify the font-style everywhere on my web page. I tried the following:
body{
font-family: 'Roboto', sans-serif;
margin-top: 30px;
background-color: #dfeff0;}
I have several forms on the webpage with some default input text. I noticed that the style of the input text in the forms was being overridden by the user agent stylesheet. This makes sense since the default CSS for the text input box is more specific than the CSS that I specified for my body element. I can change the text in the input box to my preferred style by writing another line of CSS that specifically targets the input box, however, this seems like bad practice as it violates the DRY principle. As my webpage gets larger I imagine that I will have the same text style rule written in many places as I continue to "fight" with the default CSS.
Is there a way to write CSS code that is both general (applied to all elements) and immune to being overridden by the more specific default CSS? What are the best practices for the situation I am describing.
Here is the form i'm referring to just in case its relevant.
<form action="" method="">
<input id="task-field" type="text" name="task_contents" value="... (enter a task)">
<input id="start" type="text" name="start_time" value="Start Time">
<input id="duration" type="text" name="task_duration" value="Duration">
<label for="all_day_task">All Day Task</label>
<input id="all-day" type="checkbox" name="all_day_task">
<label for="all_day_task">All Day Task</label>
<input id="long-term" type="checkbox" name="long_term_task">
</form>
u can use * tag to make all elements
* {
font-family: 'Roboto', sans-serif ;
}
We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.
I have had a look at the Wijmo Docs but they haven't been helpful.
We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.
The initiation script is as follows:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$("select").wijdropdown();
$(":input[type='radio']").wijradio();
$(":input[type='radio']").wijcheckbox();
$("button").button();
});
</script>
As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID - we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.
You can see a screenshot of the problem here:
I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.
I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.
I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the "rocket" theme that comes with Wijmo.
Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.
The HTML code for the form is:
<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
<label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
<br />
<select name="searchType">
<option value="standard">Standard</option>
<option value="fuzzy">Fuzzy</option>
</select>
<button>Search serial numbers</button>
<input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>
It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.
you need to wrap all the forms elements inside a div with let's say a class "input" and apply this style to the div elements:
div.input {
display: inline-block;
vertical-align: top;
}
here you can see a jsfiddle that shows how it looks like.
as a suggestion, next time create a jsfiddle more than a screenshot so it's easier for people and for you to test your code.
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).
I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.
Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..
CSS:
.checked:hover, .unchecked:hover
{
background-color: #242424;
}
.checked
{
background-image: url(check.bmp);
color: #ffb500;
}
.unchecked
{
background-image: url(unchecked.bmp);
}
HTML:
<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/>
ALL </label>
If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.
Original HTML:
<input type="checkbox" id="check" /><label for="check">Toggle</label>
Generated HTML:
<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
<span class="ui-button-text">Toggle</span>
</label>
Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.
Take a look at http://lipidity.com/fancy-form/
You can see how they do it and incorporate it in your own implementation.
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.