This question is about the ES6 web component (compatible with Polymer 2.0) called vaadin-context-menu version 3.0.0-alpha1.
In the below screen capture, I want the paper-item labeled "Logout" to look the same as the paper items labeled "Edit Profile" and "Preferences."
Specifically, when not being hovered, I want all three to have:
paper-item {
background-color: white;
font-weight: normal;
}
Here is my code.
my-el.html
<vaadin-context-menu selector="button" open-on="click" close-on="none">
<template>
<style>
paper-item {
cursor: pointer;
--paper-item-focused: { /* Doesn't seem to work */
background-color: white; /* Doesn't seem to work */
font-weight: normal; /* Doesn't seem to work */
};
}
paper-item { /* Doesn't seem to work */
background-color: white; /* Doesn't seem to work */
font-weight: normal; /* Doesn't seem to work */
}
paper-item:hover {
background-color: var(--app-primary-color);
color: white;
}
</style>
<paper-listbox>
<paper-item>Edit Profile</paper-item>
<paper-item>Preferences</paper-item>
<hr />
<paper-item>Logout</paper-item>
</paper-listbox>
</template>
<button>Click Me</button>
</vaadin-context-menu>
Looking at https://vaadin.com/elements/-/element/vaadin-context-menu#demos It appears that custom styling is the current focus (in regards to keyboard) that's what the grey is.
https://github.com/vaadin/vaadin-context-menu/issues/55
References the style saying it's a paper-menu feature, the bold reprensents the last chosen option.
That’s a feature. There is a workaround to make it invisible:
<paper-menu selected-class="not-defined">...</paper-menu>
https://www.webcomponents.org/element/PolymerElements/paper-menu
--paper-menu-selected-item Mixin applied to the selected item {}
--paper-menu-focused-item Mixin applied to the focused item {}
See https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-a-custom-properties-api-to-style-an-element
for using custom properties.
paper-menu {
--paper-menu-selected-item: {
background-color: white;
font-weight: normal;
}
--paper-menu-focused-item: {
background-color: var(--app-primary-color);
color: white;
}
}
Here is one solution that bypasses the automatic highlighting of previously selected items. It is taken from the documentation here.
jsBin | source
https://jsbin.com/muwapaweke/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>vaadin-context-menu demo</title>
<script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">
<!-- import paper-menu and paper-item -->
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>
<vaadin-context-menu>
<template>
<style>
.my-menu {
padding: 8px 0;
background: #fff;
}
.my-menu-item {
display: block;
padding: 8px 24px;
text-decoration: none;
color: #000;
}
.my-menu-item:hover {
background: #eee;
}
</style>
<div class="my-menu">
First menu item
Second menu item
</div>
</template>
<p>
This paragraph has a context menu built using basic HTML elements
and global CSS styles.
</p>
</vaadin-context-menu>
</body>
</html>
Related
I am trying to have a button highlight when I hover over it, but it doesn't seem to be working. Am I doing something wrong? It seems to work on the dropdown menu I made, but not the buttons. I am new to html and css and I couldn't seem to find an answer anywhere online.
/*a button that when clicked on, sends to a page about me*/
.SiteMakerButton {
padding : 16px;
width: 15%%;
text-align : left;
background-color: rgb(37, 217, 184);
border: none;
color: white;
font-weight: bold;
font-size: 15px;
}
/*a button that takes you to the main paige*/
.HomeButton {
padding : 16px;
width: 15%%;
text-align: left;
background-color: rgb(37, 217, 184);
border: none;
color: white;
font-weight: bold;
font-size: 15px;
transition-duration: 0.2s;
}
.HomeButton :hover {background-color: white; color: black;}
.SiteMakerButton :hover {background-color: white; color: black;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TESTING</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = TopBannerDiv>
<button class = "HomeButton">Home</button>
<button class = "SiteMakerButton">About The Site Maker</button>
<div class = "dropdown">
<button class = "dropbtn">Units</button>
<div class = "dropdown-content">
Unit 1
Unit 2
Unit 3
Unit 4
Unit 5
Unit 6
Unit 7
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js"
theme="blue" defer></script>
</body>
</html>
Try writing
.HomeButton:hover {background-color: white; color: black;}
like this, there is a difference in CSS between having spaces and not.
Also, use inspect element to make sure that there is nothing that is overwriting your style.
Reduce the space between the class and the pesudo class (means hover)
.HomeButton:hover {
background-color: white;
color: black;
}
.SiteMakerButton:hover {
background-color: white;
color: black;
}
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.