Login | Register | FAQ
Anonymous

Foundation

+ Post a reply

3 posts Page 1 of 1


Foundation

by nepalithito » Wed Oct 19, 2016 3:03 am

Hi,

After applying Foundation 5 to make responsive menu in my site. Background color changed to white and page should look like this screenshot but it looks different.Image

Here is my css code
Code: Select all
@charset "utf-8";
body {
   margin: 0px;
   padding: 0px;
   background:url(images/bg.png);
}
.container
{
   width:890px;
   margin:auto;
}
.logo
{
   padding:50px 0px;
   font:bold 14px/50px Arial, Helvetica, sans-serif;
   color:#fff;
   display: inline;
}

.logo a:link, .logo a:visited, .logo a:active, .logo a:hover
{
   font:bold 34px/50px Arial, Helvetica, sans-serif;
   color:#858585;
   letter-spacing:-3.5px;
   text-decoration:none;
   padding-right:20px;
}
.navigation ul
{
   padding:0px;
   margin:0px;
   list-style:none;
   background:#060606;
   height:45px;
}
.navigation li
{
   padding:0px;
   margin:0px;
   list-style:none;
   float:left;
}
.navigation li a
{
   padding:10px 25px;
   background:#060606;
   display:block;
   font:18px Arial, Helvetica, sans-serif;
   color:#858585;
   text-decoration:none;
}
.navigation li a:hover
{
   color:#fff;
   background:#000;
}
.headerimage
{
   border-bottom:solid 3px #060606;
   padding-bottom:4px;
}
.left-panel
{
   width:100%;
   float:left;
   position: relative;
}
.right-panel
{
   width:235px;
   float:right;
   position: relative
   padding-left:45px;
   
}
.left-panel h2
{
   font:bold 34px/50px Arial, Helvetica, sans-serif;
   color:#858585;
   background:#060606;
   letter-spacing:-3.5px;
   padding:10px;
   margin:0px;
   display:inline;
}
.left-panel p,
.sohotext, .article_table
{
   font:13px/17.5px Arial, Helvetica, sans-serif;
   color:#858585;
}
.main-container
{
   padding-top:40px;
}
.clear
{
   clear:both;
}
.right-panel
{
   font:14px Arial, Helvetica, sans-serif;
   color:#c7d8ef;
}
.right-panel ul
{
   padding:0px;
   margin:0px;
   list-style:none;
}
.right-panel li
{
   background:#060606;
   color:#c7d8ef;
   padding:10px;
   font:23px Arial, Helvetica, sans-serif;
   margin-bottom:4px;
}
.footer
{
   padding-top:30px;
}
.footer p
{
   font:18px Arial, Helvetica, sans-serif;
   color:#3b3b3b;
   background:#060606;
   display:inline;
   padding:10px;
}

