I would like to change the background color of the jquery mobile 1.4.5 pages. I have google around and found what some people suggest as the correct css overrides to do this. However, nothing works for me.
My CSS overrides are the last CSS file loaded in my app so I would expect that the below classes override the jqm css but they don't.
Does anybody know the correct way to do it?
Here is the JSfiddle
UPDATE:
See updated fiddle.
CSS:
.ui-page {
background:#296BC1;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper
.ui-content {
background:#296BC1;
}
This worked for me
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background-color: #FFF !important;
}
This code should work:
.ui-page{
background-color: #faaaff !important;
}
Try this
div[data-role=page][data-theme=a] {
background:#fff;
}
Related
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I have this page:
http://cristianfertea.ro/event/sss/
This is code CSS:
.qem-medium
{
background:#fed327 ;
}
For this page I want to be blue backgound:
For the rest I want to remain yellow pages.
I try but not working.
#8956 .gem-medium
{
background:red !important;
}
Can you help me to solve this problem?
Thanks in advance!
That specific page has a specific class which would seem to be ideal
.postid-8597
So I would suggest
body.postid-8597 {
background-color: #fed327
}
I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss
I'm attempting to style a button with CSS. Here is the HTML code for the button:
<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>
Here is the CSS code.
.custombtn {
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color:#d3d3d3;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}
I thought everything was fine & dandy, until I viewed the results.
Instead of something like this with text on it:
It looks like this:
I've been reading fixes for these online for around an hour and a half, however none of them have worked. I know it's possible to style it to look like this, I just need to find a way.
normal.png
hover.png
click.png
You need to explicitly set border:none; background-color:transparent; on .custombtn.
You need to set the border to none. That should definitely solve the problem and make sure there is no white space in the image itself.
I think the button's background and borders are the cause of your headache.
Try something like this:
.custombtn {
margin: 10px;
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color: transparent;
border: none;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}
I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?