I am currently working on a Rails App, and am able to get an image as the background of the home page. However, I placed the code in the homepage css file, but it is being applied to the application css file also. This is resulting in the image being the background for all pages in the app.
In a Rails 3.1+ app, how do I get the background image to only appear on the homepage?
I have tried to move the background image css block to a different css file, but it still applied across all pages.
Declare styles inline for the page you want, if you declare in CSS file and you link those files in several documents than obviously it will take the background image for the respective element
Suppose it is like index.html
<style>
body {
background-image: url('#');
}
</style>
Or simply declare a class and apply on that particular page
.unique { /* In Your CSS File */
background-image: url('#');
}
<body class="unique"></body>
Use a class name on the body tag for that page only. Create a corresponding CSS declaration for that class.
I'm not sure if this is the best way to do this but I solved this problem in one of my apps by making two application layouts, one for the home page (home_application.html.erb) and one for all other pages (application.html.erb). Put an id tag in your CSS file:
#home {
background: url(example.jpg);
}
Make the application.html.erb:
<!DOCTYPE html>
<html>
<head>
header
</head>
<body>
stuff
</body>
</html>
Make the home_application.html.erb:
<body id="home">
stuff
</body>
Then in your static_pages_controller (or whatever controller you use for your home page) put:
def home
render 'layouts/home_application.html.erb'
end
This will render the layout with the background image for the home page and the layout for everything else for all other pages by only changing the id of the <body> tag.
Related
I have a file structure of:
home.html
img/bg_damask1.jpg
css/style.css
When I set my body background image I can't get it to load. I've tried:
background-image: url('../img/bg_damask1.jpg');
background-image: url('/img/bg_damask1.jpg');
background-image: url('img/bg_damask1.jpg');
But none are working. How do I get my css to reference the background image?
ETA: In browser dev tools I see that no matter what file path I put in, the browser is only referencing 'bg_damask1.jpg' without the file path. If I edit it in dev tools the image shows up using option #1. Now I'm stumped as to what's causing the breakdown.
If you try to use for this body.
Your css must be like this
body {
background-image: url(../img/bg_damsk1.jpg);
}
Also for you example is
body {
background-image: url(http://www.radioviva.fm.br/images/backgrounds/bg-squares-3d.jpg);
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
</html>
That example you must just change url path to yours.
Third option should be working, check the source code in your webbrowser and check if the image is actually found. If not try reuploading the image, renaming it or placing it in another folder.
While implementing an html template in MVC web site which was designed by some agency I m facing something a little challenging. The templates was containing different html pages which have different css classes applied in body tag. I have converted common parts of all pages into a Layout/Master Page so <body> tag is also in Layout/Master Page.
Question is how I should render Layout (HTML) with different css classes applied to tag ?
Just load specific css files in the various child views. You can override the body style in each case.
Remove the body tag from layout. Put it in each Main View Template and set the body class there.
Just make sure to put all the partials (like the header, top nav, left nav, footer) inside the body tags. The caveat is that you will have to put the body tag in each Main View, but it will allow you to apply any class you want to the <body> tag.
Other than that, you can use JavaScript to add a class to the body. Use the JavaScript in each view that needs to change the body class:
$("body").addClass("yourClassName");
Add an id attribute to the <body> tag: <body id="body"> ... </body>
document.getElementById("body").className = "yourClassName";
So I'm thinking I'm either missing something very obvious and setting myself up for a nasty fall or this is so obviously ok that no one really talks about it.
I want to use one style sheet for a small website, but I want a slightly different layout on some of the pages.
Example: Home Page would have right sidebar; another page would be full width; and another would possibly have three columns.
So that's it. What I'm creating is multiple div with different dimensions that would fit the various formats.
Ie. #rightSide; #leftSide; #fullWidth; #middleContent.
The idea is that I would use a certain combo of divs per page and the others would fade into the background until needed.
So I created the index page and it worked fine. It was a 3/4 width + rightSide. Now I'm creating a full width... and it still seems fine.
Yet all the research I do regarding multiple layouts on css insist that I use different style sheets even for small layout changes like double columns to full width.
I have seen zero reference to using CSS this way but maybe I'm using the wrong key words. Creating 3 or 4 stylesheets for a 6-8 page website seems a little excessive.
So what am I missing?
This is very simple you can user multiple classes for multiple page for example you can use css class for blogpage and use it in body tag
ur css will be like this
.menu{color:red}
.blogpage .menu {color:green}
and so on for each page
Just have a style tag at the top of the pages that you want to have special features on then put all of your special style features in there
You could use nth-child selectors:
div.class:nth-child(1) { specific style for first}
You can include the stylesheet on each page as normal but then overwrite the styling 'per page' to suite your needs:
Home page
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for home page */
#rightSide {
text-align: right;
}
</style>
</head>
Second page
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for second page */
#leftSide {
text-align: left;
}
</style>
</head>
EDITED
You could wrap each page in a container with an id of the page name. then target this within the CSS stylsheyy per page. eg
HTML
<div id="homePage">
<div class="mainDiv">
</div>
<div id="rightSide">
</div>
</div>
CSS
#homePage .mainDiv {
// style this home page only
}
#secondPage .mainDiv {
// style this for second page
}
#homePage #rightSide {
// style this home page only
}
#secondPage #rightSide {
// style this for second page
}
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
The IFRAME solution works like this:
In your main HTML file, you'll have your DIV:
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors
Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)