I am using a donation widget from another company which I have made use of on my website. I would like to change the size of the photos in the dropdown menu next to the item on the menu. I want to change it to 50x50 pixels.
Unfortunately, all I have is the widget code itself. I do have a image example, that could help to clear up what I'm talking about.
$data.WebPhotoId {
max-width: 50px;
max-height: 50px:
}
dropdown-menu databind= {
max-width:50px;
max-height:50px;
body {
font-size: 16px;
font-family:Helvetica, Arial, sans-serif !important;
color: #676767;
}
}
My question is, is there any way I modify my CSS in order to change the menu item pictures?
Well if it is set with <img src="path/to/image"> you can't do it nicely with CSS.
In that case I would suggest using JavaScript or jQuery for this.
var image = document.getElementsByClassName('image-class')
for(var i = 0; i < image.length; i++) {
image[i].src="path/to/new/image";
}
With CSS you can set background-image: url('path/to/new/image') but I don't think it will work in case where image is set with <img src="path/to/image">
Related
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
Hopelessly novice, but dedicated.
Using Wordpress.
I'd like to be able to do this:
http://www.ericryananderson.com/
On hover, the images turn greyscale and captions appear.
All is smooth.
My initial hopes of finding a easy plugin that switches images upon hover has been crushed.
All help is greatly appreciated.
Arvid
If you can simply add plain CSS and HTML code to your site, then this is the structure:
HTML:
<div class="cool-card">
<img src="whatever.png">
<h2>Whatever text you want to show</h2>
</div>
And then, in CSS:
.cool-card {
/* Add here any custom style (width, height, etc.) to the card */
}
.cool-card > img {
width: 100%;
height: 100%;
}
.cool-card:hover > img {
filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}
.cool-card > h2 {
/* If you want to change the look of the text, do it here */
display: none;
}
.cool-card:hover > h2 {
display: block;
}
If you can't, I'm sorry, but I've tried :)
What is the method of adding my own custom icons to the submenu name area in a panelMenu in PF 3.5?
This is the example given on the official documentation web page:
I have to remove the small arrows and replace them with other images. So far, I have understood that the arrows are placed by the primefaces.js (which comes in the PF JAR file). What is the method of replacing them through java? As I am generating a dynamic menu, not a static one. I would like something like this:
I have tried
MenuItem item = new MenuItem();
item.setIcon("ui-icon-print");
But this changes it for the items INSIDE the submenu. e.g. Save and Update. I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc.
Disclaimer: I've tested this with PrimeFaces 6.0, but this will most likely also work with 3.5.
The easiest way to do so (in my opinion) is using CSS. If you inspect the arrow using your browsers debugging tools you will find that the image comes from a background sprite at a specific position.
To create a more specific rule to set your icon it's best to add a style class to your submenu:
<p:submenu label="Ajax Menuitems" styleClass="myIcon">
or in Java:
DefaultSubMenu defaultSubMenu = new DefaultSubMenu("Ajax Menuitems");
defaultSubMenu.setStyleClass("myIcon");
Now you can use that class to create your CSS rules (assuming you've created a sprite):
.myIcon .ui-icon.ui-icon-triangle-1-e {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* closed position */
}
.myIcon .ui-icon.ui-icon-triangle-1-s {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* opened position */
}
As suggested by #Jasper, I set the styleClass attribute for the submenu and it worked. Here is the code for my xhtml:
<div class="">
<h:form>
<p:panelMenu model= "#{menuBean.getModel()}" type="tiered">
</p:panelMenu>
<p:spacer height="10"></p:spacer>
</h:form>
</div>
CSS:
.icon-1 > h3 > span{
background-image: url(../resources/images/icon_1.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
.icon-2 > h3 > span {
background-image: url(../resources/images/icon_2.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
Java:
List<Items> list = //map of items to be added to the panelMenu with a parent-child hierarchy.
String label = "SubMenu 1";
String icon = "icon-1";
Creating a new submenu and adding styleClass:
Submenu submenu = new Submenu();
submenu.setLabel(label);
//submenu.setIcon(icon);
submenu.setStyleClass(icon);
Adding the submenu to the panelMenu:
((MenuModel) container).addSubmenu(submenu);
Creating a new item to go inside the submenu:
MenuItem item = new MenuItem();
item.setValue(label);
item.setTitle(label);
item.setIcon(icon);
if (container instanceof MenuModel) {
((MenuModel) container).addMenuItem(item);
} else if (container instanceof Submenu) {
((Submenu) container).getChildren().add(item);
}
The result:
This method works much better than the first method I tried. For that, I added a custom PanelMenu renderer as explained here: Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu. It is a lot more work while requiring the same icon styling classes.
to change the icon you have two solutions
First solution
You can look to the Ui-Icon we site and choose the icon that you want to use Icons Site
Second solution
you can use your own icon using css
.mainPageIcon {
background: url(/images/image.png) no-repeat;
height: 16px;
width: 16px;
}
<p:panelMenu style="width:300px" icon="mainPageIcon ">
...
</p:panelMenu >
for Java solution
MenuItem item3 = new MenuItem();
ImageIcon imageIcon = new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));
item3.setIcon("imageIcon");
You can read more Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu
My wordpress is running a 2014 theme. I am hoping that I can add the word menu next to the lined menu for people who do not know that the lines are a menu. This menu with lines only shows when the site is sized down to the size of a mobile site. The website is dreamgardens.tlchatt.com . I have scoured the web to figure it out. I managed to get my own header image into the theme. Seems like it would be a simple task. I was able to make the area around the button larger in two different ways by changeing style.css .
It looks like the change to the mobile menu occurs based on this Javascript.
( function( $ ) {
var body = $( 'body' ),
_window = $( window );
// Enable menu toggle for small screens.
( function() {
var nav = $( '#primary-navigation' ), button, menu;
if ( ! nav ) {
return;
}
button = nav.find( '.menu-toggle' );
if ( ! button ) {
return;
}
I am hoping to make the mobile menu have the text menu to the right of it much like this website http://chattanoogagb.kokofitclub.com/. I do not understand this code well enough to locate where the mobile re sized code is and alter it to include the text Menu.
The above Java Script and PHP refers to this style.css entry
.menu-toggle {
cursor: pointer;
font-size: 0;
height: 48px;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 48px;
}
.menu-toggle:before {
color: #fff;
content: "\f419";
margin-top: 16px;
}
The \f419 seems to refer to a style sheet genericons.css which has this code.
.genericon-menu:before { content: '\f419'; }
I am wondering if there is a simple aditional line of code I can insert somewhere to place the word "Menu" somewhere near the mobile toggled menu button. Some kind of subtext or something would be fine.
This is not the most elegant way maybe to do this, but you need to change the following lines 1000-1004
.menu-toggle:before {
color: #fff;
content: "\f419";
margin-top: 16px;
}
to this
.menu-toggle:before {
color: #fff;
content: "MENU";
font-weight: bold;
font-size: 12px;
margin-top: 16px;
}
Remember, this goes in your child themes' style.css. Don't edit the twentyfourteen theme directly.
Based on your site it is not responsive - so my assumption you have no media queries? Any way I would use 'Responsive Select Menu' from the plugins library. Set it to 768px and you should be all good. Let me know how you get on :)
My excuses in advance, since this seems to be a problem concerning very basic understanding of CSS and maybe also Javascript.
What I want to do is this: imagine a div which contains a h3 and a p. On hovering on the div I would like the h3 and p to change their font-weight. So far I am using this code here to change the opacity and border on hovering over the div, but I really don't know how I can refer to the two elements inside the div. I'm really sorry, but I need someone to explain it to me in very simple terms.
For example, I think those elements inside the div are called children, but I'm not even sure about that... I'm really working with all that HTML/CSS/Java stuff for the first time and try to figure things out as I go along. The tutorial sites I found so far couldn't solve my problem, therefore this post.
More background information: I'm using the "smoothgallery" script by jondesign (Jonathan Schemoul) () and am trying to bend it to my will, but that is pretty difficult if you don't have any clue how it actually works. The site I implemented the script in can be found here.
Here comes the CSS part that changes the div on hover:
.jdGallery .gallerySelector .gallerySelectorInner div.hover{
border: 1px solid #89203B;
border-left: 0.8em solid #89203B;
background: url('../../images/teaserBox_bg.jpg') no-repeat;
background-size: 100% 100%;
filter:alpha(opacity=1);
-moz-opacity:1; /
-khtml-opacity: 1;
opacity: 1;
}
This entry in the CSS file changes the settings for e.g. the h3 inside that div,
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
You may also want to take a look at the .js file that makes these classes, it can be found here.
This is probably the most important part here:
createGalleryButtons: function () {
var galleryButtonWidth =
((this.galleryElement.offsetWidth - 30) / 2) - 14;
this.gallerySet.each(function(galleryItem, index){
var button = new Element('div').addClass('galleryButton').injectInside(
this.gallerySelectorInner
).addEvents({
'mouseover': function(myself){
myself.button.addClass('hover');
}.pass(galleryItem, this),
'mouseout': function(myself){
myself.button.removeClass('hover');
}.pass(galleryItem, this),
'click': function(myself, number){
this.changeGallery.pass(number,this)();
}.pass([galleryItem, index], this)
}).setStyle('width', galleryButtonWidth);
galleryItem.button = button;
var thumbnail = "";
if (this.options.showCarousel)
thumbnail = galleryItem.elements[0].thumbnail;
else
thumbnail = galleryItem.elements[0].image;
new Element('div').addClass('preview').setStyle(
'backgroundImage',
"url('" + thumbnail + "')"
).injectInside(button);
new Element('h3').set('html', galleryItem.title).injectInside(button);
new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
}, this);
new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
},
So my question here is, if it is possible at all to change the h3 and p settings by using the hover function on the main div?
Thanks in advance! Also for negative criticism, I don't really know if I did something wrong in the way I posted this question and if I can even ask it here.
You're making this way more complicated than it needs to be. No Javascript is required to do this. Let's say you've got the following:
<div class="container">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
So you've got a container, with a header and paragraph. Let's say you want to have the header normal weight, and the paragraph in red normally, with a padded box around the whole thing. Here are your styles:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
When you hover the mouse over the , you want the paragraph and header in bold and the box border to change to blue. Add this into your stylesheet (or <style> block) below the CSS above:
.container:hover { border-color: blue; }
.container:hover h3 { font-weight: bold; }
.container:hover p { font-weight: bold; }
Note that you can save a bit of space, and make it more concise by combining the <h3> and <p> styles into one line with a comma, since they're both the same. The whole thing would now look like this:
.container { border: 1px solid black; padding: 10px; }
.container h3 { font-weight: normal; }
.container p { color: red; }
.container:hover { border-color: blue; }
.container:hover h3, .container:hover p { font-weight: bold; }
Remember that the "C" in "CSS" stands for "cascading": styles cascade down through both hierarchies (that is, a parent element's style also applies to a child element, unless it's got default styles like margins or whatever), and down the style sheet - that means styles you define after others will override them if they apply to the same element.
The ":hover" selector in CSS can pretty much be used on anything, with very few exceptions. I use them regularly for Javascript-free drop-down menus. You can find more on the ":hover" CSS selector here: W3Schools CSS reference on ":hover". In fact, the W3Schools site is a generally great resource for brushing up your CSS.
because short answers what we always prefer to look for:
.classname :hover *