I would like to style the sidebar of my application but somehow the css file is ignored or something.
Code SideBar:
<!-- SideNavBar -->
<div class="sidenavbar">
<ul id="sidenav" class="sidenav sidenav-fixed logged-in"
style="display: none; width: 250px;">
<li class="logged-in" style="display: none;">
Logout
</li>
<li class="admin" style="display: none;">
Create Guide
</li>
<li class="admin" style="display: none;">
Create new Account
</li>
<li class="admin" style="display: none;">
Add Admin
</li>
</ul>
</div>
css:
.sidenavbar{
background-color: black;
}
.sidenavbar ul li :hover{
background-color: grey;
}
I believe since the unordered list and the list items have a display of "none" the div of class "sidenavbar" has no width or height. This is why you cannot see the black background.
you should use your custom css file after source css file. e.x:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" src="yourcssfilename.css">
Related
I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and .navbar-title). So far, I have tried setting the .main-header element to a variable ($h: &) as well as using #at-root to no avail. Any and all suggestions would be much appreciated.
Example of the behavior I am looking for:
.navbar-links:hover
results in
.main-header{
background: red;
}
code:
<nav className='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li className='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:
.main-header {
pointer-events: none;
}
.main-header:hover {
background-color: red;
}
.navbar-item {
pointer-events: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav class='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li class='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
I using a library for datalist/autocomplate. But I want to change the width and shape of the data container. How do I remove arrow in red box and make the width is dynamic according to content? No css used.
Link for the library(awesomplete)
<div class="awesomplete">
<input id="sellerId" name="sellerId" autocomplete="off" aria- expanded="false" aria-owns="awesomplete_list_1">
<ul role="listbox" id="awesomplete_list_1" hidden="">
<li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
<li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
</li>
</ul>
</div>
to remove the arrow just add this css
.awesomplete > ul:before {
display: none !important;
}
Working Sample
.awesomplete > ul:before {
display: none !important;
}
<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete#1.1.5/awesomplete.min.js"></script>
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
Screenshot
I have a <li class="jobs-dashboard1"> I'd like to target with CSS. The problem is that it's not responding, so I wondered if it's possible to specify somehow with the id of the parent <ul> like so:
#adminmenu.jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
This didn't work, and I don't know why.
If you see Jobs in the screenshot... that's one of them I'm trying to target.
The site is https://adsler.co.uk if that helps, but it's a backend modification.
Where are you adding this CSS? You cannot add it to typical CSS files that you use on your website, because those are all loaded on the Frontend, and not loaded in the Wordpress Dashboard.
You also shouldn't have to target your item with an ID before the class, if the item has its own class already, and is only used on that item. If you use this class on more than one item then you can specify an ID or other selector.
Add this to the end your functions.php or a custom plugin
Here is the original posted solution:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
.jobs-dashboard1 {background: green;}
</style>';
}
Here is another way that should also work.
add_action( 'admin_head', 'custom_admin_css' );
function custom_admin_css() { ?>
<style>
.jobs-dashboard1 {background-color: green; }
</style>
<?php }
Well, you have missed a space in your CSS declaration.
it should be,
#adminmenu .jobs-dashboard1 {background-color: green;}
Hope this helps!
It is because you have more layers of nodes over the ".jobs-dashboard1". So you could use this:
#adminmenu #menu-dashboard .wp-submenu .jobs-dashboard1{background-color: green;}
or if you want a cleaner way:
#adminmenu li ul .jobs-dashboard1{background-color: green;}
It works, Please check the below snippet. Also check CSS Combinators
#adminmenu .jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
I am trying to indent the text from an inline block on safari. It only indents in chrome.
I have tried using margin left. This works in chrome but in safari i have to adjust the margin-left to another number for them to look the same.
I tried the text-indent and the inline-block is not wrapping properly now.
html
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li type="checkbox" class="sub">
<input type="checkbox" />
<a href="#" >Profile</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box">Profiles</a>
</li>
</ul>
</li>
<!-- end-->
<li class="sub">
<input type="checkbox" />
<a href="#" >Logs</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box" >View Logs</a>
</li>
<li >
<a target = "box" >Testing a long test</a>
</li>
</ul>
</li>
</li>
</ul>
</nav>
CSS in chrome
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 55px;
padding: 3px 1px 3px 0px;
}
CSS in safari
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 65px;
padding: 3px 1px 3px 0px;
}
I tried putting important on the variables to see anything overrides it too and that didn't help them look the same.
I also tried
text-indent: 50px;
Make a table with no content and put it ahead of your text.
<table>
<tbody>
<tr>
<td width="65px"> <!--this is the indent, don't forget to style it so it becomes invisible.--></td>
</tr>
</tbody>
</table>
https://jsfiddle.net/oski369/2Lzc6q95/
When I plug it into js fiddle, the background color of each li changes according to it's class (even or odd) as I want them to. However when I run the same code in my browser the background colors are ignored. I also note that in the fiddle the "cover" property I put in my background-image is ignored while it works fine in my browser.
I am using bootstrap in my text editor while obviously that is not the case in fiddle. Idk if this could be the issue but how would I accomplish the same alternating color change between list items that appears in the fiddle in my text editor?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="css/stockData.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="text-primary">
<h1 >StockData</h1>
<div class="row" id="stockTable">
<ul>
<li class="odd">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
</ul>
</div>
<script src="stockData.js"></script>
</body>
</html>
CSS:
#stockTable {
width:38%;
margin-left: 2px;
}
.odd{
background:rgba(0,0,0,.8);
}
.even{
background:rgba(0,0,0,.6);
}
ul{
list-style-type:none;
}
body{
background-image:url('http://evilcorps.com/wp-content/uploads/2014/12/wall_street_1920.jpg');
background-size: cover;
}
h1{
margin-left: 2px;
}
If i understood your question correctly, you want to give background colour to to children of list item li depending on whether they are odd or even.
You should use nth-child in css on the children of list item li to accomplish this.
You should try something like this:
1) The css style given below will make the background of all even children as blue.
li span:nth-child(2n){
background:#00f;
}
2)The css style given below will make the background of all odd children as white.
li span:nth-child(2n+1){
background: #fff;
}
i hope that helps :)
In your span and a tags you are defining the bootstrap columns with class="col-md-4" or class="col-md-6" respectively. Try giving the li tags a row of their own to house those columns.
<li class="odd row">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even row">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd row">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
Here's a demo on boot.ply that should have all your bootstrap code built in.
Try this:
.odd{
background:rgba(0,0,0,.8) !important;
}
.even{
background:rgba(0,0,0,.6) !important;
}
"!important" will override any other styles.
OK, so if it's considered a hack, then I think the only way for you to do that is to change values in Bootstrap.css or do it with your own classes or something like this:
li {
background:rgba(0,0,0,.8);
}
li:nth-of-type(2n) {
background:rgba(0,0,0,.6);
}
While you should remove .odd and .even class or it won't work. You can give to ul your own class and then write ul.class-name li { } in CSS instead of li to make it change only this specific ul's li colors.