CouchCMS Forum General Discussion
Forum for discussing general topics related to Couch.
7 posts Page 1 of 1
Post a reply
Previous Next

CSS Rules not being applied to the files in Snippets Folder

avatar
kajoe14
Registered User
Hei.

I successfully created clonable templates for my projects although i am experiencing problems with the project_list page. To be more specific, I am able to to preview the new projects in list view via a project_list.html (which I have placed in the snippets folder in couch) although the listed projects don't seem to be taking notice of the css rules already present. The other elements of the page respond to css rules though - ONLY THE DYNAMIC LISTED PROJECTS FAIL.

The static project_list.html is setup to display projects in a masonry layout view although upon configuring couch, the listed projects get displaced all over the page. I have tried to reset the css rules by trying to adjust the rules via console mode but when i edit the css files to match the new rules, a refresh (and in fact signing out of couch and re-booting the computer ) does not take notice of them. It is as though the template in the snippets folder does not respond to the css rules at all.

here is the project_list.html
Code: Select all
           <div class="portfolioContainer col-md-12  ui-sortable">
              <cms:pages masterpage='project.php' >
              <div class="grid-sizer"></div>             
              <div class="col-md-4 col-sm-4 portlets grid-item print">                
                <div class="panel">
                  <div class="panel-header ">
                    <h3><i class="icon-bulb"></i> <strong><a href="
                     <cms:show k_page_link />"><cms:show k_page_title /></a></h3>
                  </div>
                  <div class="panel-content">
                    <figure><img src="<cms:show thumb />" alt=""/></figure>                    
                  </div>
                </div>
                <div class="item-content"><cms:show project_brief /></div>                  
              </div>
              </cms:pages>                     
            </div>


Any assistance will be highly appreciated. Thanks

Re: CSS Rules not being applied to the files in Snippets Fol

User avatar
trendoman
Registered User
Hi kajoe14,

Actually, your posted code has seemingly nothing wrong at all :) So it must be something else.
Any file from the snippets folder is firstly injected into the main template which embeds this snippet. SO, it should be that any CSS rules applied to the main template must be followed by the html-code in that template (which our snippet is now part of).

Maybe if you attach your files I can take a look at it.
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: CSS Rules not being applied to the files in Snippets Fol

avatar
kajoe14
Registered User
Thanks for the quick response trendoman. :D

Here is the code:
Project.php
Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Projects' clonable='1'>
  <cms:editable name='thumb' width='375' crop='1' show_preview='1' preview_width='150' type='image' />
  <cms:editable name='project_brief' type='richtext' />
  <cms:editable name='slide_1' width='1326' height='760' crop='1' show_preview='1' preview_width='150' type='image' />
  <cms:editable name='slide_2' width='1326' height='760' crop='1' show_preview='1' preview_width='150' type='image' />
  <cms:editable name='slide_3' width='1326' height='760' crop='1' show_preview='1' preview_width='150' type='image' />
  <cms:editable name='slide_4' width='1326' height='760' crop='1' show_preview='1' preview_width='150' type='image' />
  <cms:editable name='client_info' type='richtext' />
  <cms:editable name='project_title' type='richtext' />
  <cms:editable name='project_info' type='richtext' />
</cms:template>
<cms:if k_is_page >
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>kajoe</title>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="assets/css/ui.css">
  <link rel="stylesheet" type="text/css" href="assets/css/flexslider.css" media="screen">
  <link rel="stylesheet" type="text/css" href="assets/css/EnlighterJS.min.css" media="screen">
  <script src="assets/plugins/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
  <!--[if IE]>
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=EmulateIE8; IE=EDGE" />
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/icons/font-awesome-ie7.min.css" />
  <![endif]-->
  </head>
  <body class="fixed-topbar fixed-sidebar">
    <section>
      <div class="sidebar">
        <div class="sidebar-inner">
          <ul class="nav nav-sidebar">
            <li class=" nav-active active"><a href="index.php"><i class="icon-home"></i><span>my Work</span></a></li>
            <li><a href="about.php"><i class="icon-user"></i><span>about Me</span></a></li>
            <li><a href="blog.php"><i class="icon-bulb"></i><span>my Views</span></a></li>
            <li><a href="contact.php"><i class="icon-call-in"></i><span>contact Me</span></a></li>
          </ul>
        </div>
        <div class="logopanel">
          <h1><a href="index.php" alt="kajoe logo"></a></h1>
        </div>
      </div>
      <div class="main-content">
        <div class="topbar">
          <div class="header-left">
            <div class="topnav">
              <a class="menutoggle" href="#" data-toggle="sidebar-collapsed">
                <span class="menu__handle" data-rel="tooltip" data-placement="bottom"
                 data-original-title="toggle Menu"><span>Menu</span></span>
              </a>
            </div>
          </div>
          <div class="header-right">
            <ul class="header-menu nav navbar-nav">
              <li class="dropdown" id="language-header">
                <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                  <i class="icon-globe"></i>
                  <span>Lang</span>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#" data-lang="en"><span>English</span></a></li>
                  <li><a href="#" data-lang="es"><span>Finnish</span></a></li>
                </ul>
              </li>
              <li id="social"><a href="#"><i class="fa fa-facebook "></i></a></li>
              <li id="social"><a href="#"><i class="fa fa-linkedin "></i></a></li>
              <li id="social"><a href="#"><i class="fa fa-dribbble "></i></a></li>
              <li class="dropdown" id="notifications-header">
                <a class="pull-left toggle_fullscreen" href="#" data-rel="tooltip" data-placement="bottom" data-original-title="Fullscreen">
                  <i class="icon-size-fullscreen"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="page-content page-thin">
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 portlets">
              <div class="panel">
                <div class="panel-content">
                  <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12 portlets">
                      <div class="flexslider">
                        <ul class="slides">
                          <li><img src="<cms:show slide_1 />" alt=" "/></li>
                          <li><img src="<cms:show slide_2 />" alt=""/></li>
                          <li><img src="<cms:show slide_3 />" alt=""/></li>
                          <li><img src="<cms:show slide_4 />" alt=""/></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3 col-sm-3 col-xs-3 portlets">
                      <h5>client Info</h5>
                      <p><cms:show client_info /></p>
                    </div>
                    <div class="col-md-9 col-sm-9 col-xs-9 portlets">
                      <h3><a href="index.php"><cms:show project_title /></a></h3>
                      <p><cms:show project_info /></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </section>
    <div id="quickview-sidebar">
      <div class="quickview-header">Quick Quote</div>
      <div class="quickview">
        <div class="tab-content">
           <!-- content -->
        </div>
      </div>
    </div>
    <div class="loader-overlay">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <a href="#" class="scrollup"><i class="fa fa-angle-up"></i></a>
    <!-- scripts -->
    <script src="assets/plugins/jquery/jquery-1.11.1.min.js"></script>
    <script src="assets/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui-1.11.2.min.js"></script>
    <script src="assets/js/masonry.min.js"></script>
    <script src="assets/plugins/isotope/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="assets/js/MooTools.min.js"></script>
    <script type="text/javascript" src="assets/js/EnlighterJS.min.js"></script
    <script src="assets/plugins/prettify/prettify.min.js"></script> 
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/js/jquery.flexslider.js"></script> 
    <!-- javascript -->
    <script>
      $(document).ready(function(){
        $('.flexslider').flexslider({
          animation: "fade",
          slideshowSpeed: 6000,
        });
      });
    </script>
  </body>
</html>
<cms:else />
  <cms:embed 'project_list.html' />
</cms:if>
<?php COUCH::invoke(); ?>


And the project_list.html

