Triton Lite Image Opacity
-
I have just joined wordpress. I am using the Triton Lite upgraded theme. I need to remove the hover effect on the images on my home page. I have tried both the options suggested by some other members, as given below. But it isn’t working for me. Any suggestions?
http://bharatchoudhary.wordpress.com/
.lay1 > div .imgwrap { opacity: 1 !important; }.lay1 > div .imgwrap {<br /> opacity:1!important;<br /> filter:alpha(opacity=100)!important;<br />The blog I need help with is: (visible only to logged in users)
-
Hey. Is it just the change in opacity upon hover that you’re trying to stop or do you also want the date to stop appearing?
To change the opacity effect, I tried the following in the inspector, and it seemed to work for me:
.lay1 > div .imgwrap { opacity: 1 !important; }Inline styles created by JavaScript are hard to override. If the above CSS doesn’t work, I’m not sure if you’ll be able to achieve what you want to. :s
I’ve tagged this post for the moderators to look at. In my opinion, users should be able to override styles in a theme if they pay for a custom CSS upgrade. Maybe this issue needs to be brought up with the theme author?
-
I’ve tagged this post for the moderators to look at. In my opinion, users should be able to override styles in a theme if they pay for a custom CSS upgrade. Maybe this issue needs to be brought up with the theme author?
Yes, that is exactly what the Custom Design upgrade enables. The question of how to do it is well-explained by justpi, another forum volunteer. See here:
http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/Any requests for changes to how a theme works should be brought up in the Themes forum here, as all the themes on WordPress.com are highly customized to work in the WordPress.com environment.
The only themes where the theme author gives support for a theme on WordPress.com are the Premium themes. http://en.support.wordpress.com/themes/premium-themes/ The price you pay also admits you to a special Premium themes forum to receive help from the theme author.
-
@justjennifer: Thanks for your reply.
The issue here is that the CSS @bharatchoudhary is trying to override has been generated inline with JavaScript.
Usually, this could be overriden by using
importantand using highly specific selectors in the custom CSS editor. However, this doesn’t seem to be working with this theme, and as such @bharatchoudhary is unable to use their upgrade to customise the theme as they wish. -
-
The Custom Design upgrade gives users the ability to change only the theme’s CSS; it doesn’t give them the ability to change a theme’s javascript and/or PHP and/or HTML. Changing those would change it for everyone using Triton Lite, including me.
Here’s an earlier answer about how to remove the opacity effect from Triton Lite given by Staff (designsimply): https://en.forums.wordpress.com/topic/how-do-i-get-rid-of-my-posts-transparency?replies=2#post-1088515
Unless I misunderstand, there’s no javascript involved here, but hopefully someone else with more CSS experience than I will be along to help or clarify.
-
Yes, there is JavaScript generating inline CSS. This is the CSS that the user is trying to override.
The answer from @designsimply that you’ve linked to gives the same code that the original poster has said they’ve tried. It doesn’t seem to work for them, which I think is a result of the way the theme is coded.
Hopefully someone else will be able to think of an alternative for this user.
-
That CSS snippet worked in the browser’s inspector for me, but I haven’t tried it on my test blog. I’ll just do test it now to confirm whether or not it definitely does or doesn’t work on a live site…
-
Oops. My bad. I should have checked this on a live site first instead of being lazy. However, the original code does indeed work.
@bharatchoudhary: Maybe you have missed a semi-colon or misspelled something from the original snippet? It’s easily done, but makes a big difference. Can you go back and make sure the CSS you’ve entered matches the snippet exactly?
.lay1 > div .imgwrap { opacity: 1 !important; } -
Thanks siobhyb and justjennifer
I tried using the code that you both suggested. But it isn’t working.
When I use Firebug to look at the HTML code and its corresponding CSS rule this is what I see.
HTML
<div class="imgwrap" style="opacity: 0.7;">CSS Rule
element.style { opacity: 0.7; }But I do not see the
element.stylerule in the Triton Lite style sheet that I have downloaded.@ siobhyb – Did you test the code on a Triton Lite theme? I am wondering why it isn’t working for me?
-
You can’t see the rules in the Triton Lite stylesheet as it is being generated using JavaScript.
I installed the Triton Lite theme on my test blog and the code works correctly for me. Hmmmm..
I’m looking at your site’s source code now and can’t see any reference to the custom CSS you’ve put in. Did you get a “Your design is published!” confirmation message when you saved the changes in your editor?
-
-
Ah, I’m not seeing the CSS in any of your site’s source code. There may be an issue with your upgrade. Again, I’ve tagged this post with “modlook” – hopefully a moderator will come along soon and be able to solve this for you. Sorry I couldn’t be more of a help!
-
-
Yes, I do get a “Your design is published!” confirmation.
But nothing changes :-)@bharatchoudhary Is there any chance you had an annual Custom Design upgrade but didn’t renew it? (just trying to eliminate a possible cause.)
-
-
-
@karim- While the OP has changed themes (I prefer Hatch) can you at least confirm that the Custom Design upgrade is indeed active on their account so we can eliminate that as a possible problem in the future? If not, that’s OK too.
-
@karim- While the OP has changed themes (I prefer Hatch) can you at least confirm that the Custom Design upgrade is indeed active on their account so we can eliminate that as a possible problem in the future? If not, that’s OK too.
I can confirm the Custom Design upgrade is active :)
-
- The topic ‘Triton Lite Image Opacity’ is closed to new replies.