I want to add a text content slider over a full screen background website. I'm poor in css. So please help me to add a beautiful text content slider that describes about each background image. The following is my background page
http://alampady.tk/fullbg/testbackground.html
Regards
Ashraf
Add this to your
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
And this to your stylesheet
.colorbag {
position: absolute;
top: 300px;
left: 900px;
width: 500px;
border: thin dotted;
height: 200px;
background-color: #ccc;
opacity: 0.6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 22px;
}
.colorbag span.subtext {
font-weight: 600;
font-size: 22px;
}
.colorbag font {
font-weight: 300;
font-size: 14px;
}
Then I think it will be like 10 times nicer =)
Related
This is the html:
<StripeCheckout className='payBtn' />
And this is how it looks right now:
And this is the .scss for it:
.payBtn {
display: block;
background-color: rgba(160, 255, 223, 0.596);
color: black;
font-size: 1.3rem;
line-height: 1;
font-weight: 200;
width: 100%;
margin: 0 auto;
padding: 1rem 0;
border: 0;
outline: none;
text-transform: uppercase;
cursor: pointer;
&:hover {
background-color: rgba(114, 250, 205, 0.699);
}
}
What I'm trying to make it look like:
what it needs to look like
Everything else on the page is styled according to the stylesheet. Even the size of the button of pay with card is. But the colors and stuff are not changing. Any help would be appreciated, thanks :D
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
I have the following code for my webpage, and when I use it in Chrome every thing is fine, but when I use it in Firefox the style is changed.
I need to make the Firefox style same like Chrome style, so any suggestion for that?
I mention in the code below what I tried to do.
<html>
<head>
<style>
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
}
a.option1
{
//Not centered but filled all area
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
a.option2
{
//Not centered and not filled all area
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center; */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>
Best regards.
You do not need Flexbox for this purpose: just display: block on your anchor:
http://cssdeck.com/labs/ocotcmpf
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
display: block; /* here */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;
I've found this cool plugin sweet menu and i'm having trouble with making the easeoutbounce animation stop when i click a link. I would like to have a 'downstate' when, by example, i click the home animation, i would like to see the animation on (exatly like the mouseover funcion (but without going back with mouseleave. I hope someone can help me because i'm new to all this code stuff and i'm starting to go Nuts:) Thanks in advance for your help!
here is the script:
<script type="text/javascript" src="Widgets/sweetMenu/jquery.easing.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-1.0.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-min-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'widgets/sweetmenu/images/home.png',
'widgets/sweetmenu/images/comments.png',
'widgets/sweetmenu/images/red_heart.png',
'widgets/sweetmenu/images/male_user.png',
'widgets/sweetmenu/images/yellow_mail.png',
'widgets/sweetmenu/images/computer.png'
]
});
});
</script>
Here is the css:
.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
visibility: visible;
z-index: 999999;
}
.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
And Finally the HTML:
<ul id="exampleMenu">
<li>Home</li>
<li>Blog</li>
<li>portfolio</li>
<li>Hire Me</li>
<li>Contact</li>
<li>My Apps</li>
</strike>