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 */
}
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts.
Is it possible to make an entire stylesheet only apply to styles within a div.
Example:
<div class="style-sheet-modern">
<!-- My Stylesheet applies only within this div -->
</div>
My first thought was to just rename my css to fall within the div. Example:
.style-sheet-modern .conflicting-class{ /* styles */ }
However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future.
Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?
Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
You can use #import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.
Why not give the <div> an ID?
Then you could use specificity to override just the classes/ids that are in that div?
IE:
<div id="style-sheet-modern">
<div class="my-class"></div>
<div class="etc"></div>
</div>
You could then target all styles inside the "modern" div like this:
#style-sheet-modern .my-class{
color:black;
}
#style-sheet-modern .etc {}
There would be no browser support issues.
If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and #import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.
You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:
#style-sheet-modern * {
reset: stuff; //obviously not the actual css
}
That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.
And as I mentioned before, no browser support issues.
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
}
In my site I am stick with some CMS. In my cms there is some sticky layout.
Now My client needs two different look on it.
So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.
This is for home page
.test {
some data
}
This is for Other Page
.test {
some data
some data
}
So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.
You should add a custom class on your body, like the page name.
<body class="home">
...
</body>
<body class="my_page">
...
</body>
Then you can have a different style for each one.
.home .test {
background: red;
}
.my_page .test {
background: blue;
}
You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.
Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.
Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.
Therefore, create separate style-sheets and apply dynamically.
You can get some idea about changing style-sheets dynamically here
You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.
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; }