I'm using classic Galleria theme. I implemented the lightbox and changed the frame color:
.galleria-lightbox-shadow{background-color: transparent !important}
.galleria-lightbox-content{background:black !important}
But is it possible to change the color of the next, previous and close buttons in Lightbox?
Right now they are white. I would like to have them in black. Is there a solution to that?
If my hunch is correct, the 'next', 'previous' and 'close' buttons are images (as is with most Lightboxes).
You should edit the images in their folder and convert them into black-themed ones manually, or search online for any replacements.
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
How to I change the background color of the comments posted? I have white text so the text is not visible
use chrome to open any post which have comment, then right click on the comment and select 'inspect element'. Now you will see the relevant CSS where you can make changes as per your requirements.
change the background color using CSS and tha file might be located in wordpress/wp-content/themes/style.css or in wordpress/wp-content/themes/css/style.css
or get any css file and add new style for #comment
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
I have custom text input CSS on my site, which causes the boxes to be all white when selected and grey when not in focus, as you can see here:
In the second picture, Google Chrome automatically fills in my username and password as I have it saved, and it highlights the inside of the box (not the border) a pale yellow. Is there some sort of CSS selector to override this event, or some better way to do it? Is there a way I can make my border highlight as well?
Try using background-color: white !important; which should override Chrome's autofill, unless Chrome is programmed to override everything, in which you can't do anything about it.
I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).