0

I want my SharePoint page be customized like https://www.templatemonster.com/demo/45726.html which the content be in center when I use F12 developer tools I found that the name is container_12

<div class="container_12">
    <div class="row">
        <div class="grid_12">
            <h1><a href="index.html">WeatherChannel</a></h1>
            <div class="fright">
                <div class="clearfix">
                    <ul class="top_menu clearfix">
                        <li><a href="#">Sign In</a>|</li>
                        <li><a href="#">Join</a>|</li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                    <div class="temp clearfix"><a href="#" class="cels">C°</a><a href="#" class="far">F°</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid_12">
            <nav class="full-width">
                <ul class="sf-menu clearfix sf-js-enabled">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li class=""><a href="index-1.html">Weather guides<span>&nbsp;&nbsp;»</span></a>
                        <ul style="display: none;">
                            <li><a href="#">Daily Briefing</a></li>
                            <li><a href="#">Marine</a>
                            </li><li><a href="#">Climate</a>
                            </li><li><a href="#">Space Weather</a>
                            </li><li><a href="#">Fire Weather</a>
                            </li><li><a href="#">Aviation</a>
                            </li><li><a href="#">Tsunami</a>
                            </li><li><a href="#">Forecast Models</a>
                            </li><li><a href="#">Water</a>
                            </li><li><a href="#">GIS</a>
                            </li><li><a href="#">Storm Spotters</a>
                            </li><li><a href="#">Facts and Figures</a>
                       </li></ul>
                    </li>
                    <li><a href="index-2.html">World weather news</a></li>
                    <li><a href="index-3.html">Weather charts</a></li>
                    <li><a href="index-4.html">Footage</a></li>
                    <li><a href="index-5.html">Contacts</a></li>
                </ul>
            </nav>
            <div class="search-block">
                <form id="search1" class="search" action="search.php" method="GET">
                    <label for="s">Enter Location</label>
                    <input id="s" type="text" name="s" value="">
                    <a onclick="document.getElementById('search1').submit()" class="button1"></a>
                </form>
            </div>
        </div>
    </div>
    <div class="row slider-wrapper">
        <div class="grid_12">
            <div class="camera_wrap camera_emboss" id="camera_wrap_3" style="display: block; height: 329px; margin-bottom: 83px;"><div class="camera_fakehover"><div class="camera_src camerastarted">
                <div data-thumb="images/thumb-slide-1.jpg" data-src="images/slide-1.jpg" data-time="1500" data-trasperiod="4000" data-target="_blank">

                </div>
                <div data-thumb="images/thumb-slide-2.jpg" data-src="images/slide-2.jpg">

                </div>
                <div data-thumb="images/thumb-slide-3.jpg" data-src="images/slide-3.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">

                </div>
                <div data-thumb="images/thumb-slide-4.jpg" data-src="images/slide-4.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">

                <!-- </div> -->
                <div data-thumb="images/thumb-slide-5.jpg" data-src="images/slide-5.jpg" data-time="1500" data-trasperiod="4000" data-link="https://www.google.com/" data-target="_blank">

                </div>
            </div>
            <div class="camera_target"><div class="cameraCont"><div class="cameraSlide cameraSlide_0" style="visibility: visible; display: none; z-index: 1;"><img src="images/slide-1.jpg?1495971391724" class="imgLoaded" data-alignment="" data-portrait="" width="940" height="330" style="visibility: visible; height: 330px; margin-left: 0px; margin-top: 0px; position: absolute; width: 940px;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_1 cameracurrent" style="display: block; z-index: 999;"><img src="images/slide-2.jpg?1495971396450" class="imgLoaded" data-alignment="" data-portrait="" width="940" height="330" style="visibility: visible; height: 330px; margin-top: 0px; position: absolute; margin-left: 0px; width: 940px;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_2 cameranext" style="display: none; z-index: 1;"><img src="images/slide-3.jpg?1495971400444" class="imgLoaded" data-alignment="" data-portrait="" width="940" height="330" style="visibility: visible; height: 330px; margin-left: 0px; margin-top: 0px; position: absolute; width: 940px;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_3" style="display: none; z-index: 1;"><img src="images/slide-4.jpg?1495971410700" class="imgLoaded" style="visibility: visible; height: 330px; margin-left: 0px; margin-top: 0px; position: absolute; width: 940px;" data-alignment="" data-portrait="" width="940" height="330"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_4" style="display: none; z-index: 1;"><img src="images/slide-5.jpg?1495971413469" class="imgLoaded" style="visibility: visible; height: 330px; margin-top: 0px; position: absolute; margin-left: 0px; width: 940px;" data-alignment="" data-portrait="" width="940" height="330"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div><div class="cameraSlide cameraSlide_5 cameranext" style="z-index: 1; display: none;"><div class="camerarelative" style="width: 940px; height: 329px;"></div></div></div></div><div class="camera_target_content"><div class="cameraContents"><div class="cameraContent" style="display: none;"><div class="camera_caption fadeIn" style="visibility: hidden; opacity: 1;"><div>
                    <div class="slider-text">
                        <div class="inside">Vestibulum iaculis lacinia est proin. <a href="#">Read More</a>
                        </div>
                    </div>
                </div></div></div><div class="cameraContent cameracurrent" style="display: block;"><div class="camera_caption fadeIn" style="visibility: visible; opacity: 1;"><div>
                    <div class="slider-text">
                        <div class="inside">Reiciendis culpa a omnis. Voluptatem. <a href="#">Read More</a>
                        </div>
                    </div>
                </div></div></div><div class="cameraContent" style="display: none;"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style="visibility: hidden; opacity: 1;"><div>
                    <div class="slider-text">
                        <div class="inside">Laborum aliquid asperiores dicta aliquam. <a href="#">Read More</a>
                        </div>
                    </div>
                </div></div></div><div class="cameraContent" style="display: none;"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style="visibility: hidden; opacity: 1;"><div>
                    <div class="slider-text">
                        <div class="inside">Laudantium laboriosam adipisci. <a href="#">Read More</a>
                        </div>
                    </div>
                </div></div></div><div class="cameraContent" style="display: none;"><a class="camera_link" href="https://www.google.com/" target="_blank"></a><div class="camera_caption fadeIn" style="visibility: hidden; opacity: 1;"><div>
                    <div class="slider-text">
                        <div class="inside">Perspiciatis expedita nihil repellat non. <a href="#">Read More</a>
                        </div>
                    </div>
                </div></div></div></div></div><div class="camera_bar" style="display: none; top: auto; height: 7px;"><span class="camera_bar_cont" style="opacity: 0.8; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgb(34, 34, 34);"><span id="pie_0" style="opacity: 0.8; position: absolute; background-color: rgb(238, 238, 238); left: 0px; right: 0px; top: 2px; bottom: 2px; display: block;"></span></span></div><div class="camera_prev"><span></span></div><div class="camera_next"><span></span></div></div><div><div class="camera_thumbs"><div><div class="camera_command_wrap"><div class="camera_prevThumbs hideNav"><div></div></div><div class="camera_nextThumbs"><div></div></div><div class="camera_thumbs_cont" style="visibility: visible;"><div><ul style="width: 925px; margin-left: auto; margin-right: auto; margin-top: 0px;"><li class="pix_thumb pix_thumb_0 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-1.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_1 cameracurrent camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-2.jpg" class="camera_thumb" style="opacity: 1;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_2 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-3.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_3 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-4.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li><li class="pix_thumb pix_thumb_4 camera_visThumb"><span class="border-1-wrap"><img src="images/thumb-slide-5.jpg" class="camera_thumb" style="opacity: 0.7;"><span class="s-bord-1"></span><span class="s-bord-2"></span><span class="s-bord-3"></span><span class="s-bord-4"></span></span></li></ul></div></div></div></div></div></div><div class="camera_loader" style="display: block; visibility: visible;"></div></div>
        </div>
    </div>
</div> 

Where should I put this in my SharePoint?

1

You look like create a new page called layout.aspx and set it as Home Page.

Regarding your code it looks like you are using bootstrap.

To edit this page and add your code you have 2 options:

  1. Using Browser.
    • Open your page > Edit Page.
    • Add Script Editor web Part.
    • Add your code + the reference of bootstrap js and CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  1. Using SharePoint Designer.

    • Open SharePoint Designer.
    • Open your site http://portal/sites/kms/
    • Once the site is opened, you can edit your home page as shown below

enter image description here

  • From the above ribbon, > click on Advance Mode to can edit the file.
  • At the end of the page and before </Content> you can add your code.

An alternative way to edit your page.

  • From left navigation, > Click on Site Pages to show all your page.
  • Right click on your layout.aspx and select Edit File in Advanced Mode.
  • what is the class of sharepoint which I should edit and replace with my code – behnoush samiei May 29 '17 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.