How can I convert my 6x to CSS
I have the
<ul data-role="listview"
data-inset="true"
data-theme="d"
data-divider-theme="e"
data-count-theme="a"
>
<li>
<img src="https://www.lifewire.com/thmb/SY5rof4hEZ4WkWqolEFWwZEIqAI=/774x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/yahoo-logo-2019-879b7bed612d4bbc97065dce2a0f2d73.png"
alt="yahoo-mail"
class="ui-li-icon"/>
Yahoo!
<span class="ui-li-count">3</span>
</li>
</ul>
following code:
Remove all the and use padding:
a{padding-left:20px}
Do this:
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="a">
<li>
<img src="/css/images/yahoo-mail.png" alt="yahoo-mail" class="ui-li-icon"/>
<span class="link-text">Yahoo!</span><span class="ui-li-count">3</span>
</li>
</ul>
CSS:
.link-text:before {
content: ' '; /* 6 spaces */
}
Give span tag in a tag.
<span></span>Yahoo!
then give padding to span.
There's many ways to do this. I'd probably add a margin to the icon image:
.ul-li-icon {
margin-right: 20px
}
Related
I have the following HTML:
<nav class="SecondaryNav sideMenu">
<ul class="Nav_TopUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
<span class="Nav_Span"></span>
<span class="Nav_SubMenuIndicator"></span>
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</nav>
What I am trying to select is the UL with the class "Nav_SubUL" but only where it is a sibling of an 'a' with a class "Nav_A" that has an image and a span with a class ".Nav_Span"
Thats a mouthful I hope it makes sense!
Here is what I have tried so far but have not had much luck. CSS is not my strong point so it might be that this has a really obvious answer but I cannot for the life of me get there.
.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span + .Nav_SubMenuIndicator ~ .Nav_SubUL {
margin-top: 265px;
}
.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span ~ .Nav_SubUL {
margin-top: 265px;
}
Thanks in advance everyone
I worked it out in the end by applying some additional classes on the parent nav element.
Thank you all for your help and suggestions as always. Sometimes all you need is a helpful community to give you the nudge you need to get you to your result. Thanks again.
Happy coding!
I think you can go with something as
a.Nav_a ~ ul.Nav_SubUL {
color: pink;
}
You can go with
a.Nav_a ~ ul.Nav_SubUL {
}
as dantefff mentioned, but you cannot check for children of a.Nav_a with css only - you'd have to use javascript.
Or do something different with your divs and their classes.
Can I use a combination of ID and elements to apply a style to a particular element?
for example:
<ul id="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
Is there a way to apply the style="font-size:small" to all the anchors that follow the UL with the ID of 'a'?
I'd think something like #a a {font-size:small} would work, but it's having no effect in the css file.
Thanks,
Jo
Yes, use the structure of the HTML to select the anchor tags:
ul li a {
font-size:small
}
Instead of using ID use class selector, so that same class name can be used to multiple ul elemements:
.a li a { /* you can also use .a a {....} */
font-size: 40px;
color: red;
}
<ul class="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
<ul class="a">
<li>
<a href=...>Hello</a>
</li>
<li>
<a href=...>Boy</a>
</li>
</ul>
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>
How can i remove my image 11 from class second?
<ul class="second">
<li >
<img class="imgTwo" src="img/11.gif">
<h4>9</h4>
<h5>9.1</h5>
</li>
<li>
<img class="imgTwo" src="img/12.gif">
<h4>10</h4>
<h5>10.1</h5>
</li>
</ul>
Here you go this way:
ul.second > li:first-child .imgTwo {
display: none;
}
This way only the first one will be deleted.
I cannot figure out why the forth level is not styling. Can someone please help with this CSS spaghetti?
Fiddler: Menu Demo
You have a few problems with this. For starters I strongly suggest that you clean up your CSS and Validate your HTML.
This is invalid in your CSS, which is part of the problem.
.nav ul li li li:hover a {
background:#00999b url(img/arrow_over.gif) no-repeat 95% 9px !important;
}
And this HTML is invalid: You have unclosed tags inside of other tags.
<ul>
<li class="canieti first"><span>***HOME</span><ul>
<li class="quienessomos first"><span>***SECOND</span><ul>
<li class="consejodirectivonacional"><span>***THIRD</span><ul>
<li class="mesadirectivanacional first"><span>***FOURH</span></li>
</ul>
<div style="clear: both;"></div>
</li>
<li class="canieti first"><span>Other</span></li>
</ul>
<div style="clear: both;"></div>
</li>
</ul>