-
Posts
-
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!
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.
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
I think you could try this:
.iconlist-button a { border: 1px solid red !important; } .iconlist-button a:hover { border: 1px solid blue !important; }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
@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?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
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
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-buttonclass is also added to the sections that you’re having trouble with.Either way – let’s get it back to ground zero:
comment outthe 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. lolOh 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
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?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! =)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,
IsmaelHi!
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
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
- You must be logged in to reply to this topic.