Skip to content

WordPress Essentials

Working with CSS

Where to add your CSS Code ?

  • Goto : Design -> Customizer -> Addional CSS
  • Sample:

Color Table Cells and Vertical Align Content

Define an Additional Classname in your Gutenberg Editor

  • Click on your table which you want to modify
  • Provide a class name. In this case we select protocol-table as our CSS class which we will reference later in our CSS Code

CSS Code to vertical align text on top and color the background in light grey

.wp-block-table.protocol-table td {
    background-color: lightgrey;
	  border-color: black;
	  vertical-align: top ; 
}

Related Links

CSS Code to color File Upload Button

body .wp-block-file .wp-block-file__button {
  background-color: red;
  color: white;
	
	&:hover {
    background-color: green;
    color: white;
		border: 2px solid;
	  border-color: black;
   }
}

Working with tables and Gutenberg Editor

Links

Currently Gutenberg Editor is not able to split and merge cells. To archive this is use Excel as a source of data and finally copy the table to the editor wher i can still edit the content

Links

Published inWordpress

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *