Monday, April 20, 2020

Use div for Table Layout in HTML

table HTML Tag has been in HTML for long time to show table-like layout. Now div is more powerful tag to display a block of text, and this can be used for table-like layout.

The basic concept is to use css styles as a way to instruct div to show block of text in table-like layout. After search on web, I found a couple ways to use div, and I place the correspoding ccs styles in Blogger's templates.

The following are some ccs classes in Blogger template:

/* -- no border table using div class */
.nbTable { 
  display: table;
  width: 100%;
} 
.nbTableRow {
  display: table-row;
}
.nbTableHeadRow {
  display: table-header-group; 
  font-weight: bold;
} 
.nbTableBody {
  display: table-row-group; 
} 
.nbTableFoot {
  display: table-footer-group; 
}
.nbTableCell, .nbTableHead {
  display: table-cell; 
}
.nbTableCell1Line, .nbTableHead1Line {
  display: table-cell;
  white-space: nowrap;
}

/* -- table with border using div class */
.bTable {
  display: table;
  width: 100%;
} 
.bTableRow {
  display: table-row;
}
.bTableCell, .rTableHead {
  display: table-cell;
  padding: 3px 10px;    
  border: 1px solid #999999;
}
.bTableCell1Line, .rTableHead1Line {
  display: table-cell;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid #999999;
}
.bTableHeadRow {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}
.bTableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}
.bTableBody {
  display: table-row-group;
}

Read More...

Sunday, April 05, 2020

Use VIM to Clean Up HTML

I have set up a blog at Blogger with more than one authors so that we can write our stories, observations about COVID-19. Some authors do not have any knowledge about HTML or how to write clean blogs there. As a result, the blogs they created contains massy HTML tags, either cause them frustration to edit text or inconsistent styles spreading blog text.





I am tech support person working hard behind scenes. One of my jobs is to clean up their blogs to remove unnecessary HTML tags. Here is one example how complexed HTML is:




VIM as Effective Tool


It is really tedious and time consuming to manually remove HTML paired tags. For example:

<span ...>...</span>

I realize that VIM is a great tool for help!

Here is the command to find out span paired block in HTML:

/<span\(\_.\{-}\)\@=\_.\{-}>

search for start patten <span any chars afterwards including mutilple lines till >.

Here is the result:





That's very exiting! With this confirmation test, it will be just line of VIM replace command to clean up span tags:

%s:<span\(\_.\{-}\)\@=\_.\{-}>::g  





More VIM command for finding and replacing


/<\/span\(\_.\{-}\)\@<=\_.\{-}> ## find </span>
:%s:<\/span\(\_.\{-}\)\@=\_.\{-}>::g ## replace </span>


/<div\(\_.\{-}\)\@<=\_.\{-}> ## find <div...>
:%s:<div\(\_.\{-}\)\@=\_.\{-}>::g ## replace <div>


/<\/div\(\_.\{-}\)\@<=\_.\{-}> ## find </div>
:%s:<\/div\(\_.\{-}\)\@=\_.\{-}>::g ## replace </div>

With above a few commands, I cleaned up HTML with great result!





References


Read More...

Wednesday, April 01, 2020

Blogger: Change Background Color & Text Size

I have a blog at Blogger. Recently my friends ask me if I could change the background color and increase font size for my posts. After search on web, soon I found solutions.

Change Background Color


First go to Theme, then Edit HTML.

Expand line 9, b: skin section.





Search for "post.background.color". You will find this as variable definition.





In my Blogger, it is located at line 32: Make a copy the variable first. Then you can make change:

  1. <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#353d4a"/>
  2. <Variable name="post.background.colorDeleted" description="Post Background DELETE" type="color" default="#ffffff" value="#1c1c1c"/>

Make sure the description on line 2 is not as same as description on line 1. I think that the description is a key for variables.

This variable is used for the class of post.outer





Change Font Size


Another change I would like to do is to enlarge text size of post.  This is very easy to do. Find "post-body" in HTML template



In my Programmer's blog, I could not find post-body. The size of text is defined in body class.


References




Read More...