As an example, i have 3 html which is login.html, home.html, and contact.html. all 3 of them have banner coded like so:
.
.
<div id="banner" class="banner" >
....
</div>
.
.
and they also called a css file which contains the following
.
.
.
.banner {
background: url("images/image1.jpg");
}
.
.
i want to set image1.jpg background only for home.html and contact.html. ignore the css if the page is login.html . Is it possible by only adjusting the css file?
to make it clear, i want to do something like this:
.banner{
if(page != login.html)
background: url("images/image1.jpg");
else
ignore;
}
You have two options:
Add a class to the <body> tag or the particular element.
Add an additional style sheet to overwrite the default styles.
If you can give the body a class login for the login.html:
<body class="login">
<div id="banner" class="banner">
....
</div>
</body>
You can overwrite the styles by adding like:
.login .banner {background: none;}
If you can modify the HTML, you could also add a another class to your banner and reference it by id in your CSS. Something like:
HTML
<div id="banner" class="banner home" >
....
</div>
CSS
#banner.home {
background: url("images/image1.jpg");
}
#banner.login {
background: url("images/image2.jpg");
}
Related
I have the following HTML Code on page 1
<body class="page-template-default page page-id-23">
<header class="nav_header">
</header>
</body>
And the following HTML Code on page 2
<body class="page-template-default page page-id-22">
<header class="nav_header">
</header>
</body>
And the following CSS
header.nav_header:not(.page-id-23) {
background-color: rgba(255,255,255,0)!important;
}
I am trying to place the background color on every page except the one with page-id-23 in the body class however have not had success with my current CSS
You are looking for a css class selector on the nav_header element (where it isn't), instead of the body element (where it is). You want this:
body:not(.page-id-23) header.nav_header {
background-color: rgba(255,255,255,0)!important;
}
I added runat="server" to one of the div in my .ascx file.
<div id="logo" runat="server">
This changes the final HTML to below. Notice how the mainheader1 was inserted
<div id="mainheader1_logo">
I read this question https://stackoverflow.com/a/897790/886569 and made this change to the html
<div id="logo" class="logo" runat="server">
This causes the final HTML to be
<div id="mainheader1_logo" class="logo">
In my CSS the logo class is defined like this:
#logo
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
How can i fix this issue in a safe way? I don't want to add the component name in my CSS file as that seems dirty. Also would not want to change the # to a . because that might break lots of other things.
Update your css as below. CSS Selector [id$="logo"] will select every element whose id ends with "logo".
[id$="logo"]
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
I want to override the style padding-top:100px to padding-top:0px. How can i override the inline style inside wordpress template?
<!-- Sidebar With Content Section-->
<div class="with-sidebar-wrapper">
<section id="content-section-1" >
<div class="gdlr-full-size-wrapper gdlr-show-all" style="padding-top: 100px; padding-bottom: 0px; background-color: #ffffff; " ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item" style="margin-bottom: 0px;" >
<!-- MasterSlider -->
I already tried the below code in style.css but its not working!
.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}
To select this perticular <div> you to write your CSS like:
.gdlr-full-size-wrapper.gdlr-show-all {
} /*without space between*/
you're using
.gdlr-full-size-wrapper .gdlr-show-all {
}
viz selecting
<div class="gdlr-full-size-wrapper">
<div class="gdlr-show-all"></div>
</div>
Also if you're willing to override inline CSS only then you can use [style] selector also.
As:
<div class="someClass" style="font-size:10px; "></div>
So we can write CSS like:
.someClass[style] { font-size:14px !important}
what's trick here is this CSS only works when someClass has inline CSS for font.
Use following code it will work for both cases if you have one or both classes on div tag.
.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
padding-top:0px !important;
}
Justinas explains it well and that should work perfectly, I have applied the same to custom CSS of a WordPress theme and has worked for me. The CSS I had trouble changing were inline a div.