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:
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)
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:
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:
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.
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.