custom selection of images to display without global border settings

  • Unknown's avatar
    gotmaester · Member ·

    I am ok with the academica theme’s default border for images. But I have placed a row of “buttons” across many of the pages and they all inherit the themes’ image border. Is there a way to use CSS so these buttons either have no border or a very small one that is black (different from the other images).

    I suspect this might have something to do with the wp-image identifier for each button. Can I set this identify the same for all these buttons, and then put a rule in CSS to apply to those images that have this tag?

    An example of the row of buttons I am talking about can be found front and center on the following page:

    https://game-of-thrones-episodes.com/2016/06/26/610-the-winds-of-winter/

    If anyone can help me, I would greatly appreciate it.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Each image will have a unique wp-image number. If you were to change them to all the same number, all of the images would be the same image.

    What you need to do is to assign a unique CSS class to each of the images from within the post/page editor and then we can use the following CSS rule to hide the borderlines on those. 

    img.no-border {
  border: none;
}

    You would want the img tag in the linked image code to look like this (this is for Se 1). Note the no-border addition.
    <img class="no-border alignnone wp-image-3831" src...

  • Unknown's avatar
    gotmaester · Member ·

    great directions! very clear and precise. We are half way there.

    1. We need to get rid of border when mouse hovers over the buttons. You will see what I mean if you go back to page.

    2. Also, Not sure if I like these menu buttons with or without border. Does either look better to you?

  • Unknown's avatar
    gotmaester · Member ·

    Addendum:

    3. Another option we might want to try, is to make the buttons have a white border with the same width as before, so border is not visible, but the button keeps its placement when mouse hovers over it. So maybe the “fix” is not to change how the buttons react when the mouse hovers over them, but to keep the button’s original border settings, but adjusted so border width is #ffffff. ????????? I hope that makes sense.

  • Unknown's avatar
    gotmaester · Member ·

    MY MISTAKE

    For some reason the above isssue only seems to be a problem on the page above, not on the other pages, where everything seems to work nicely. So IGNORE PREVIOUS POST.

  • Unknown's avatar
    gotmaester · Member ·

    It looks like a matter of simply adding

    img.no-border {
    border: none;
    }

    and leaving the tag alone in the post (NOT changing it to

    <img class=”no-border alignnone wp-image-3831″ src…

    What do you think, sacredpath?

  • Unknown's avatar
    gotmaester · Member ·

    Scrap it! now they are back. Sometimes I get so frustrated. One browser shows it differently than another browser, and I get so confused. I am just going to change everything back to where it was before, and leave the buttons alone. For the time being though I will leave the changes we made on

    https://game-of-thrones-episodes.com/2016/06/26/610-the-winds-of-winter/

    So you can compare, but I think I will change it back.

    Sorry about bothering you. Not all change is good, I guess. Just because I can make a change, doesn’t mean I should. LOL.

  • Unknown's avatar
    thesacredpath · Member ·

    Ok, something is overriding, let’s change the rule to this, which has the !important keyword to force the no border. 

    img.no-border {
 border:none !important;
}
  • Unknown's avatar
    gotmaester · Member ·

    oh wow, so that is what !important means. Whenever I saw that I just thought that was the script writer offering commentary.

    Did you see my post about changing all my posts to pages. So far so good. I am in the process of changing 60 posts to pages (basically all the episodes) and the accompanying widgets (about 200). I am done with most widgets. Some of the widgets will have their own pages now. I just thought the posts were getting too long and all the text on the widgets.

    I will save this thread and come back to it.

    Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    That is a lot of work, but I think given the circumstances it is a good move. On the !important, it is best to only use that when absolutely needed as it can cause some issues with other elements in some cases. In this case though, since we have created a unique CSS class, there is little chance of it causing issues with the theme itself.

  • Unknown's avatar
    gotmaester · Member ·

    good advice… i will be busy with moving everything for about the next 6-8 hours! talk to you again when i am done. thanks.

  • The topic ‘custom selection of images to display without global border settings’ is closed to new replies.