I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.
You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!
Related
I am trying to override existing sass styling of ion-card, by changing the headers padding to something that fit my app.
I did the following:
ion-card-header{
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
But nothing changed. I tried to add a background color to check it is getting the styling:
ion-card-header{
color: red;
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
And the color changed to red. But the card-header-md is not changing. I need to change it on iOS and Android.
Here is a stackblitz for it.
The issue is that the card-header-md class is at the same level as the ion-card-header class. So this should work:
ion-card-header {
&.card-header-md {
padding-right: 20px
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
I've removed the !important because I think you don't actually need them (just tried in a new stackblitz demo and it's working fine without them).
I have a contact form and I have it set exactly the way I like it, however the text is white, so when you type in it you cant see it. When you highlight it it is there so it is working, however people can't see what they are typing. I have it hosted here www.trutattoo.amdesigns.studio.com
and this is my CSS
form label,
form .label {
display: block;
margin-bottom: 20px;
}
input,
textarea {
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 800;
font-color: #000000;
border: 1px solid #000000;
outline: none;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
-ms-transition: border-color 0.2s;
-o-transition: border-color 0.2s;
transition: border-color 0.2s;
}
input[type="text"],
textarea {
padding: 10px;
width: 100%;
}
input[type="text"]:focus,
textarea:focus {
border-color: #161616;
}
input[type="checkbox"] {
display: none;
}
textarea {
margin-top: 20px;
height: 200px;
}
Just change
font-color: #000000;
border: 1px solid #000000;
000000 to any color you want.
Example change to #ff0000 is you want RED.
Hope it helps!
Let's say I have a span with a dashed underline:
<span class="underline">Hello, I'm underlined text</span>
.underline {
color: #444;
font-size: 250%;
display:inline-block;
border-bottom: 1px dashed #444;
}
I need a bottom drop shadow for the underline. I assume box-shadow is not the case and the only possible solution is to do it by the means of pseudo elements.
I'm doing this way:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
}
This displays the red dashed stroke above the underline but I need to do that below the underline.
How is that possible?
Thanks in advance.
Use position: relative; like this:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
position: relative;
top: 2px;
}
I'm not sure why you don't want to use box-shadow (unless its a browser problem) But it would solve the problem.
box-shadow: 0px 10px #888888;
.underline {
color: #444;
font-size: 250%;
box-shadow: 0px 10px 10px #888888;
display:inline-block;
border-bottom: 1px dashed #444;
}
hope this helps
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div