Change css and images through admin (custom admin page)?

[Roych]

Hello, 

Im having some problem figuring how to do some custom settings for my site. I'd like to create settings page in my admin for changing some css and some images that are now fetched from css. Do I have to delete code from css and add it to template file like..

from this (css file):

body{
	background:#3d5e93 url(../img/background/1.jpg) no-repeat;
}

to this (template file):

<style>
 body {
  background:<?=$page->bgcolor-field ?> url(<?=$page->bgimage-field ?>) no-repeat;
  }
</style>  

  

or is there a way to do this the easyer way. Or maybe fetch this directly from css, or ...?  How and where axactly do I put those custom fields for those settings.

Hope u understand what I mean.

Thank you

R

 

[BitPoet]

If it's one page meant to be used site-wide, you might consider creating a template file (let's say styles.php) for it that outputs the css (in the Files tab, set content-type to text/css and tick the box to not append the standard file). Then you can link to that page just like you do with every other stylesheet, and you can even use template cache. That way, your regular templates are kept tidy and you don't send unnecessary styles over the wire with each request.

To be able to select the text/css content type, you need to add the following to your site/config.php first:

$config->contentTypes = array(
	'html' => 'text/html',
	'txt' => 'text/plain', 
	'json' => 'application/json',
	'xml' => 'application/xml', 
	'css' => 'text/css'
	);

 

[Roych]

hello, thank you for answer,  not sure what you mean by this ...

4 hours ago, BitPoet said:

Then you can link to that page just like you do with every other stylesheet, and you can even use template cache.

 

I'we created a template (style.php) selected text/css in file tab and thicked the append and prepend file. What now, what to do with this template. Do I give it some fields for styles like background image, colors, etc or ... Not sure what to do with it.  And how do I connect css to it. Not sure I understand completely.

I'm new to PW. Thank you

R

[BitPoet]

Yes, add fields for all the settings you need (e.g. with @Soma's ColorPicker module). Then add the styles inside style.php like you quoted above.

body {
  background:<?=$page->bgcolor-field ?> url(<?=$page->bgimage-field ?>) no-repeat;
}
/* ...any other styles, with or without PHP code */

Then, in your regular template file, include the CSS settings page.

<link rel="stylesheet" href="<?= $pages->get('/your/css/page/')->url ?>">

Basically, you've now created a separate PHP file for all the CSS so you don't have parts in a regular stylesheet and others in your template file.

Once everything works, you can go into the style template's settings and switch on caching. Enter a cache time (like 86400 to regenerate the CSS only once a day) and you have performance close to a flat file stylesheet.

[Roych]

Got it working  It works perfect!

Great way to create custom settings for the whole site.

Thank you very much

R

[Roych]

Hello,

Im having some problems with repeater in settings page, I tried with this it get's me an error.

<?php foreach($pages->get("/settings/")->$social_footer as $social): ?>
	<li><a href="<?=$social->link-url?>"><i class="fa fa-<?=$social->icon_pick?>"></i><?=$social->title?></a></li>
<?php endforeach; ?>

I'm using upper method for settings page, all other fields working great!

What am I doing wrong here?

Thank you

R

[Roych]

I got it, here is the code if somebody is going to need it.

<?php $siteSettings = $pages->get("/settings/");
	foreach($siteSettings->social_footer as $block) : ?>
       <li><a href="<?=$block->link?>" target="_blank"><?=$block->title?><i class="<?=$block->icon_pick?>"></i> </a></li>
<?php endforeach;?>

R

[pwired]

I am glad that I found this thread. BitPoet´s examples of how to use a page for css is working really great. It let´s me change specific css attributes on the fly on any template file. Also another great example of Processwire's flexibility with "everything is a page".

[Roych]

Yep, still using it on some sites and works great. ? love PW ...

[elabx]

Something I've done that is quite useful is setup a Less parsing library like this one that accepts variables and then I pass the variables on to the rendering pipeline, this keeps my styles files clean from php code:

Pardon the dirty code: 

<?php
$variables = array( 'main-color' => $home->main_color ,
                    'body-background' => $home->color_main_background,
                    'icon-colors' => $home->color_icons,
                    'menu-icon-color' => $home->color_menu,
                    'footer-gradient' => $home->color_footer_gradient,
                    'go-top-gradient' => $home->color_got_top_gradient,
                    'slide-background-color'=> $home->color_slides_background,
                    'slide-hover-background-color'=> $home->color_slides_hover_background,
                    'h2-titles-color'=> $home->color_h2,
                    'headings-font'=> $home->headings_font,
                    'footer-background' => $home->color_footer_background
);
		
		
//Set up main file path and directory of imports.
		
$less_files = array(
    $mainCssFile => $config->paths->templates . 'css/'
);
		
$options = array( 'cache_dir' => $config->paths->assets . 'cache/less/',
                  'output' => $config->paths->templates. 'css/build.css',
                  'relativeUrls' => false,
                  "strictMath" => "on");
		
try{ 
    $css_file_name = Less_Cache::Get( $less_files, $options, $variables);
}catch(Exception $e){
    $log->save("less", $e);
}
?>