Hello, everyone.

I would like to offer my users different themes, which are also used permanently and the user does not have to change it with every visit.
So that every user can choose when registering or later, if he wants to.
But I don't want to create 10 or more themes, but only use one but different css.
Does anyone have an idea of how to do this, or has someone already done it and would provide me with the information.

Many thanks in advance

Hi Olaf,

You would need to create a template selector for that.

One was going to be made many years ago, I don't know if it ever got finished.

Hi Pharg,

thanks for the info.
What exactly do I have to pay attention to, what exactly do I have to do there. That's not my strong suit.

Hi Olaf,

I am not sure, maybe someone on here knows.

Should be pretty easy to do.

If you can just provide the following info i'll see what i can do.

1) Which template do you use?
2) Rough idea of the color options you want to offer (used for validation and for presetting some info for you)


Thanks.

Hello,

Thank you for your answer.

I'm using your theme, OsDMix.
The colour combinations result from the colours of the football clubs.

among others Black white red
Yellow and black
etc.

Create a new column in your database on the user table:

ALTER TABLE `osdate_user` ADD `style` VARCHAR(10) NOT NULL DEFAULT '' AFTER `level`;

Then in ROOT > includes > internal > Functions.php add these 3 functions:

I've preset some available options based on osDMix so you will need to adjust them to your needs. The default option should be left empty as a fallback.

function setStyle($user_id=0,$style=''){

if($user_id > 0) {

global $osDB;

switch ($style) {

// will use style_blue.css
case 'blue':
$style_selected='blue';
break;

// will use style_green.css
case 'green':
$style_selected='green';
break;


// Copy & Paste the custom case for each of your options, replacing the word "custom" with your new style name
// will use style_custom.css
case 'custom':
$style_selected='custom';
break;


// Default empty (will use the main style.css file)
default:
$style_selected='';
break;

}

if(!empty($style_selected)){
$style_selected='_'.$style_selected;
}

$osDB->query('UPDATE ! SET style = ? WHERE id = ?', array(USER_TABLE, $style_selected, $user_id));
$_SESSION['site_style']=$style_selected;

}

return true;

}


function getStyle(){
global $osDB,$config;

$return='';

if(isset($_SESSION['site_style'])){
$return=$_SESSION['site_style'];
}else{
if(isset($_SESSION['UserId']) && $_SESSION['UserId'] > 0){
$return=$osDB->getOne('SELECT style FROM ! WHERE id = ?', array(USER_TABLE, $_SESSION['UserId']));
if($return && !empty($return)){
$_SESSION['site_style']=$return;
}
}
}


if(!is_file(FULL_PATH.'templates/'.$config['skin_name'].'/css/style'.$return.'.css')){
$return='';
}

return $return;
}

function styleLink($base=''){

$empty='?';

if(!empty($base)){
$arr=explode('&',$base);
if(!empty($arr)){
foreach($arr as $x => $v){
if(strpos($v,'style') !== FALSE){
unset($arr[$x]);
}
}
}
$str=implode('&',$arr);

if(strpos($str,'?') !== FALSE){
$str=$str.'&';
}else{
$str=$str.'?';
}

return $str;
}else{
return $empty;
}
}




Then in ROOT > init.php add: (around line 280)

if (isset($_GET['style']) && $_GET['style'] != '') {
if(isset($_SESSION['UserId']) && $_SESSION['UserId'] > 0){
setStyle($_SESSION['UserId'],$_GET['style']);
}
}

$t->assign ('site_style',getStyle());

