Jump to content

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


Roych
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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'
	);

 

  • Like 8
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 7
Link to comment
Share on other sites

  • 5 months later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 6 months later...

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".

  • Like 1
Link to comment
Share on other sites

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);
}
?>

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...