« previous next »
Pages: [1] 2

0 Members and 1 Guest are viewing this topic.

*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Different Themes
« on: September 02, 2017, 06:11:47 PM »
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
Logged
*

Pharg

  • *****
  • 3,188
    • OsDateFourm
  • osDate Version: osDateEvo v1.3
Re: Different Themes
« Reply #1 on: September 02, 2017, 10:41:47 PM »
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.
« Last Edit: March 22, 2018, 01:51:28 AM by Pharg »
Logged
Regards,
Pharg ( Phill )

Don't Personal Message me unless it's about a sensitive matter!!

REMEMBER TO ALWAYS BACKUP BEFORE MAKING ANY CHANGES!!

osDateEvo v1.3 | PHP: 5.3.42 & PHP: 7.2 | MySQL: 5.5.35
*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #2 on: September 03, 2017, 08:36:00 AM »
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.
Logged
*

Pharg

  • *****
  • 3,188
    • OsDateFourm
  • osDate Version: osDateEvo v1.3
Re: Different Themes
« Reply #3 on: September 03, 2017, 12:49:45 PM »
Hi Olaf,

I am not sure, maybe someone on here knows.
Logged
Regards,
Pharg ( Phill )

Don't Personal Message me unless it's about a sensitive matter!!

REMEMBER TO ALWAYS BACKUP BEFORE MAKING ANY CHANGES!!

osDateEvo v1.3 | PHP: 5.3.42 & PHP: 7.2 | MySQL: 5.5.35
*

KHDev

Re: Different Themes
« Reply #4 on: September 03, 2017, 10:58:06 PM »

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.
Logged
*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #5 on: September 04, 2017, 06:28:04 AM »
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.
Logged
*

KHDev

Re: Different Themes
« Reply #6 on: September 04, 2017, 10:55:55 PM »
Create a new column in your database on the user table:

Code: [Select]
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.

Code: [Select]
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;

}


Code: [Select]
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;
}

Code: [Select]
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)

Code: [Select]
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
Code: [Select]

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
Code: [Select]
$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.

Code: [Select]

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

Code: [Select]
.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)
Code: [Select]
.style_picker .custom a i{
color: #263130;
}
Now, in your template file (index_header.tpl) add the stylesheet request.

Code: [Select]
<link href="{$css_path}css/stylepicker.css" rel="stylesheet">

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

Code: [Select]
<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)

Code: [Select]
<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:

Code: [Select]
<li><a href="#" data-toggle="modal" data-target="#selectStyle" >Change Style</a></li>

and that should be it.


« Last Edit: May 05, 2018, 01:44:47 AM by Pharg »
Logged
*

Pharg

  • *****
  • 3,188
    • OsDateFourm
  • osDate Version: osDateEvo v1.3
Re: Different Themes
« Reply #7 on: September 04, 2017, 11:01:39 PM »
Nice one KHDev  8)
Logged
Regards,
Pharg ( Phill )

Don't Personal Message me unless it's about a sensitive matter!!

REMEMBER TO ALWAYS BACKUP BEFORE MAKING ANY CHANGES!!

osDateEvo v1.3 | PHP: 5.3.42 & PHP: 7.2 | MySQL: 5.5.35
*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #8 on: September 05, 2017, 06:40:17 AM »
This is absolutely brilliant.
Thanks a lot, that's just awesome.

This is as cool as your themes
Logged
*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #9 on: September 05, 2017, 07:17:59 AM »
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.
Logged
*

KHDev

Re: Different Themes
« Reply #10 on: September 05, 2017, 01:26:01 PM »
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.
Logged
*

KHDev

Re: Different Themes
« Reply #11 on: September 05, 2017, 01:39:38 PM »
Also the edited dropdownpanelmenu_big.tpl file. :)
Logged
*

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #12 on: September 05, 2017, 03:54:51 PM »
Sure, but i will take time, cause at work.
Thanks
Logged
*

KHDev

Re: Different Themes
« Reply #13 on: September 06, 2017, 03:53:22 PM »

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

Olaf Klausen

  • **
  • 62
  • osDate Version: osDate v2.7
Re: Different Themes
« Reply #14 on: September 06, 2017, 10:14:24 PM »
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}
Code: [Select]
{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

Code: [Select]

<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>
Logged
Pages: [1] 2
« previous next »