$style_uri=(((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']=='on') ? 'https://' : 'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$t->assign ('style_link',styleLink($style_uri));



Now, in ROOT > index.php around line 344


FIND THIS LINE

if ( strlen( $_SERVER['QUERY_STRING'] ) <= 0 or $_SERVER['QUERY_STRING'] == 'affid='.$affid || $_SERVER['QUERY_STRING'] == 'lang='.$getlang or(( $errid == NOT_YET_APPROVED or $errid == NOT_ACTIVE ) && (isset($_SESSION['UserId']) && $_SESSION['UserId'] > 0) ) ){

AND CHANGE IT TO
$getstyle = isset($_GET['style'])?$_GET['style']:'';

if ( strlen( $_SERVER['QUERY_STRING'] ) <= 0 or $_SERVER['QUERY_STRING'] == 'affid='.$affid || $_SERVER['QUERY_STRING'] == 'lang='.$getlang || $_SERVER['QUERY_STRING'] == 'style='.$getstyle or(( $errid == NOT_YET_APPROVED or $errid == NOT_ACTIVE ) && (isset($_SESSION['UserId']) && $_SESSION['UserId'] > 0) ) ){




Now, in your template file (index_header.tpl) edit the stylesheet request to include the {$site_style} tag.


<link href="{$css_path}css/style{$site_style}.css" rel="stylesheet">



Now, foreach of your style options copy osDMix main style.css file and rename them style_custom.css (changing custom for your new name).


Now, create a new css file in the css folder called stylepicker.css and add the following in it:

.style_picker {
text-align: center;
}
.style_picker .blue a i{
color: #2196F3;
}
.style_picker .green a i{
color: #263130;
}
repeating the following for each color option so you make each one unique: (replacing custom with your option)
.style_picker .custom a i{
color: #263130;
}
Now, in your template file (index_header.tpl) add the stylesheet request.

<link href="{$css_path}css/stylepicker.css" rel="stylesheet">

Now, in your template file (index.tpl) add the following.

<div class="modal fade" id="selectStyle" tabindex="-1" role="dialog" aria-labelledby="selectStyleLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
Select Color Style <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body clearfix">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<ul class="list-group style_picker">
<li class="list-group-item blue">
<a href="{$style_link}style=blue" title="Blue"> <i class="fa fa-square" aria-hidden="true"></i> Team Blue</a>
</li>
<li class="list-group-item green">
<a href="{$style_link}style=green" title="Green"> <i class="fa fa-square" aria-hidden="true"></i> Team Green</a>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<div class="text-center">
<a href="{$style_link}style=xx" class="btn btn-danger"><i class="fa fa-refresh" aria-hidden="true"></i> {lang mkey='reset'}</a>
</div>
</div>
</div>
</div>
</div>


Repeating the following for each of your color options:  (again replacing "custom" with your option)

<li class="list-group-item custom">
<a href="{$style_link}style=custom" title="custom"> <i class="fa fa-square" aria-hidden="true"></i> Team Custom</a>
</li>

And finally in your menu (dropdownpanelmenu_big.tpl) around line 239 in the settings menu add:

<li><a href="#" data-toggle="modal" data-target="#selectStyle" >Change Style</a></li>

and that should be it.

Nice one KHDev 

This is absolutely brilliant.
Thanks a lot, that's just awesome.

This is as cool as your themes

Now only one question left, where do I set it, which is automatically jumped back to index. php after the color selection?
Because there is always an empty area displayed as you can see on the picture.

Hi,

Can you email the following files from osDMix which you have edited to khwebdevelopment@gmail.com so I can check them

index_header.tpl
index.tpl

Thanks.

Also the edited dropdownpanelmenu_big.tpl file.

Sure, but i will take time, cause at work.
Thanks

Have updated the instructions which should resolve the previous issues mentioned Just in case anyone else tries to implement this method

Absolutely brilliant
Thank you very much, this works perfectly.

I did this as a drop-down jumpmenu.

Here's the code for it.

Directly under {strip}
{literal}
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v4.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
{/literal}
then where it should be, the Jump Menu


<div class="col-sm-8 col-sm-offset-2">
<ul class="list-group style_picker">
<center>
<select style="" name="boards" onChange="MM_jumpMenu('parent',this,0)" size="1">
<option value="">Choose your Theme</option>
<option value="">-------------------</option>
<option value="{$style_link}style=blue">Blue</option>
<option value="{$style_link}style=green">Green</option>
<option value="{$style_link}style=purple">Purple</option>
</select>
</center>
</ul>
</div>