Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
5 posts Page 1 of 1
Hi Peeps.

I'm only about 20 minutes into toying with this on a dev site, but I'm setting up a theme.php which allows the "client" to adjust some CSS / create a few overrides to the base CSS. I know that couch is amazing at empowering designers / front end folk to fit a CMS easily, but I'm from a dev background so I am toying with it to set things up that might be potentially useful for myself, clients and anyone else in the forums.

It's relatively simple, create a theme.php like this:

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template name='theme_settings' title='Theme Settings' executable='0' hidden='1'>

<cms:editable name='status' label='Status' desc='Enable or Diaable Theme Override to apply custom styling EXPERTS ONLY' type='radio' opt_values='disabled | enabled' />


<cms:editable name='body_background_color' label='Body Background Color' desc='Enter the hex value including #' type='text' />

<cms:editable name='google_fonts' label='Google Fonts Link' desc='Paste URL only i.e. http://fonts.googleapis.com/css?family=Roboto+Condensed|Quattrocento+Sans' type='text' />

<cms:editable name='heading_font_family' label='Heading Font Family' desc='Family names only from Google Fonts' type='text' />


<cms:editable name='color' label='Navbar Start Color' desc='Click to see picker' type='text' order='1' />
<cms:editable name='color_2' label='Navbar End Color' desc='Click to see picker' type='text' order='2' />
<cms:editable name='color_3' label='Navbar Font Color' desc='Click to see picker' type='text' order='3' />

<cms:editable name='color_picker' type='message' order='4' >
<script type="text/javascript" src="addons/jscolor/jscolor.js"></script>
<script type="text/javascript">
new jscolor.color(document.getElementById('f_color'), {});
new jscolor.color(document.getElementById('f_color_2'), {});
new jscolor.color(document.getElementById('f_color_3'), {});
</script>
</cms:editable>


</cms:template>

<?php COUCH::invoke(); ?>


then I've create a snippet file called "theme.css" as per below (the declarations are all Twitter Bootstrap orientated but you can do what you want)

Code: Select all
<cms:pages masterpage='theme.php'>
<cms:if status == 'enabled'>


<style type="text/css">

body {
   background-color: <cms:show body_background_color />;
}

h1, h2, h3, h4, h5, h6 {
   font-family: <cms:show heading_font_family />;
}

#mainNav .navbar-inner {
   background-color: <cms:show color_2 />; /* fallback color, place your own */
   background-image: -moz-linear-gradient(top, <cms:show color />, <cms:show color_2 />);
   background-image: -ms-linear-gradient(top, <cms:show color />, <cms:show color_2 />);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(<cms:show color />), to(<cms:show color_2 />));
   background-image: -webkit-linear-gradient(top, <cms:show color />, <cms:show color_2 />);
   background-image: -o-linear-gradient(top, #<cms:show color />, <cms:show color_2 />);
   background-image: linear-gradient(top, #<cms:show color />, <cms:show color_2 />);
   background-repeat: repeat-x;
   color: <cms:show color_3 />;
}

#mainNav .navbar .nav > li > a {
    color: <cms:show color_3 />;
   <cms:if "<cms:get_custom_field 'color_3' masterpage='theme.php' />">
   text-shadow: none;
   </cms:if>   
}

#mainNav .navbar .nav > li.active > a, #mainNav .navbar .nav > li > a.dropdown-toggle:active {
   background:<cms:show color />;
   background: -webkit-gradient(linear, left top, left bottom, from(<cms:show color_2 />), to(<cms:show color />));
   background: -moz-linear-gradient(top,  <cms:show color_2 />,  <cms:show color />);
   color: #47a1d9;
}

