How to Create a Totally Blank Start Webpage
A Warm Welcome


 
This site is - 568 Days Old
A Warm Welcome to Zan's Zone Guest
Please feel free to come and go as you please.
Please tell me if you see any mistakes in the skin so that I can fix it.
Feel free to add a link to your own board, blog or website in your signature.
The size of images added to signatures are restricted to avoid long scrolling passed them.
If you have made a post on your own board and you would like to post a link to it, Post it Here
Gab

Gab the new social media system - A cross between Facebook and Twitter.

Whatcha Up To?

My Time & Weather

Click for Bournemouth, United Kingdom Forecast

Worthwhile Charities

Share | 
 

 How to Create a Totally Blank Start Webpage

View previous topic View next topic Go down 
AuthorMessage
Zandranna
Owner
Owner
avatar

Name : Sandy
Location : Dorset
UK
Posts : 1343
Kudos : 127
Mood : More or less content
Birthday : 1st Nov

PostSubject: How to Create a Totally Blank Start Webpage   21/12/17, 12:12 pm

When you create a totally blank webpage it will be exactly that, a pure white page with absolutely nothing on it.  It picks up nothing of your board design whatsoever.   This means that you have to add your own html and css in order to design it.

To create a blank page....

Admin
Modules
Html and Javascript
Html Pages Management

Click to create a page choosing Modification via advanced mode (Html)

Do you wish to use your forum header and footer?  NO

Then add this code....

Code:
<!DOCTYPE html>
<html>
<head>
 
ALL OF YOUR HTML, TEXT AND IMAGES GO IN HERE

<style>
 ALL OF YOUR CSS GOES IN HERE
</style>
 
</head>
</html>

Once you save it or preview it part of the code will disappear to view and will look like this........

Code:

 
ALL OF YOUR HTML, TEXT AND IMAGES GO IN HERE

<style>
 ALL OF YOUR CSS GOES IN HERE
</style>
 

The part that disappears will not be affecting any html or css that you continue to add or change so don't worry about it.

To give you a for instance of how you can make a page look, here is the code I used to  design a page - You can see the page itself here - http://www.zandranna.com/h2-about-me

And the basic code I used was............

Code:
<!DOCTYPE html>
<html>
<head>

<div class="content-outer">
            
 <div class="heading">
       About Me        
 </div>
            
 <div class="content-inner">
<strong><span style="font-size: 24px;">Sandy Yates</span></strong><br />                                
 <div>
                                                        
 <hr class="styled-hr" style="width:100%;" />
                                                    
 </div>

HERE I PUT MY IMAGES AND TEXT
                
 <div class="border-bottom">
            
 </div>
            
 <div class="nav2">
            
 <ul>
              
 <li class="subnav2">
      <a target="_blank" href="http://twitter.com/sandyyatesuk/">My Twitter</a>      
 </li>
          
 <li class="subnav2">
      <a target="_blank" href="http://gab.ai/zandranna/">My Gab</a>      
 </li>
          
 <li class="subnav2">
      <a target="-blank" href="https://www.facebook.com/Zandranna">Facebook</a>      
 </li>
          
 <li class="subnav2">
      <a href="mailto:zandranna@gmail.com">Email Me</a>      
 </li>
          
 </ul>
          
 </div>
            
 </div>
</div>
  <style>
 body {background: #6A6187;}

.content-outer {background: #9F9FD6; border: 3px double #FFFFFF; width: 85%; valign: middle; align: center; margin: 40px auto; overflow: auto;}

.content-inner {background: #fff; border: 3px solid #6a6187; margin: 20px; overflow: hidden; padding: 20px;}

.border-bottom {background: #9F9FD6; height: 6px; margin-top: 20px; }

.heading { margin: 30px; font-size: 36px; color: #fff;}


.nav2 { display: block; }

.nav2:after { content: ""; display: block; clear: both; }

.nav2 ul { list-style: none; }

.nav2 li { float: left; margin-right: 12px; }

.nav2 li a {
   padding-right: 12px;
   display: block;
   text-decoration: underline;
   color: #502C3A;
}
</style>

</head>
</html>

I, for simplicity used content-outer and content-inner, but of course you can use the class of layers, thereby being able to create pretty borders (as many as you want) around your text.

I also added a menu at the bottom, but you could add a menu at the top with both text and images.

The sky is the limit with a blank html page and you aren't restricted by your board's basic html or css.

Please also check this site out for an easy way to create your basic text and images you want in the content of the page.  https://html-online.com/editor/
Back to top Go down
https://twitter.com/zandranna https://gab.ai/Zandranna
 
How to Create a Totally Blank Start Webpage
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Zan's Zone :: How Can I Help? :: Help for Board Owners :: Tips & Tricks-
Jump to: