I am using a child theme, on one page I want margin left 30 on the other not. But it will effect all pages how do I make it unique?
CSS:
.description.style-16 ol, ul {
margin-left: 30px;
}
.eo-events-shortcode ol, ul {
margin-left: 0; (this one will have no effect)
}
HTML:
<div class="one_third">
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
<ul class="eo-events eo-events-shortcode">
<li class="eo-event-cat-agenda eo-event-future">
<li class="eo-event-cat-agenda eo-event-future">
</ul>
<div id="homebox_tabs">
</div>
<div class="one_third">
<div class="description clearfix style-16">
<h3 class="highlight">Werken bij SVHW</h3>
<ul>
<li>
<li>
</ul>
</div>
adding the inline to this
[one_third]
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
[eo_events event_start_before='+1 week' event_category=party,birthday's no_events="no events." showpastevents=false numberposts='3'] %event_title% %start{D d/m}{, H:i}% till %end{H:i}{}% [/eo_events]
<div id="homebox_tabs">
<div class="homeboxtab">[button link="http://intranet/wordpress/?page_id=2418" size="small" color="blue"]Go to agenda[/button]</div>
</div>
</div>
[/one_third]
To differentiate the two either adding an ID or class will allow you to specifically target each element.
You need to create something that will uniquely identify the page you want it to apply to.
You can either have the CSS apply only if the <body> has a certain class; or you could use a second stylesheet, or inline styles for that page.
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
How to hide with CSS every <div class="rpwwt-post-excerpt"> in my UL/LI list except first one, but to keep all <span class="rpwwt-post-title">
<div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="rpwwt-widget">
<h4 class="widget-title penci-border-arrow"><span class="inner-arrow">WIDGET TITLE</span></h4>
<ul>
<li>
<span class="rpwwt-post-title">TITLE #1</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO SHOW</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #2</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #3</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #4</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
</ul>
</div>
Inside your selector use the :not(:first-child) pseudo-class on the ancestor li to exclude the first <li> in a list from matching the selector - even though the style-rule ultimately affects only div.rpwwt-post-excerpt elements.
Like so:
li:not(:first-child) div.rpwwt-post-excerpt {
display: none;
}
Just select li is not first-child.
use :not for is not , and use first-child to select first element.
so , ul li:not(:first-child) { display:none; }
I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.
The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":
<div class="menu-container">
<div class="row header">
<img class="logo" src="../../../assets/menu-header.PNG">
</div>
<div class="row menu-btn">
<div class="inner-menu-btn" (click)="openMenu()">
<span class="menu-span" [#menuStringAnim]="active">MENU</span>
<i class="fa fa-bars menu-icon" [#menuIconAnim]="active"></i>
</div>
</div>
</div>
<div class="menu-list" [#menuListAnim]="active">
<div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
<div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl0 == category.key">
<br>
<div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
<div class="little-menu-bar-midlvl"></div>
<span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
<br>
<div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
<div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:
.lvl0 :hover{
color: orange;
}
.lvl1 :hover{
color: orange;
}
.lvl2 :hover{
color: orange;
clear: both;
}
So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:
Same happens with the third level.
Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!
The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon
.lvl0:hover>span { /* leave hover on div but style the span */
color: orange;
}
.lvl1:hover>span {
color: red;
}
.lvl2:hover>span {
color: green;
}
<div class="lvl0">
<span>test 0</span>
<div class="lvl1">
<span>test 1</span>
<div class="lvl2">
<span>test 2</span>
</div>
</div>
</div>
The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc.
Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.
.lvl:hover {
//common for all
color: orange;
}
I have header which has ul tag with content inside. I can't inline them.
HTML
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
</ul>
</div>
Here is fiddle
1) Delete all your CSS and include the bootstrap css and js from CDN since you are using the bootstrap navigation syntax.
2) Change the p element to a span and you are good to go.
To inline them completely with images set p1 class display style to inline-block and remove flex-direction. Like this:
.p1 {
display: inline-block
}
https://jsfiddle.net/toL6f4h5/
I want to remove the default box-shadow from the unordered list group in bootstrap.There is the default shadow in the list-group special. My html is as follows:
<div class="row">
<div class="container">
<div class="col-md-4">
<ul class="list-group special">
<li class="list-group-item">About Royal</li>
<li class="list-group-item">Message from MD</li>
<li class="list-group-item">Director's Profile</li>
<li class="list-group-item">Organization Structure</li>
<li class="list-group-item">Member Asssociation</li>
<li class="list-group-item">About Nepal</h2></li>
</ul>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
I applied the following css:
ul.special{
box-shadow:none;
}
However, the default box shadow is always there? Plz help how to remove it?I would highly appreciate the help.
There's no box-shadow on the .list-group, look at the unpacked CSS https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css lines 5100 - 5120. If you want to remove the border then you can do the following in CSS that comes after the Bootstrap CSS.
**CSS **
.list-group.special .list-group-item {
border-width:0px;
}
I think you are talking about the border, not the shadow.
It is simply to change. You have to add one line to your CSS:
ul.special .list-group-item{
border: 0 !important;
}