• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

CSS not working

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS not working

This topic is: resolved

Tagged: css, parallax-pro

  • This topic has 7 replies, 2 voices, and was last updated 3 years, 12 months ago by akubrin.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 13, 2019 at 8:57 pm #490045
    akubrin
    Participant

    Hi,
    I’m trying to modify my tables, but some of my CSS is not working. The th selector should bottom-align the text in the heading row and add a gray background with an alpha, but neither statement is working.
    Can anyone help? See code below.
    I’m using WP 5.1.1 with the Genesis Framework Parallax Pro theme.
    Thanks.

    table, th, td {
      border: 1px solid #3B3C41;
    }
    th {
    	vertical-align:bottom;
      background-color: rgba(59,60,65,0.4);
    }
    th, td {
    	border: 1px solid #3B3C41;
      border-bottom: 1px solid #3B3C41;
    	padding: 10px;
    		line-height: 1.4;
    }
    td {
    		vertical-align: top;
    }
    
    https://speakbusinesscomm.com/content-marketing/optimizing-content-audience/
    March 14, 2019 at 5:14 am #490047
    Victor Font
    Moderator

    You're not using any th elements on the table. Look at the page source in your browser.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 14, 2019 at 9:10 am #490055
    akubrin
    Participant

    Hi Victor,
    You're quite right. Every row in the table is a <tr> element.
    How can I select just the first row of every table in my CSS?
    Thanks for your help.
    Andy

    March 14, 2019 at 9:13 am #490056
    akubrin
    Participant

    I should add that the <tr>elements were automatically generated by the WP block editor. If I edit the source, I don't know if WP will leave my changes alone. So I'd prefer to work in CSS.

    March 14, 2019 at 1:06 pm #490060
    Victor Font
    Moderator

    Gutenberg won't allow you to add classes or change the table block source. If you try to edit the table as HTML, it will throw an error about invalid HTML and ask you if you want to convert the table block to a HTML block. If you say yes, you can do anything you want with it because it's all custom HTML now. If you say no, Gutenberg strips any customizations from the block.

    You could try adding a class in the advanced field in the right sidebar when you're in the block. Any class you add there, will be added to the table selector like this:

    <table class="wp-block-table my-test-class">

    Then in your style sheet, you can use:

    table.my-test-class tr:first-of-type {
        vertical-align:bottom;
        background-color: rgba(59,60,65,0.4);
    }

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 19, 2019 at 8:48 pm #490147
    akubrin
    Participant

    Hi Victor,
    That worked in part, but not completely. The vertical-align:bottom statement is not working, but the background-color: rgba(59,60,60.4) is working well.
    Do you know why the header rows still won't bottom align?
    Thanks.
    Andy

    March 21, 2019 at 10:26 pm #490189
    Victor Font
    Moderator

    Are you trying to center the text in the row you're using as a header. Vertical align centers the text vertically between the top and bottom border. You only have one line of text in each of the header row cells. There's nothing to align vertically.

    To center the text in the cell you have to use text-align: center. In which case change the CSS I gave you to:

    table.table-style-regular tr:first-of-type td {
        vertical-align: bottom;
        background-color: rgba(59,60,65,0.4);
        text-align: center;
    }

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 22, 2019 at 3:01 pm #490212
    akubrin
    Participant

    Hi Victor,
    Some of my tables have multi-line headings, and that's why I was looking to bottom-align the text in the first row.
    Your code works. Thanks again for your help.
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘CSS not working’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble