CSS Styling

  • Resolved andyward75

    (@andyward75)


    2 years, 1 month ago

    Hi, really sorry to bother you but I’m having some issues trying to get my styling correct. I am developing a site and I have only one table on it but the contents are image links with captions.
    What I wish to do is to have the links (captions) coloured black but with red on hover – which seems to fit with the rest of the site.
    The single table has one row and three columns and the contents of the first column are [caption id="attachment_66" align="alignnone" width="300"]<a href="https://gokasha.com/services/"><img src="https://gokasha.com/wp-content/uploads/2022/09/E-walking-lunge-300x300.jpg" alt="image shows Kasha doing walking lunges with two dumbbells" width="300" height="300" class="size-medium wp-image-66" /></a><a href="https://gokasha.com/services/"> Services Offered[/caption]</a>
    The other two columns are very similar but different image and destination links and ids of -59 and -63
    I have the following in the CSS plugin options after reading your FAQ

    .tablepress .row-hover tr:hover td {
	color: #000000;
}

    The display of the table appears unchanged. For some reason, the page insists on having them red regardless of hover or not.
    Under the Theme Additional CSS on the Customiser I also have:

    #caption-attachment-59  ,
#caption-attachment-63 ,
#caption-attachment-66 {
	font-size: 20px;
	color: black !important; /* Not working */
}

    As you may infer from my comment – the font-size works fine but the colour is seemingly ignored.
    Have you any hints that I may try?

    Many Thanks

    • This topic was modified 2 years, 1 month ago by andyward75.
    • This topic was modified 2 years, 1 month ago by andyward75.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    That first CSS code block will indeed not affect the hovering of the links, but only of the table row. It’s therefore not relevant here (I would actually recommend to uncheck the “Row Hover Highlight” checkbox on the table’s “Edit” screen.)
    Your second block of CSS code will indeed target the captions, but not the link elements inside it.
    Instead, please try this:

    .wp-caption-text a {
    font-size: 20px;
    color: #000000;
}
.wp-caption-text a:hover {
    color: #f1320f;
}

    Now, that all said, I would actually not recommend using TablePress for this table: You are using a table for layout purposes (to create a columns design) which is however not recommended in modern web design. (Tables should be used to present tabular data.)
    Instead, you should be able to achieve this by using a “Columns” block when editing this page so that you won’t need extra plugins at all.

    Regards,
    Tobias

    Thread Starter andyward75

    (@andyward75)

    Thanks for all that and, yes, you are correct. I should use a column block. Thanks for pointing that out.

    Kind Regards

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Styling’ is closed to new replies.