Code: Select all
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>kajoe</title>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="assets/css/ui.css">
  <link rel="stylesheet" type="text/css" href="assets/css/EnlighterJS.min.css" media="screen">
  <script src="assets/plugins/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
  <!--[if IE]>
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=EmulateIE8; IE=EDGE" />
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/icons/font-awesome-ie7.min.css" />
  <![endif]-->
  </head>
  <body class="fixed-topbar fixed-sidebar">
    <section>
      <div class="sidebar">
        <div class="sidebar-inner">
          <ul class="nav nav-sidebar">
            <li class=" nav-active active"><a href="index.php"><i class="icon-home"></i><span>my Work</span></a></li>
            <li><a href="about.php"><i class="icon-user"></i><span>about Me</span></a></li>
            <li><a href="blog.php"><i class="icon-bulb"></i><span>my Views</span></a></li>
            <li><a href="contact.php"><i class="icon-call-in"></i><span>contact Me</span></a></li>
          </ul>
        </div>
        <div class="logopanel">
          <h1><a href="index.php" alt="kajoe logo"></a></h1>
        </div>
      </div>
      <div class="main-content">
        <div class="topbar">
          <div class="header-left">
            <div class="topnav">
              <a class="menutoggle" href="#" data-toggle="sidebar-collapsed">
                <span class="menu__handle" data-rel="tooltip" data-placement="bottom"
                 data-original-title="toggle Menu"><span>Menu</span></span>
              </a>
            </div>
          </div>
          <div class="header-right">
            <ul class="header-menu nav navbar-nav">
              <li class="dropdown" id="language-header">
                <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                  <i class="icon-globe"></i>
                  <span>Lang</span>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#" data-lang="en"><span>English</span></a></li>
                  <li><a href="#" data-lang="es"><span>Finnish</span></a></li>
                </ul>
              </li>
              <li id="social"><a href="#"><i class="fa fa-facebook "></i></a></li>
              <li id="social"><a href="#"><i class="fa fa-linkedin "></i></a></li>
              <li id="social"><a href="#"><i class="fa fa-dribbble "></i></a></li>
              <li class="dropdown" id="notifications-header">
                <a class="pull-left toggle_fullscreen" href="#" data-rel="tooltip" data-placement="bottom" data-original-title="Fullscreen">
                  <i class="icon-size-fullscreen"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="page-content page-thin">
          <div class="row grid">
            <div class="portfolioFilter">
              <a href="#" data-filter="*" class="current">all</a>
              <a href="#" data-filter=".print">print</a>
              <a href="#" data-filter=".web">websites</a>
            </div>
            <div class="portfolioContainer col-md-12 col-sm-12 portlets ui-sortable">
              <cms:pages masterpage='project.php' >
              <div class="grid-sizer"></div>             
              <div class="col-md-4 col-sm-4 portlets grid-item print">                
                <div class="panel">
                  <div class="panel-header ">
                    <h3><i class="icon-bulb"></i> <strong><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h3>
                  </div>
                  <div class="panel-content">
                    <figure><img src="<cms:show thumb />" alt="9"/></figure>                    
                  </div>
                </div>
                <div class="item-content"><cms:show project_brief /></div>                  
              </div>
              </cms:pages>                     
            </div>
          </div>
        </div>
      </div>
    </section>
    <div id="quickview-sidebar">
      <div class="quickview-header">Quick Quote</div>
      <div class="quickview">
        <div class="tab-content">

        </div>
      </div>
    </div>
    <div class="loader-overlay">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <a href="#" class="scrollup"><i class="fa fa-angle-up"></i></a>
    <!-- scripts -->
    <script src="assets/plugins/jquery/jquery-1.11.1.min.js"></script>
    <script src="assets/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui-1.11.2.min.js"></script>
    <script src="assets/plugins/gsap/main-gsap.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/jquery-cookies/jquery.cookies.min.js"></script>
    <script src="assets/plugins/jquery-block-ui/jquery.blockUI.min.js"></script> 
    <script src="assets/plugins/translate/jqueryTranslator.min.js"></script> 
    <script src="assets/plugins/mcustom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script> 
    <script src="assets/plugins/bootstrap-dropdown/bootstrap-hover-dropdown.min.js"></script>
    <script src="assets/plugins/retina/retina.min.js"></script> 
    <script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script> 
    <script src="assets/js/application.js"></script> 
    <script src="assets/js/plugins.js"></script> 
    <script src="assets/plugins/noty/jquery.noty.packaged.min.js"></script>  
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/masonry.min.js"></script>
    <script src="assets/plugins/isotope/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="assets/js/MooTools.min.js"></script>
    <script type="text/javascript" src="assets/js/EnlighterJS.min.js"></script
    <!-- javascript -->
    <script>
      $(window).load(function(){
          var $container = $('.portfolioContainer');
          $container.isotope();
          $('.portfolioFilter a').click(function(){
              $('.portfolioFilter .current').removeClass('current');
              $(this).addClass('current');
              var selector = $(this).attr('data-filter');
              $container.isotope({
                  filter: selector
               });
               return false;
          }); 
      });
    </script>
  </body>
