-
Posts
-
Hi there, i was wondering how to do some changes on the Masonry Gallery. I did everything i could find in the forums but there are some things i cant get done. Mainly couse i don’t know about quick css codes.
My Site is http://www.cm-arq.com and the Gallery is in the Home page (INICIO in spanish)What i want is to give some transparency to the caption background which i did with this code:
figcaption, figcaption * {
opacity: 0.7 !important;
margin-top: -5px;
color: white !important;
}However, its changin the font opacity too, which i dont want. I was wondering if i could set both opacity with different values, or have the font with no transparency at all.
This i use to set the size:
.av-masonry-entry .av-masonry-entry-title { font-size: 12px; }Also, the masonry caption has a litle arrow or square in the center top. Is there a way to remove that? so the caption background is only a rectangle line.
Thnks in advance!
Ian
Your site is protected so none can see the issue. Opacity applies to the element and it’s childs. If you want to have background opacity you need to use the CSS property background-color: rgba(255,255,255,0.7). The decimal on the fourth place is the alpha channel and defines the opacity.
Ok, thnks for the help but i cant figure out where to put that code. I’ve tried different places but no result.
Any other idea?Or can u tell me here where to put it?
figcaption, figcaption * {
opacity: 0.7 !important;
margin-top: -5px;
color: white !important;
}Hi!
Please go to theme options and add the code to the customisation custom CSS
Let us know if that would work
Regards,
BasilisOk so no, i had no luck with those codes. I gave up, though now what i want is to leave the caption that way, as it is, BUT when mouseover, the font to become fully white. ONLY the font.
I removed the “under construction” plugin so access is free now.Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.av-masonry-entry .av-masonry-entry-title { color: #ffffff!important; }If that does not help, please create a temporary admin login and post it here privately so we can look into it. Your website is under construction :)
Best regards,
YigitHi,
I changed the code to following one
figcaption, figcaption * { margin-top: -5px; color: white !important; } .av-fixed-size .av-masonry-entry .av-inner-masonry-content { background-color: rgba(0,0,0,0.7); } .av-fixed-size .av-masonry-entry .av-inner-masonry-content .avia-arrow { display: none; }Please review your website again :)
Best regards,
YigitWow! you are amazing, it’s very much appreciated. U guys are great.
Now: if i want to have both things with opacity, but when i get the mouse over it, to turn only the words fully white as u set them?
Another complication im having is making every link i enter in texts in portfolios, to be gray as they are now, but when mouseover, to turn white, without underline.
Thnks again, sorry for the troubles!
Hi,
Here is the code to add opacity and make titles white on mouseover:
.av-masonry-entry .av-masonry-entry-title { color: rgba(255, 255, 255, 0.7) !important; height: 14px; } .av-masonry-entry .av-masonry-entry-title:hover { color: rgba(255, 255, 255, 1) !important; }I did not understand what you want to do with portfolio links though, could you explain a bit more, what you’re trying to achieve?
Best regards,
VictoriaThank you Victoria! the code did work, however when i put the mouse over the title. Is there a way to make that same change but when i put the mouse over the image?
What im talking about the links is this: the link is gray, every text is gray. When i put the mouse over it, it´s still gray buy with an underline. What i would want is for it to become white, and with no underline. I attach some screens
http://imgur.com/gV0PGTQ (with no mouse)
http://imgur.com/HDnRNRp (with mouse)Hi,
Try this code:
figure.av-inner-masonry.main_color:hover .av-masonry-entry-title { color: rgba(255, 255, 255, 1) !important; } #info-email {color: grey;} #info-email:hover {color: #fff; text-decoration: none;}I removes extra span and added an id to target that link very easily.
Best regards,
VictoriaOK that did work! thank you very much.
One last thing. Ive spent many hours trying to change my portfolio links to turn white without underline when hovered.What i have now working is the removal of the Underline when hovered. However i didnt get the color to work right. Ive tried many different ways but it just wont change. (i read all post related to link hover, and the solutions didnt work)
What i have now isa:hover, a:active { text-decoration: none; main_color a:hover { color: #ffffff !important; } }Hi,
They work fine on my end. Have you figured it out already? :) If not, please elaborate.
Also, following code is wrong
a:hover, a:active { text-decoration: none; main_color a:hover { color: #ffffff !important; } }I removed following line from it
main_color a:hover { color: #ffffff !important; }Best regards,
YigitYes but that is on the Masonry Gallery, which u solved correctly. So thank you.
Now im talking about the links to external websites on my Portfolios. I want to make every link i add to be the same color as the font (gray #808080) but when hovered to be white with no underline. When i enter a link, the underline is gone. But it stays gray, no white.
- You must be logged in to reply to this topic.