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 Selectors Reference

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

• https://www.joomunited.com/de/nachrichten/aufteilen-von-blocken-mit-fortgeschrittenem-gutenberg-spaltenmanager