Hover effects and table content alignment

Support
#1

Hi folks at Themeco and Happy New Year to you all :sparkler:

First off id like to say that i cant wait for all of your updates in 2019, especially in regards to the posts layout. if i could have an element of a configurable post layout on my homepage that would be ace!!!

Anyhow, i have a couple of things that i am stuck with that i would like help with if thats ok. Firstly, how do you vertical align content in a table? Its always aligned in the middle:

I would like all text at the top.

Also i have created what look like tabs just using coloured columns and anchor links but i would like some form of hover over for the links in that row which maybe underlines, changes colour and font size. Any ideas? Here is what it currently looks like:

As always, thanks all.

#2

Hi Chris,

This should be fixed by adding a bit of custom CSS code to the elements. Is there a chance that you can provide the direct link to the pages in question so that we can check them and provide you with some suggestions?

Thank you.

#3

Of course. Here you go @Jade

https://snhs.kirklees.sch.uk/departments/philosophy-morality-and-ethics-pme/

thanks.

#4

Hi Chris,

To align the table contents on top of the table cell, please add this code in the Global CSS:

table td {
    vertical-align: top;
}

Then to change the color or the column background on hover, please add this code in the Column’s Element CSS field:

$el:hover .x-bg-layer-upper-color {
  background-color: #000 !important;
}

Please change the background color value in the code above to your color preference. Also, you will have to add the code above to each of the column’s element CSS.

Hope this helps.

#5

Thanks @Jade, the table alignment worked. Also do you know how i can globally add a bottom border as well as a top border. Everything that i have tried doesnt work.

Also on the column background, as i cant make the column a clickable link (the colour change worked by the way), is there a way that i can change the text element inside the column to change colour on hover?

thanks again.

#6

Hello Chris,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS:

table td {
    border-top: 1px solid #584848;
    border-bottom: 1px solid #584848;
}

If you are looking to change the color for tabs that you have created then in above CSS shared by Jade, just add following piece of code color: #000;. Please change the color code as per requirement. You can also do following to text element:

  1. Add a new class under Customize > Setup > Class:

  1. After that add following CSS under X > Theme Options > CSS:
.column-color:hover {
    background-color: #ddd;
}

Change column-color class as per your requirement.

Thanks.

#7

Hi @Prasant, i think i can see what is happening. I have a table inside a tabbed element. When i add the code to the global css , in the preview the borders appear fine but on the live site the borders do not show. Any ideas?

Also re the columns, its actually the text element that i want to change the hover for inside the columns, not the columns itself if thats possible? I hope this makes sense?

thanks,

Chris

#8

Hi Chris,

Please try to add an important declaration to the code like this:

table td {
    border-top: 1px solid #584848 !important;
    border-bottom: 1px solid #584848 !important;
}

You may follow the suggestion by @Prasant where you add a class to the columns but add this code to the Global CSS:

.column-color:hover a span {
    colorr: #ddd !important;
}

Hope this helps.

#9

Hi @Jade, thanks very much. That sorted the table borders out. :slight_smile: Just need to get the text to change on hover. The text in a section called links and each text is html which makes it white and has a link which is:

Introduction

I would like to change the colour of this text on hover if possible but cant seem to make it work. Would you like me to provide a login so you can look?

thanks again.

#10

Hello @King,

You will have to update the html code into this:

<p><a class="my-link" href="#intro">Introduction</a></p>

And then add this custom css:

.my-link {
  color: white !important;
}

.my-link:hover {
  color: red !important;
}

This css code will set the active and the hover color of your link text.

Hope this helps. Please let us know how it goes.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.