http://jsfiddle.net/adamadam123/qv2yR/
Above is the code I'm currently working with. Below is an image of what I'm trying to achieve.
Its basically a chat box 'IM' and I have a blue & pink image and need to be able to get different amounts of text to sit within the image.
I also tried using the image as CSS background but found it didn't stretch to fit the text. Also tried floating and absolute positioning.
Any help would be greatly appreciated.
thx
<div class="chatMessengerBody">
<div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
<img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
</p>
</div>
<div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
<img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
</div>
</div>
http://jsfiddle.net/qv2yR/10/
CSS
.blue {
background: #EBF7FF;
border: 1px solid #D4F1FD;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#6B95B0;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
.pink {
background: #FFF8F2;
border: 1px solid #FFEEE4;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#D386A8;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
HTML
<div class="blue">
this is the blue one
</div>
<div class="pink">
this is the pink one.
</div>
Instead of an image, why not use some CSS & CSS3 rounded corners:
.chatMessengerChatBubblePinkWrapper {
background:#fff8f2;
border:1px solid #ffeadb;
-webkit-border-radius: 5px;
border-radius:5px;
}
Related
I would like to customise the Apple-Pay button that comes with Woocommerce/Stripe. By default the button has a 4px border-radius, which I would like to change to 0px. Additionally the button is within a wrapper and I would like to change its padding-top to 0px. I wonder if this can be amended through CSS? Below is the source HTML code (any hint as to how to progress would be greatly appreciated).
<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;display:none;">
<div id="wc-stripe-payment-request-button" " class="StripeElement">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
Try adding the following CSS:
#wc-stripe-payment-request-button {
background-color: black;
border: solid black 1px;
}
Does that provide the desired appearance?
It seems like stripe for Woocommerce loads the payment request buttons through an iframe from js.stripe.com ... unfortunately it is not possible to stylize content in an iframe which comes from a different domain. I read this page on iframe style for reference. #wc-stripe-payment-request-button selector which woocommerce provides is the id to a DIV which contains the iframe (payment request buttons). Find my Pseudo element solution below:
EDIT: Here is what im using.. It has all my styles in it, so adjust them to your liking but it works great. Let me know if you have any questions.
Note: My cart background is white and my payment buttons are set to 60px height dark style in Woocommerce settings. You might possibily need to add media queries to adjust for your theme break points but its fairly responsive out of box. If you do not want the outline with "express checkout" just delete this piece of code "#wc-stripe-payment-request-button::after{CSS styles}".. Thought I would add it incase someone has an interest to "copify" Cheers.
Screen shot of the final product
#wc-stripe-payment-request-button-separator {font-size:80%; margin:10px 0px 8px 0px!important;
color:#bababa;
padding:0px!important;
}
#wc-stripe-payment-request-button{outline: 3px solid #E6E6E6;outline-offset:18px;padding:1px 5px 0px 5px;transform:scale(.8);
}
#wc-stripe-payment-request-button::before {content:'';
width:99%;
height:66px;
position:absolute;
z-index:999;
bottom:-3px;
left: calc(50% - 49.5%);
pointer-events: none;
border:7px solid #fff;
outline:4px solid #fff;
background:rgb(255,255,255,.6);
}
#wc-stripe-payment-request-button::after {content:'EXPRESS CHECKOUT';position:absolute;
background:#fff;
font-size:87%;
color:#aaaaaa;
font-family: 'Oswald', sans-serif !important;letter-spacing:.12em;
display:block;
left: calc(50% - 82px);
font-weight:400;
padding:0px 4px 0px 8px;
margin:-96px 0px 0px 0px;
}
Simple and best styling for apple pay button that is totally adjustable in all layouts(iPhone/MacBook). Its currently running on my website.
Here is the CSS
#applePay {
width: 100%;
height: 50px;
display: none;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-style: black;
-apple-pay-button-type: book;
}
Here is the HTML
<div id="apple-pay-web">
<div class="col-xl-12"><label>Pay With ApplePay</label></div>
<div class="col-xl-12" style="text-align: center;padding: 0">
<button type="button" id="applePay" lang="en"></button>
<div id="got_notactive" class="alert alert-primary apw" role="alert"><?= Yii::t("app", 'ApplePay is possible on this browser, but not currently activated') ?></div>
<div id="notgot" class="alert alert-danger apw" role="alert"><?= Yii::t("app", 'ApplePay is not available on this browser') ?></div>
<div id="success" class="alert alert-success apw" role="alert"><?= Yii::t("app", 'Test transaction completed, thanks') ?></div>
</div>
</div>
I am trying to create a header box in a bigger box like the one in the image but only have an image to go on.
Any code snippets would be appreciated.
.parent {
border: 1px solid #ddd;
background: #fff;
}
.heading {
padding: 10px;
background-color: #0A7CDD;
color: #fff;
margin-top: 0;
}
p {
color: #333;
font-size: 16px;
padding: 0 10px;
}
<div class="parent">
<h3 class="heading">Other terms</h3>
<p>your text1 will go here,put all the text here.</p>
<p>your text2 will go here,put all the text here.</p>
</div>
Although This is wrong way to ask question, You have to try something yourself, but I was just free so here it is for you.
I offer this help because it looks like you are struggling to get started but you really should take note and analyse the code below and try to understand what each element is doing.
Remember StackOverflow is not a coding service and you will struggle to get help if you don't have a basic knowledge of what you are trying to achieve.
.Box {
display: flex;
flex-direction: column;
}
.Head {
background: #0a7cdd;
color: #fff;
padding: 10px;
}
.Body {
border: 1px solid #ddd;
padding: 10px;
}
<div class="Box">
<div class="Head">
<h2>Other Terms</h2>
</div>
<div class="Body">
<p>My credits must remain intact at the bottom of the auction template.</p>
<p>Please email me with any questions or if you need help with template installation.</p>
</div>
</div>
Key html elements you should look at are:
div
h2
p
Here is a good place to start:
https://www.w3schools.com/tags/tag_div.asp
Not an 100% solution to your "problem", where you straigt up get the solution to your problem, but more of a tip on how you can help yourself solve it.
What I tend to do when translating visuals into code is to "think out loud" what I see and try and transcribe it as well as I can into code. In your case you clearly see a blue header-section and below it a text-section. They are both wrapped inside a box with a border.
By defining these different parts it is fairly easy to get an idea as of how to structure it in code:
<div class="box">
<div class="header-section">
<h1> Header Text </h1>
</div>
<div class="text-section">
<p> Heres some text </p>
</div>
</div>
And then you go ahead and style it as you like.
I dont know what title to give for this question. Got from my designer this image:
How can i make something like this?
Like you see there is button in midle who needs to be clickable and background transparent. Around button you see red full width parent. Maybe my approach is not good maybe it can be done with pseudo elements but i dont know how.
Pls help me...
This is my html code:
<div class="pdf">
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Support isn't fantastic, but mix-blend-mode is the easiest way to achieve your desired look.
.pdf {
background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
text-align: center;
}
.nav {
height: 60px;
background-color: #313131;
mix-blend-mode: multiply;
}
.pdf-container {
padding: 30px;
background-color: red;
mix-blend-mode: multiply;
}
.pdfbutton{
background: white;
border-radius: 20px;
display: inline-block;
padding: 10px 20px;;
}
<div class="pdf">
<div class="nav"></div>
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
I would like to draw a plane with pure html and css.
My current basement is this:
http://jsfiddle.net/SchweizerSchoggi/rq2ukwfk/
<div id="plane"></div>
#plane {
height: 100px;
background-color: #ccc;
border: solid 1px #000;
border-radius: 120px 0 0 120px;
}
I would like to have the "cockpit" on the left side more elliptical, not round.
Is there a chance to realize this?
Thanks for any help!
to get it more elliptical you could use:
border-radius: 50% 0 0 50%;
http://jsfiddle.net/rq2ukwfk/1/
You can do that in pure html and css but you will need more div elements. like something like this:
<div id="plane">
<div id="cockpit-window"></div>
<div id="left-wing"></div>
<div id="right-wing"></div>
<div id="tail"></div>
</div>
Some inspiration for you:
http://codepen.io/davidicus/pen/dDAqC
http://codepen.io/HugoGroutel/pen/dJniD
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>