Qur’an Tab in Microsoft Word
A comprehensive software to look for Ayahs and insert them in the Word documents using the elegant Hafs calligraphy
https://quranword.net/project/quran-word-en/
Sunday, March 29, 2020
Monday, August 16, 2010
Thursday, August 05, 2010
3 Column Blog Setting
Your template should now read something like this:-
Update:
We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-
-
Blog Posts in the Center
This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.
Add the portion in red above the div id='main wrapper'. The segment should look something like this:-
The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.
Blog Posts on the Left
If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-
Change Width of Header and Footer
You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-
and
Link : http://tips-for-new-bloggers.blogspot.com/2007/02/three-columns-blogger-template.html
#outer-wrapper { width: 750px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 400px; margin-left: 25px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 150px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #newsidebar-wrapper { width: 150px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } |
---|
Update:
We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-
-
/** Page structure tweaks for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } body#layout #outer-wrapper, body#layout #header-wrapper, body#layout #footer { width: 750px; padding: 0px; } body#layout #main-wrapper { width: 400px; margin-left: 20px; } body#layout #sidebar-wrapper, body#layout #newsidebar-wrapper { width: 150px; } |
---|
Blog Posts in the Center
This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div> |
---|
Add the portion in red above the div id='main wrapper'. The segment should look something like this:-
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div> |
---|
The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.
Blog Posts on the Left
If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div> |
---|
Change Width of Header and Footer
You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-
#header-wrapper { width:750px; |
---|
and
#footer { width:750px; |
---|
Link : http://tips-for-new-bloggers.blogspot.com/2007/02/three-columns-blogger-template.html
Wednesday, August 04, 2010
3 Column Liquid Layout (Percentage widths)
Percentage dimensions of the blog style layout
All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.
Maximum column content widths
To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:- 800 x 600
- Center & right columns: 162 pixels
- Left page: 357 pixels
- 1024 x 768
- Center & right columns: 210 pixels
- Left page: 459 pixels
The nested div structure
I've colour coded each div so it's easy to see:The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
Saturday, June 26, 2010
Subscribe to:
Posts (Atom)