I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
Related
Here is a list of the research that I have done. First I looked how to do it on the internet and I found this site.
Then I asked a friend and he suggested that I do this with the code, and as an example, gave this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
so in HTML
<h1 class"best-header-ever"> Header </h1>
then in CSS
.best-header-ever {
color: blue;}
I don't know if he was doing it in the right order so the above, is the most information I have of an alternative strategy
Now I am working on this, again in the WordPress editor:
.best-header-ever{color: blue;}
<header> header
link rel="stylesheet" type=text/css href=styles.css
[header/]
(this text to the left was part of the website-->)This is a contact page with some basic contact information and a contact form.
[contact-form]<span id="mce_SELREST_start" style="overflow:hidden;line-
height:0;"></span>[contact-field label="Name" type="name" required="1"/]
[contact-field label="<span id="mce_SELREST_start"
style="overflow:hidden;line-height:0;"></span> Email" type="email"
required="1"/][contact-field label="Website" type="url"/][contact-field
label="Comment" type="textarea" required="1"/][/contact-form]
body/
I don't know what I'm doing wrong and I would like to add background colour to the font and text. Oh, I have also been working on freecodecamp.org as research.
I am trying to learn how to do this work without the security net of freecodecamp to improve my skills.
Also, I don't know if I can even add HTML5 to HTML (everything from contact form to /contact form was being registered by the computer, but when I added any other characters, no background colours or colours would display).
This is what the page looks like:
myedit_pic
I don't know if this makes a difference, but the WordPress editor has buttons:
wordpress-editor-interface
I suggest you use background-color: instead of color:. Color will just change the text color, or the color of the words inside that header. Using background-color will change the background color.
First to answer your initial question:
When you assign a class in HTML, make sure to put an equals sign between 'class' and the name of the class in quotes:
This:
<h1 class"best-header-ever"> Header </h1>
Becomes:
<h1 class="best-header-ever"> Header </h1>
Also, to address your issue about how to learn and test your code, I suggest using something like jsfiddle.net. You can test HTML, CSS, and Javascript (when you are ready for that) and see the results live.
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel.
I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean:
Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">Well well well</div>
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I am trying to create an app for iPad, like iBook. I have loaded a ePub file in it and all is working fine.
I have written a CSS for the webview page. The following is my code to get page break
<span style="page-break-after: always" />
I have loaded a image, and some text below it. After the image I want the page break, and I want the image to be moved to the next page, but the page break code is not working. I'm not sure that my line of code is correct.
How about add a style definition like this?
<style type="text/css">
img.pagebreak {page-break-before: always;}
...
</style>
...
<body>
...
<img style="pagebreak" ...>
...
i have a submit button with the code inside a form
<li>
<input id="zip" name="zipcode" type="submit"
class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>
.zip-button{
height:30px;
------}
.zip-button:focus,.zip-button:hover{------}
for some reason the zip is not getting any style.but if manually add it in jquery like
$("#zip").css({"height":"30px",...});
its working.As am very new to styling i couldn't figure it.
Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code.
It shows, how the browser interprets the style sheets.
Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.
inline:
<input style='height:30px;' ...
style tag:
<html>
<head>
<style type='text/css'>
.zip-button{ height:30px; }
</style>
...
external file
sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]