I have a common css for all the pages in my application called growl.css...
I have
.ui-growl{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
How do I change the background color of the growl message. Inserting color and background-color didn't change a thing. Thanks
.ui-growl-item-container { background-image: url('./imgs/background.jpg'); }
this is to set image , try using color or background-color
Related
I've been trying to solve this problem all day without success.
I want to change de background color from my home page. For this i have use this CSS:
.page-id-6128 {
background-color: #F5F5DC;
background-size: cover;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
min-height: 100vh;
background-position: 50% 100%;
}
The problem is that i can't remove the white background from the menu as you can see in the next image:
https://i.stack.imgur.com/C9c2P.png
www.albertosotophotography.com/home
Thank you for your help!
Add this:
.navbar {
background-color: #F5F5DC;
}
EDIT
Better solution - remove background-color property from your .site class. Now you have:
.site {
background-color: #fff;
margin: 0 auto;
width: 100%;
}
I'm a newbie to html and css, and I was wondering if this is possible in pure css.
So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?
<div class="red"></div>
<div class="blue">
<h1>Menu</h1>
</div>
<div class="green"></div>
This is the CSS that goes along with it:
.red{
background-color: red;
width: 100%;
height: 1080px;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
}
So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)
Sorry if the question is poorly explained, english is not my native language. Thank you in advance.
You can just hide "Menu" on red and green divs using z-index.
CSS:
.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}
Example: http://jsfiddle.net/3k3wyscL/
But with this solution problematically would be to add another text visible only on red or green div.
Edit: as you want to see "Menu" on green div too, you can delete green class z-index and position parameters in css.
I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.
make the menu absolute:
.persist-menu
{
position: absolute;
}
right a function to update the position of the menu
function UpdateMenuPosition() {
var el = $(".blue"),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".persist-menu", el)
if (scrollTop > offset.top) {
floatingHeader.css({top:(scrollTop)});
} else {
};
}
and call it while scrolling
$(function() {
$(window)
.scroll(UpdateMenuPosition)
.trigger("scroll");
});
Check the demo: http://jsfiddle.net/wfff74w9/4/
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .
Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.
How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.
This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.
dropdown.css:
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
themes/nvidia.com/default.css:
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 11px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
mystyle.css:
ul.dropdown ul{
width:100% !important;
}
My modal css settings are:
.ModalWindow {
background-color: #FFFFFF;
position: absolute;
top: -1000px;
display: block;
z-index: 1000;
border: 0px solid #000000;
border-radius: 6px;
}
I haver a textbox in y modal popup and the color picker sits next to it. but when I click the colorpicker it goes behind the modal popup.
Add following css style rule: .ajax__colorPicker_container { z-index: 1001 !important; } or change z-index property of .ModalWindow class to 999;