</html>


I know that the code is massive and the css is even greater thus i will only attach few rules that are relative to the project_list.html :D

Code: Select all
 
.page-content .portfolioContainer {
  list-style: none;
  margin-left: -10px;
  margin: 0;
  padding: 5px 0 0 0;
  width: 100%;
}
.page-content .portfolioContainer p {
  color: #232323;
}
.portfolioContainer figure {
  background: #ffffff;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
.portfolioContainer figure img {
  display: block;
  min-height: 100%;
  opacity: .8;
  position: relative;
}
.grid-item, .grid-sizer{
  width: 33.33333333%;
  }
@media screen and (max-width: 768px) {
  .grid-item, .grid-sizer{
  width: 50%;
  }
}


Again, thanks for all assistance.

Re: CSS Rules not being applied to the files in Snippets Fol

avatar
kajoe14
Registered User
I may have been able to work through the solution. As you may have said earlier (@trendoman) the code was working fine :D though for some weird reason the files(project_list.html and stylesheets) were not being directly targeted upon every edit i was making.

This was apparent as each time i viewed the source code, the css rules would always look un-changed. I am working on my localhost via the Portable couch framework.

I have to constantly initiate the start.bat and stop.bat after every edit. Kinda tedious, though it seems to work. :D

Again, @trendoman, thank you!

Re: CSS Rules not being applied to the files in Snippets Fol

User avatar
trendoman
Registered User
kajoe14 wrote: I may have been able to work through the solution. As you may have said earlier (@trendoman) the code was working fine :D though for some weird reason the files(project_list.html and stylesheets) were not being directly targeted upon every edit i was making.

This was apparent as each time i viewed the source code, the css rules would always look un-changed. I am working on my localhost via the Portable couch framework.

I have to constantly initiate the start.bat and stop.bat after every edit. Kinda tedious, though it seems to work. :D

Again, @trendoman, thank you!


So it is solved completely? Great!

Btw, if you need a solid localhost environment on Windows, I can recommend OpenServer. Hassle-free portable combo.

A suggestion for you: for pretty-urls it is advisable to code links with tag cms:link. It will help and save you time.
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: CSS Rules not being applied to the files in Snippets Fol

avatar
kajoe14
Registered User
@trendoman Yes i was able to solve the problems. :D

Though i cannot understand why i still keep getting problems with edits i make to the css files. To be more precise, if i for example change the width of a div to maybe 25% from 50%, the changes do not sometimes reflect into the pages immediately. I realized that was the problem initially as when i viewed the source code via a browser, the width would still read 50%. Well, after constant initiation of the server, the changes eventually take effect (un explain-ably, though).

I guess i will try out openserver instead.

Again, thanks trendoman.

Re: CSS Rules not being applied to the files in Snippets Fol

User avatar
trendoman
Registered User
This is a good opportunity to know more about caching in Couch. Sometimes when refresh in browser doesn't help, it might be due to enabled caching in config.php :) A great introduction can be found here viewtopic.php?f=8&t=10164
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate
Post a reply
Previous Next
7 posts Page 1 of 1
Return to General Discussion