I have frond end built using angularjs. I have declared the background image for body of the index.html page (its same for whole website).
whenever I go to the new url, a view will be displayed in ng-view. currently I am planning to change the background of only login page.
Whenever i go to the url localhost:3000/login, background (of body) should change for only that page. for rest of the page it should remain same.
Is there anyway to do it?
Edit: Right now I have this code in my app.scss
body {
padding-bottom: 15px;
#include background-image(linear-gradient(#c3c3c3, white 350px));
}
And its common for all the pages. When i load the login page, still this background styling will be displayed(which is inherited). Which I want to remove (background: none) for only login page. Hope it clarifies my question.
Try:
changing it in the CSS file
changing the
ng-style="{'backgroundimage':'url(typeUrlHere)'}"> inside the desired tag.
Related
I have a page that contains CSS that hides a div class
.sectiondiv.showhide {
display: none;
}
But when loading the same page within a fancybox iframe I'd like to have that same content to be visible. I've tried the following CSS in the jquery.fancybox.css but that doesn't help. Any suggestions for this fix?
Why don`t you simply check if page is inside fancyBox iframe and just add custom CSS if needed? You can create links like 'mypage.html?fancyboxed=true' to make checking easier.
Another solution would be to use aferLoad callback to access iframe contents and do some modifications.
This is how you can access some element within iframe:
$.fancybox.getInstance().current.$content.find('iframe').contents().find('body')
Hi guys i've been working for this for days and searching the net for help but unluckily I don't find one. Here's my problem, I know that wordpress has a built-in background image when you click the appearance. I also tried editing in the CSS but when I put the code
background-image: url(image/3.jpg) in the body but when I see it it didn't appear. I think that the theme Accelerate has a code that has a fixed white image, How is this?
Their may be background image or no back ground image in wordpress according to the theme you are currently working with. Anyway you can add background image inside the body of a page in wordpress by the following ways :
Select css class from "main.css" located wp-contents/themes/your-current-theme/css/main.css, inside css edit "body" as
body{
/*...propeties..*/
background-image:url(back-img-url);
}
if it overridden by default images of your theme can use this instead of above
body{
/*...propeties..*/
background-image:url(back-img-url) !important;
}
In case you are using a custom template inside wordpress find the body class from the css you are using and change this as above.or using image inside page with img tag then make direct changes for this.
I resolved this by clicking Theme Options -> Design and choose the "Boxed Layout" instead of Wide Layout
So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.
I added this css:
#canvas { top: 0 !important; margin-top: 0 !important;}
and this HTML
<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>
When you first load the page, you have a div (with ID something like "yui_3_10_1_1_1376940471763_412") that has no inline styling. So everything looks fine.
When you reload the page, that div no longer has an ID, and instead has an inline top margin added to it, apparently by Javascript, which pushes your site down.
Meanwhile, your code makes no sense. You've applied CSS to the div with id="canvas", and then used Javascript to remove that id, giving your CSS nothing to apply to.
Having removed that, your page is also throwing a JS error because a SquareSpace function in site.js is looking for the IDs you've deleted.
I'd try removing your added JS (leaving "canvas" and "canvas-wrapper" intact). Your CSS (with the "!important" tags) should override any inline styling that SquareSpace adds.
I am trying to change background color of my html page but its not reflecting. I am using jquerymobile, marionette for my pages. In my css i have written
body {
background-color:rgb(44,2,4);
}
even i had tried
html, body {
background-color:rgb(44,2,4);
}
What happens is the background color is being set, but i can see on html page just for a flash when the pages loads but after that the default jquerymobile theme gets set.
Can anyone please help me with the solution?
Thanks in advance.
When working with jQuery Mobile you must change class .ui-page if you want to change background color. Even if you change body background with !important it will still stay hidden because class .ui-page acts as an overlay over whole page.
Even more it must be done with overriding, like this:
.ui-page {
background:rgb(44,2,4) !important;
}
Working example: http://jsfiddle.net/6wD7v/
EDIT :
Found it. You are also using a panel which uses additional overlay div over .ui-page.
This CSS will work now:
.ui-page, .ui-panel-content-wrap {
background:rgb(44,2,4) !important;
}
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }