Home › Forums › Weaver Xtreme Theme › Must Link Rules for content links be equal for text & images?
- This topic has 7 replies, 3 voices, and was last updated 7 years, 2 months ago by
scrambler.
-
AuthorPosts
-
April 17, 2015 at 21:14 UTC - Views: 1 #17629
Ahrale
ParticipantHi,
I had added thefollowing css on content links (hover) :{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;}It looks geat on text, but my problem is that I don’t like the way it looks on clickable images.You can see how it looks on my http://atar4u.com (both text & images).Any solution?Thanks & Enjoy Life 🙂AhraleApril 17, 2015 at 22:42 UTC #21326Weaver
KeymasterAdd different styling for images like this – start with your CSS+ rule, then add (adjusted to your preferences):
{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;} %selector% img {background:none;color:blue;border-radius:0;padding:0;}
The %selector% is a special Weaver Xtreme operator that the appropriate classes to the BG CSS+ rule.
April 18, 2015 at 00:59 UTC #21327Ahrale
ParticipantThanks,
I’m not sure where do I define the selector for all images.If you mean %selector% img is the selector, so the hover rule still works for images.{background:#ff9900;color:white;border-radius:1.5em;padding:0 7px;}%selector% img {background:none;color:none;border-radius:0;padding:0;}I’ll try to look more into it, but perhaps you got another hint for me.Thanks & Enjoy Life 🙂AhraleApril 18, 2015 at 05:05 UTC #21328Weaver
KeymasterYou said you added the {background:#ff9900 etc.} to the CSS+ on the content links hover option.
If you simply add %selector% img {rules for link images} after your existing CSS for the regular link hover, that should “undo” the hover rules you don’t want on images.Your existing CSS+ rule generates rules for all a:hover links in the content area. By adding a:hover img rules, that will define a new set of CSS rules just for hover on images. In general, most CSS+ rules are on a BG color rule. For link hover, there also is a CSS+ for hover. By using a CSS+ rule on an existing color option, then using the special value %selector%, you can add additional rules that apply to the option with the CSS+.
April 18, 2015 at 07:43 UTC - Views: 2 #21329scrambler
Moderator@weaver, I don’t think its does. The image html is
<a href=”…”>
<img…./>
</a>So whatever style is on the a tag will always be there regardless of what is on the img tag.
And CSS (3) does not have any way to select a parent based on his children, so you cant select <a> tags that have an <img> child.
The only way I see is to add a class to your Link tags that have an image, so that you can create a rule to undo the styling on these
<a class=”myimglink” href=”…”>
<img …/>Then add the rule below in MAin Options > Fonts & Custom > Custom CSS Rule box
#content .myimglink {background:none;color:blue;border-radius:0;padding:0;}
You may have to ad !important to the rules
April 18, 2015 at 10:05 UTC #21330Ahrale
ParticipantThank you both, Weaver & Scrambler
It seems you was right, Scrambler. I created MyImage class & gave it to these images,I added the code: .MyImage a:hover{border-radius:5em;}and I can live with the result, but for some reason, no other rulles worked for me,not even with !important… tried display:none; tried background:none; tried background:transparent;& few other rules, but for some reason they did not take over.Now on hover on the images it shows the orange line & the bottom of the image without jumping,as you can see on http://atar4u.com … it is kind of nice but not what I meant…I thought the image will become a circle on hover.Anyway, Thanks & Enjoy Life 🙂AhraleApril 18, 2015 at 16:06 UTC #21331Weaver
KeymasterYou’ve put the class .MyImage on the <img>, and it needs to be on the <a> wrapping the image.
And the rule would be a.MyImage, not .MyImage a.
April 18, 2015 at 16:50 UTC #21332scrambler
ModeratorI did miss the hover in my rule, but please read what I said in my post for where the rule goes
<a class=”myimglink” href=”…”>
<img …/>Then add the rule below in MAin Options > Fonts & Custom > Custom CSS Rule box
#content .myimglink:hover {background:none;color:blue;border-radius:0;padding:0;}
-
AuthorPosts
- You must be logged in to reply to this topic.