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
}
Related
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
I would like to re-style the page title (h1) on just one particular page (node) of a Drupal 7 site. What is the best way of targeting a single HTML element with CSS on a particular page?
Obviously, I want the page title on all other pages to be unaffected.
I am using a sub-theme of Bartik, if it make any difference.
Normally in most of the themes classes are added to the body tag. Unless you are using themes like mothership where you can force it to remove such classes, these can be pretty much handy. Even mothership provides a settings to enable/disable populating of body tag with such classes.
Use inspect element in chrome or Firebug in Firefox or Developer Toolbar in IE to look for the class that represent something like <content_type>-<entity-type>-<id> in <body> tag in the page you want to theme. For example page-node-12
An example output for omega theme is as below
<body class="html not-front logged-in page-node page-node- page-node-8 node-type-page context-page admin-menu coffee-processed omega-mediaqueries-processed alpha-debug-processed responsive-layout-wide">
An example body tag output for Bartic theme,
<body class="html not-front logged-in no-sidebars page-node page-node- page-node-33 node-type-team-member admin-menu coffee-processed">
then find the specific selector for your node title, which would be like say #page-title or in case it doesn't have an id figure out some rule to select it so its unique in a page. For example .page h1.title
Now you can use,
body.page-node-12 #page-title {
/* your css rule */
}
or
body.page-node-12 .page h1.title {
/* your css rule */
}
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.
I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:
#{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.
If you try to override the styles like this, they get inserted into the default section of your layout page by #RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
_layout.cshtml
<head>
#if (IsSectionDefined("Style"))
{
#RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
#RenderBody()
...
page.cshtml
#{
Layout = "layout.cshtml";
}
#section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
Regarding Visual Studio markup validation warnings
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:
<style>
use:
#MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
</style>
use:
#MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.
Make sure you're using a #section XXX around the <style> element where "XXX" is referencing a #RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
I think you should be set style in HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>
That good for me.
The style tag should be in the head tag, not in the body tag.
You should make a region in the head tag in your layout, and put the style tag in that region.
If you ViewSource one the page as it appears in the browser have you got
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.
I have a requirement to print only part of a page. I cannot use css(media=print) to do this since I have no clue what the page contains. All the html in the page is dynamically generated.
Also is there any limitation on the css properties that are recognized in Print mode. Many of my css properties like background-image are not applied on the generated preview.
You can dynamically create a css and insert or switch in your html document (see http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet).
You can also define a CSS like
<style type="text/css" media="screen">
#printableButNotVisible { display:none }
#visibleButNotPrintable { display:block }
</style>
<style type="text/css" media="print">
#printableButNotVisible { display:block }
#visibleButNotPrintable { display:none }
</style>
and add dynamically classes "printableButNotVisible" or "isibleButNotPrintable" to all elements which need be either printable or visible. You can do this for example with respect of jQuery.
You can aslo use jqPrint plugin to print selected part of the page.