Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #865909

    Hi!

    I´m using custom class and quick css code to modify a button on one of my pages, but somehow the background will not be transparent.

    I´m using this:

    #top .iconlist-button {
    color: black !important;
    border-color: black !important;
    background-color: transparent !important;
    border: 1px solid;
    }

    #top .iconlist-button:hover {
    color: black !important;
    border-color: black !important;
    background-color: transparent !important;
    border: 1px solid;
    }

    Is there something wrong?
    See the button inside the “stone” container with a few icon lists:

    (It says: make your reservation online here)

    Thanks!

    #865920

    Hi Johan,

    I was able to make the button transparent using this:

    .iconlist-button .avia-color-theme-color-subtle {
        background-color: transparent;
    }
    
    .iconlist-button .avia-color-theme-color-subtle:hover {
        background: black;
        color: #fff !important;
    }

    After you do that, you should be able to remove the redundant styles from the
    #top .iconlist-button
    and style only the borders using that class.

    Not a complete solution I know – but hopefully it will put you in the right direction.

    #866072

    Thanks!
    It worked fine!
    Any ideas on how to add a 1 px black border…?
    My code:
    border-color: black;
    border: 1px solid;
    didn´t do the trick. =)

    Regards Johan

    #866100

    I think you could try this:

    .iconlist-button a {
        border: 1px solid red !important;
    }
    .iconlist-button a:hover {
        border: 1px solid blue !important;
    }
    #866232

    Hey!

    Please refer to @chrisbryant’s post above.

    @chrisbryant
    Thanks :)

    Cheers!
    Yigit

    #866455

    Awesome!

    Thanks! =)

    Regards Johan

    #866463

    Or wait…

    After I made the update, suddenly there is some problem with the width of the team member elements in the bottom container.
    Check that container on the english page:

    And compare it to the swedish page (where I haven´t made the update of the theme):

    The swedish page is how I want it to look and that is how it looked like before the update.

    Regards Johan

    #866475

    @Johan,
    That looks to me more like an issue with a stray DIV tag, or a tag missing.

    When I check that page in a HTML Validator, it does seem to suggest the same thing.
    Was it only CSS that you changed?
    Or is it possible you’ve added, or removed some markup?

    See this:
    https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.sudersand.se%2Fen%2Faccommodations%2Ftwin-cottages%2F

    #866571

    Thanks for quick reply!

    The only place I made changes was in the quick css under general styling.
    But if there was a missing tag on that page, all other pages should not be affected, right?
    Because if you look around on my webpage, every page (alla pages under accommodation in the menu) has the same problem where I have used the team member element.

    Regards Johan

    #866709

    And now there is the same problem on the german webpage.
    So, to sum up:
    I´ve added the Quick CSS on the swedish, english and german page as follows:

    .iconlist-button .avia-color-theme-color-subtle {
    background-color: transparent;
    border: 1px solid black !important;
    }

    .iconlist-button .avia-color-theme-color-subtle:hover {
    background-color: transparent;
    color: #000 !important;
    border: 1px solid black !important;
    }

    BUT the team members element malfunctions on the english and the german, but NOT on the swedish.
    I do not understand this.
    I have not done anything else, not added or erased (on purpose anyway). =)
    Except the theme update you advised me to do (see post – 866230 in another topic).

    Regards Johan

    #866830

    Hi Johan,

    I don’t want to add any confusion to your thread.
    I offered the CSS suggestion – but don’t know about the other post you’re referring to (866230).

    One easy way to troubleshoot this would be to comment out the CSS you recently added, and see if the pages return to normal.
    It doesn’t make sense to me how adding two CSS rules to a unique class (.iconlist-button) would affect anything else.
    Unless the .iconlist-button class is also added to the sections that you’re having trouble with.

    Either way – let’s get it back to ground zero: comment out the recently added CSS, clear your cache, and refresh.
    Only then will we know if it’s the CSS.

    PS: And just to clarify… I’m just another user – not part of the official support team.
    Just want you to know that, so you don’t blame them for my lame advice. lol

    • This reply was modified 6 years, 5 months ago by chrisbryant.
    #866836

    Oh sorry, but I´m writing to whoever is able to help, and thought that the moderator Yigit still was on this problem.
    He is the one who suggested the update in the post I mentioned in another problem. And it was after that, that this problem came.

    I will try to erase the code, but the code is on the swedish page aswell and there is no problem there. But I´ll try it out anyway.

    Regards Johan

    #866838

    Well, it isn´t the code that is causing the problem. No change there.

    Regards Johan

    #866843

    Hey Johan – no need to apologize. I’m happy to help out if I can.
    Since I don’t know what the other update was that Yigit recommended, I’ll leave it with him to reply.

    However, I will say – I tested both your English and Swedish pages.
    The page with the problem has at least one stray DIV tag (maybe two) around line 358-360.
    Whereas, the correct page does not have that error.

    So… the question is: what’s generating the DIV tag?
    Do you have a code block?
    Or a text block with some HTML in it?

    #866846

    I really appreciate the help, don´t get me wrong. =)
    I´ve looked around and there is no html in any text block. No code block (that I know of).

    But I made an entire new section with new team member elements, and the new one works.
    So I guess I´ll have to replace every element of every page in the meantime, so the page look ok again, and search för whatever causing the stray DIV tag a little later. I have actually NO idea what could possible cause the problem. GAH! =)

    #866847

    Hmmm… yeah. Sorry I couldn’t be of more help.
    Best regards from Canada.

    #866849

    You helped with the button! =D

    #867399

    Hi,

    Did you remove the “team member” elements in the following pages? Please re-create the issue in a test page so that we can inspect it. ( see private field )

    Best regards,
    Ismael

    #867497

    Hi!
    As I wrote further up, I made new sections on the english pages and now its working there. The swedish page never had the problem, but the problem still exists on the german page (see private). And the problem is on EVERY german page where the section is placed.

    If it is any interesting info; I got help from Yigit with another problem a few days ago, he told me to update to the latest theme update, and I think that after that update this problem came.

    – Johan

    #867974

    Hi,

    Thank you for the update. This is an issue with the “equal height” column option. Please upgrade to the recent version of the theme, 4.2, then reset the column settings.

    Best regards,
    Ismael

    #867975

    Hi!
    I tried to update the theme, but in the theme options the update-section doesn´t “find” any new updates. I have the “latest” 4.1.2.

    But i tried to change to individual height directly, and it worked. =)

    Regards Johan

    #868002

    Hi,

    Glad it worked. The “equal height” column option should work properly on the latest version, 4.2. Please try to update the theme manually.

    Best regards,
    Ismael

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