a:link {color: #1A5194; text-decoration: underline;}
a:visited {color: #1A5194; text-decoration: underline;}
a:active {color: #1A5194; text-decoration: underline;}
a:hover {color: #A5C6E6; text-decoration: none;}

.boxReadMore1 a:link {color: #1A5194; text-decoration: underline;}
.boxReadMore1 a:visited {color: #1A5194; text-decoration: underline;}
.boxReadMore1 a:active {color: #A5C6E6; text-decoration: underline;}
.boxReadMore1 a:hover {color: #A5C6E6; text-decoration: none !important;}



.navigation ul li{
   position:relative;
}
.navigation ul ul{
   text-align:left;
   margin:0px;
   padding:0px;
   border:0px;   
   list-style:none;
   background:transparent;
}
.navigation ul ul li
{
   padding:0px;
   margin:0px;
}
.navigation li ul, .navigation li a ul{
   visibility:hidden;
   position:absolute;
   top:30px;
   left:0px;
   z-index:1000;
   margin:0px;
   padding:0px;
}
.navigation li ul a{
   display:block;
   color:#fff;
   padding:10px;
   margin:0px;
   height:auto;
   border:none;
   line-height:10px;
   width:150px;
   background:#000;
}
.navigation li:hover ul, #top-menu li a:hover ul{
   display:block;
   visibility:visible;
   
}
.navigation li li a:hover{   
   display:block;
   color:#fff;
   padding:10px;
   margin:0px;
   height:auto;
   border:none;
   line-height:10px;
   width:150px;
   color:#3d3c63;
   background:#fff;
}

div.entry, .entry p {
   color:#E2E2E2!important;
}

#content-parent {
   color:#C0C0C0;
}

.FormLt1 {
font-family : Arial;
font-size : 8pt;
cursor: hand;
color: #ffffff;
}


Here is my site after Foundation 5 Application http://www.kalseeecolodge.com
User avatar

nepalithito

  • Posts: 95
  • Joined: Thu Mar 01, 2012 10:10 am

Re: Foundation

by nanoverso » Thu Oct 20, 2016 10:37 pm

Please post the screenshot image again.
User avatar

nanoverso

  • Posts: 253
  • Joined: Sat May 10, 2014 12:08 am
  • Location: Brazil
--
Mario Blog (Portuguese): https://jogosdomariosuperbros.blogspot.com

Re: Foundation

by nepalithito » Sat Oct 22, 2016 3:48 am

nanoverso wrote:Please post the screenshot image again.


http://www.kalseeecolodge.com/image.png

Here is design code

Code: Select all
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Untitled Document</title>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-65308026-1', 'auto');
  ga('send', 'pageview');

</script>

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZ4JL9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PZ4JL9');</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" type="text/css" href="http://www.kalseeecolodge.com/sohoadmin/program/modules/site_templates/pages/SOHOLAUNCH_Dark-clean/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/SOHOLAUNCH_Dark-clean/custom.css" />
<link rel="stylesheet" href="http://www.kalseeecolodge.com/lightbox/css/lightbox.css" />
<script src="http://www.kalseeecolodge.com/sohoadmin/program/modules/site_templates/pages/SOHOLAUNCH_Dark-clean/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="container">

<div class="header">
<div class="logo"><a href="#SOHO-DOMAIN#">#LOGOIMG#</a>#SLOGAN#</div>
</div>

<div class="navigation">
<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true" role="primary">
  <ul class="title-area">
    <li class="name">
      <h1></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
  <div class="nav-bar">#HMAINS#</div><!--This is where we added hmains instead of the list items-->     
  </section>
</nav>  <!--End of navigation structure-->
</div></div>

<div class="main-container">

<div class="left-panel">
#CONTENT#</div>

<div class="right-panel">
#BOX1#</div>
<div class="clear"></div>
</div>

<div class="footer">
<p>#COPYRIGHT#</p>
</div>

</div>   
<script src="http://www.kalseeecolodge.com/lightbox/js/jquery-1.11.3.min.js"></script>
<script src="http://www.kalseeecolodge.com/lightbox/js/lightbox.js"></script>
<script>
(Function () {
    var bp = document.createElement ('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName ("script") [0];
    s.parentNode.insertBefore (bp, s);
}) ();
</script>
<script>$('.has-sub').click( function(e) {
e.preventDefault();
$(this).parent().toggleClass('tap');
});</script>
<script>
        /* Remove the slogan div cleanly if it's not in use */
        $(function () {
            if ($(".slogan").html().length === 0) {
                $(".slogan").remove();
            }
            /* Expand the content area out if the sidebar isn't in use */
            if (!$("#box-one").text().trim().length) {
                $(".middle").addClass("large-12").removeClass("large-8");
                $(".box").remove();
            }
        });
    </script>
<script src="http://www.kalseeecolodge.com/sohoadmin/program/modules/site_templates/pages/SOHOLAUNCH_Dark-clean/js/foundation.min.js"></script>
<script>
        $(document).foundation();
    </script>           
</body>
</html>
User avatar

nepalithito

  • Posts: 95
  • Joined: Thu Mar 01, 2012 10:10 am


+ Post a reply

Page 1 of 1