#mainNav .navbar .nav li.dropdown.open > .dropdown-toggle, #mainNav .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
   background:<cms:show color_2 />;
   background: -webkit-gradient(linear, left top, left bottom, from(#<cms:show color_2 />), to(#<cms:show color />));
   background: -moz-linear-gradient(top,  #<cms:show color_2 />,  <cms:show color />);
   color: <cms:show color_3 />;
}

#mainNav .navbar .nav > li > a .caret {
    color: <cms:show color_3 />;
   <cms:if "<cms:get_custom_field 'color_3' masterpage='theme.php' />">
    border-bottom-color: <cms:show color_3 />;
    border-top-color: <cms:show color_3 />;
   </cms:if>
}


.navbar .brand {
   <cms:if "<cms:get_custom_field 'color_3' masterpage='theme.php' />">
    color: <cms:show color_3 />;
   text-shadow: none;
   </cms:if>
}

</style>

</cms:if>

</cms:pages>



It's a bit rough at the moment as I am just coding away at it and tidying up as I go, but it's a good starter for anyone who might want to over css customisation to a client - i.e. change background image tile for seasonal themes etc.

Refinements:

My header.inc currently looks like this:

<link href="assets/css/style.css" rel="stylesheet">
<!--CUSTOM THEME OPTIONS-->
<cms:embed 'club.css' />
<!--THEME ENDS-->

<cms:if "<cms:get_custom_field 'google_fonts' masterpage='theme.php' />">
<link href="<cms:get_custom_field 'google_fonts' masterpage='theme.php' />" rel="stylesheet" type="text/css" />
</cms:if>


I think injecting in the Styles is a bit dirty so I'd like to drop this and instead use a conditional check on theme.php so that if the status is "enabled" it loads a reference to the stylesheet - that said, in doing so I reveal the admin folder path, as my understanding is it will render like:

Code: Select all
<link href="couch/snippets/theme.css" rel="stylesheet">


Which I suppose is revealed anyway with image paths so maybe I am worrying about nothing and been pedantic.

Secondly, I have the two fold templates at the moment, I suppose I could use theme.php to output directly / embed negating the requirement of my snippet theme.css file - for the moment I like it setup like that to separate templates in the root from the logical path of embed/include files.

Anyhow, I will be continuing on this Theme Editor over the weekend, as I say it's very Bootstrap orientated but once I tidy a few things I'll post it again to those who might want to use it to base their own versions on or use if fit for purpose.
Hi Patrick,

There is one more way of outputting CSS styling conditionally. Probably, you are already aware of this method but I'll, nevertheless, mention it here for reference sake.

And that method is - You can convert the .css file itself into a Couch managed template.

For example, if the site has a stylesheet named styles.css, rename it to styles.php, place the require_once and invoke statements to turn it into a bonafide Couch managed template.

Make sure to place the following statement just below the require_once (this step is vital for this technique)
Code: Select all
<cms:content_type 'text/css' />


You can now link all files to styles.php instead of styles.css. e.g.
<link rel="stylesheet" href="http://www.yoursite.com/css/styles.php" type="text/css" />

Since this CSS file is actually a Couch template, you can place right into it all the editable regions definitions and the conditional logic.

EDIT: To make the browsers always get the latest version of this 'styles.php', we can add the following to the link:
<link rel="stylesheet" href="http://www.yoursite.com/css/styles.php?v=<cms:show k_page_modification_date />" type="text/css" />

This way, anytime you edit the CSS (in admin-panel now), the version number changes and the clients now request this new version automatically.
Patrick, you mentioned in your post -
..that said, in doing so I reveal the admin folder path.. Which I suppose is revealed anyway with image paths

It doesn't necessarily be so.
The config.php has settings for you to set your own folders for both 'uploads' and 'snippets'
// 12.
// Upload folder if not using the default upload folder within 'couch'.
// Should be relative to your site (don't forget to set write permissions on it).
// No leading or trailing slashes please.
//define( 'K_UPLOAD_DIR', 'myuploads' );

// 12b.
// Folder containing the embedded snippets if not using the default 'snippets' folder within 'couch'.
// Should be relative to your site. No leading or trailing slashes please.
//define( 'K_SNIPPETS_DIR', 'mysnippets' );

Finally, you can (or should) protect your admin folder by using the technique outlined here:
http://www.couchcms.com/docs/miscellane ... panel.html
Hi KK,

That's a real nice approach - much cleaner than mine, I think I will modify my methods to be more inline with your outlined ones - however I will only be using it for a theme override, I want to separate my base CSS from editable aesthetics like colors and typography.

Thanks for the Uploads and Snippets Tip - I plan to modify all that and tighten up security once development is completed and the site goes live.
Very interesting topic, it might be worth to add this to the documentation of couch?
5 posts Page 1 of 1
cron