Home Forums Weaver Xtreme Theme Must Link Rules for content links be equal for text & images?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17629
    Ahrale
    Participant

    Hi,

    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 🙂
    Ahrale
    #21326
    Weaver
    Keymaster

    Add 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.

    #21327
    Ahrale
    Participant

    Thanks,

    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 🙂
    Ahrale
    #21328
    Weaver
    Keymaster

    You 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+.

    #21329
    scrambler
    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

    #21330
    Ahrale
    Participant

    Thank 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 🙂
    Ahrale
    #21331
    Weaver
    Keymaster

    You’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.

    #21332
    scrambler
    Moderator

    I 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;}

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.