I've created a simple menu inside a <core-drawer-panel> element using <paper-item> with the following:
<paper-item noink>
<div class="core-menu-item">
<core-icon icon="maps:beenhere"></core-icon>
My Places
</div>
</paper-item>
As you can see, I've wrapped the insides with a <div> to adjust the icon and text style + positioning.
Achieving this effect:
So my question is, how can I style a <core-submenu> in a similar way to achieve the same results?
I've tried following the documentation but styling seems to be very limited in the light DOM; I can only seem to add padding around the whole item, not specifically the icon (for which I'd like to add more padding).
Any suggestions?
Thank you.
The core-submenu page describes part of the solution. Each core-submenu includes a core-item in its shadow DOM, which is used to display the title and icon for the submenu. You can style this using:
core-submenu::shadow #submenuItem {
color: red;
}
The item itself contains a core-icon in its shadow root, with an ID of icon, so you can access that using:
core-submenu::shadow #submenuItem::shadow #icon {
color: blue;
}
Related
i have been fiddling around with this for a few hours now.
I have a vertical elementor nav menu and i want to apply a hover affect to it.
So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.
Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:
Example 1:
Example 2:
What i want it to be like is on the end of the text - which is differnet for each menu item.
Like This:
My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.
Thank you.
Max
You can not select only text. The text must be inside a html tag.
For example:
div {
color: green;
}
p {
color: red;
}
span {
color: blue;
}
<div>
<p>I am selectable with p { }</p>
I am not selectable as I am a text element of root div tag.
<span>Again I am selectable as I am wrapped with span tag.</span>
<div>
A link to the site would be helpful.
But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.
Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.
Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.
I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
I'm trying to make text show up on hover after a menu item (so if the menu says HOME I'd want WERE THE HEART IS to show up when I hover over the home part). I found this question with a way to do it (http://bit.ly/1UgPYoK) but I can't locate the menu div in my theme's files in order to add the hidden text div after it. Can I add the div for the hidden text somewhere else or does it have to be contained in the div for the hover item? Is there an easy way to find where the menu text is located in the code? I hope this all makes sense... I researched a bunch of questions and I understand how to do it if I can just find the right div. I'm very new to this!
I believe that you're looking for the HTML title attribute. Consider the following:
<div>Hover over <span title="IS WERE THE HEART IS...">HOME</span></div>
Or is this not at all what you're looking for?
http://www.w3schools.com/tags/att_global_title.asp
Update
[Disclaimer, this is a purely HTML answer - and doesn't utilize CSS.]
This is done with CSS and HTML. What you do is take advantage of CSS display tag. You can go more advanced and style with more accuracy because you could add any other tags inside the span (i.e div,ul...) into it and make a block with colors that look the same in all browsers.
.more-info {
display: none;
}
p:hover .more-info {
display: inline-block;
}
<p>Home<span class="more-info">Is where the heart is.</span></p>
If this does not help you then please clarify:
You can't locate the menu div?
Please provide what code you are working with so we may explore your question in further detail.
You could simply locate the item by Its own id through document.getElementById(item_id) and then set the title AND the alt property to make sure that is cross-compatible.
var item=document.getElementById(foo_id); item.alt='text you want to show; item.title='same here''
I have this bootstrap and custom css that generates nice "books on shelves". When I use the code itself it works. But when I insert the code in the div:
<div class="panel panel-default">....code from the link...</div>
suddenly the shelves disappear. I noticed that somehow pseudo elements (:before, :after) stop working when I use them in panels. Do you have an idea what is going on? Please help :)
bootstraps panel has a background color of white that overrides your :before and :after css.
.panel {
background-color: #fff; /*GET RID OF THIS*/
}
(you can choose to do this in different ways:
you can change the native bootstrap (not recommended, and you cant if you're using cdn).
add a different class on the panel and put this code in:
.newClass { background-color: none !important; }
(you can use none or transparent) either one will get your shelves css back
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.