How to do a 'gray box' or inline panel? - css

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>

Related

Can I use external css in eBay.co.uk custom description for a listing?

I'm making custom description in one listing on ebay.co.uk with just html/inline css. I tried to use external css link, but it's not working. Any help will be appreciated.
Inline css is working. External and Internal not working.
<link rel="stylesheet" href="https://github.com/....../css/style.css">
<p>some paragraph</p>
Please note ebay cut head and body tags, so I skipped them in the example.

You can't use a stylesheet or <style> tags, but you can use inline styles on divs.
<div style=""></div>

I am having trouble adding HTML5 (background colours and colours) to my website within the WordPress editor

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.

How to avoid Stripe's 'Pay with card' button style to get screwed up with HTML5up's css?

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).

twitter bootstrap won't change my style

I have this website (java generate html)
I want to add twitter bootstrap for nicer design,
to look like this:
here is my try:
<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><h1>Delta Fresh Samples:</h1><p>save date: 12:28:21 31-May-02015</p><div class="jumbotron" id="distance_small"><h3>distance small</h3>0_1<br><img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"><br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><br><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><br><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span><br><br></div><div class="jumbotron" id="distance_large"><h3>distance large</h3>0_0<br><a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
However, as you can see I cannot make class="jumbotron" apply as seen in this example. (gray bg color. center of the page)
What am i missing?
In Addition, if i would want to style this without twitter bootstrap
how would you advise me to do this?

You need to include the bootstrap stylesheet inside your <head> tag.
you can use the bootstrap CDN :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
More info and options : http://getbootstrap.com/getting-started/

RightJs lightbox doesnt show long texts

I have a webpage that I want to pop-up a description in it. I've used rightJS light box 2.4.0. It works fine but the only problem is that it just shows a portion of my text. I have attached a sample file to check; As you can see it doesn't pop-up the whole text.
Any suggestions?
thanks
this is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>RightJS: Lightbox</title>
<script src="right.js"></script>
<script src="lightbox.js"></script>
</head>
<body>
<div class="lower">
<a href onclick="Lightbox.show($("loremm-block").html()).resize({width:"20em"}); return false;">Link</a>
</div>
<div id="loremm-block" style="display:none;"> a very long text </div>
</body>

If you inspect Lightbox DOM via inspector in Chrome or Firefox you will see that it actually has the whole text inside the Lightbox but rui-lightbox-scroller has
overflow:hidden
CSS rule and it cuts off the text.
Play with width settings of Lightbox or try applying the following CSS rule to this element (rui-lightbox-scroller):
overflow-y:scroll;
The HTML structure is described in Style adjustments section where you can compare the DOM

Resources