From 89a02b0719ce21c62a5eb3b511f65c0c6dcc9362 Mon Sep 17 00:00:00 2001
From: tejagerjovic <teja.gerjovic@fdv.uni-lj.si>
Date: Thu, 17 Mar 2022 00:06:47 +0100
Subject: [PATCH] [Redizajn 1KA] - Urejanje --> Oblika --> Prilagoditev teme -
 v1

---
 admin/survey/classes/class.SurveyTheme.php    |   6 -
 .../classes/class.SurveyThemeEditor.php       | 187 ++++---
 lang/1.php                                    |  30 +-
 lang/2.php                                    |  24 +-
 public/css/admin_new.css                      | 520 ++++++++++--------
 .../pages/my_surveys/oblika_teme.scss         | 373 ++++++++-----
 6 files changed, 677 insertions(+), 463 deletions(-)

diff --git a/admin/survey/classes/class.SurveyTheme.php b/admin/survey/classes/class.SurveyTheme.php
index e942708fa..3f33621c7 100644
--- a/admin/survey/classes/class.SurveyTheme.php
+++ b/admin/survey/classes/class.SurveyTheme.php
@@ -313,12 +313,6 @@ class SurveyTheme {
 		
 		echo '<div class="themes-content">';
 		
-		$sql = sisplet_query("SELECT name FROM srv_theme_profiles".$mobile." WHERE id = '".$_GET['profile']."'");
-		$row = mysqli_fetch_array($sql);
-		
-		echo '<h2>'.$lang['srv_themes_mod'].': <span class="red">'.$row['name'].'</span></h2>';
-		//self::displayTabs();
-		
 		if ( !isset($_GET['t']) ) {
 			
 			$ste = new SurveyThemeEditor($this->sid);
diff --git a/admin/survey/classes/class.SurveyThemeEditor.php b/admin/survey/classes/class.SurveyThemeEditor.php
index 678272c4b..bcd41ca67 100644
--- a/admin/survey/classes/class.SurveyThemeEditor.php
+++ b/admin/survey/classes/class.SurveyThemeEditor.php
@@ -53,7 +53,14 @@ class SurveyThemeEditor {
 		
 		self::new_theme_alert($rowa['name']);
 		
+		echo '<div id="theme-edit-wrap">';
 		echo '<div id="theme-editor">';
+		
+		$sql = sisplet_query("SELECT name FROM srv_theme_profiles".$mobile." WHERE id = '".$_GET['profile']."'");
+		$row = mysqli_fetch_array($sql);
+		
+		echo '<h2>'.$lang['srv_themes_mod'].': <span class="name">'.$row['name'].'</span></h2>';
+
 		echo '<input type="hidden" name="profile" id="profile" value="'.$this->profile.'">';
 		
 		$mobile = (isset($_GET['mobile']) && $_GET['mobile'] == '1') ? 1 : 0;
@@ -61,131 +68,128 @@ class SurveyThemeEditor {
 		
 		echo '<div id="picker"></div>';
 			
-		echo '<fieldset><legend>'.$lang['srv_skinname'].'</legend>';
-		echo '<p>'.$lang['srv_skinname'].': <input type="text" name="skin-name" value="'.$rowa['name'].'" onblur="te_change_name(this);"></p>';
-		echo '</fieldset>';
-	
-		echo '<br />';
+		echo '<h3>'.$lang['srv_skinname'].'</h3>';
+		echo '<input type="text" class="text large" id="skin-name" name="skin-name" value="'.$rowa['name'].'" onblur="te_change_name(this);">';
 
 		// Mobilni skin nima logotipa
 		if($mobile != 1){
-			echo '<fieldset><legend>'.$lang['srv_upload_logo'].'</legend>';
+			echo '<h3>'.$lang['srv_upload_logo'].'</h3>';
 			echo '<form name="upload" enctype="multipart/form-data" action="upload.php?anketa=' . $this->anketa . '&logo=1&te=1&profile='.$this->profile.'" method="post" />';
-			echo '<p>' . $lang['srv_upload_logo'] . ': ';
 			echo '<input type="file" name="fajl" onchange="submit();" onmouseout="survey_upload();" />';				
 			if ($rowa['logo'] != '') {
 				echo '<p>'.$rowa['logo'];
-				echo ' <a href="#" onclick="survey_remove_logo(\''.$this->profile.'\'); return false" title="'.$lang['srv_te_remove_setting'].'"><span class="faicon delete_circle icon-orange_link"></span></a>';
+				echo ' <a href="#" onclick="survey_remove_logo(\''.$this->profile.'\'); return false" title="'.$lang['srv_te_remove_setting'].'"><span class="faicon trash"></span></a>';
 				echo '</p>';
 			}	
 			echo '</p></form>';
-			echo '</fieldset>';
 			
-			echo '<br />';
 		}
 
 		// Mobilni skin nima progressbara
 		if($mobile != 1){
 			$sqlg = sisplet_query("SELECT id FROM srv_grupa WHERE ank_id = '$this->anketa'");	
 			if (mysqli_num_rows($sqlg) > 1) {
-				echo '<fieldset><legend>'.$lang['srv_te_progressbar'].'</legend>';
-				echo '<div id="theme_progressbar">';
-				echo '<p><label>' . $lang['srv_te_progressbar_show'] . ':</label> ';
-				echo '<label for="theme_progressbar_1"><input type="radio" id="theme_progressbar_1" name="progressbar" value="1"' . ($row['progressbar'] == 1 ? ' checked="checked"' : '') . ' autocomplete="off"/>' . $lang['yes'] . '</label> ';
-				echo '<label for="theme_progressbar_0"><input type="radio" id="theme_progressbar_0" name="progressbar" value="0"' . ($row['progressbar'] == 0 ? ' checked="checked"' : '') . ' autocomplete="off"/>' . $lang['no1'] . '</label> ';
-				echo '</p></div>'; # id="theme_progressbar"
-				echo '</fieldset>';
-				
-				echo '<br />';
+				echo '<h3>'.$lang['srv_te_progressbar'].'</h3>';
+
+				echo '<div class="setting_holder">';
+				echo '<span class="setting_title">' . $lang['srv_te_progressbar_show'] . '</span>';
+
+				echo '<div class="setting_item" id="theme_progressbar">';
+				echo '<input type="radio" id="theme_progressbar_1" name="progressbar" value="1"' . ($row['progressbar'] == 1 ? ' checked="checked"' : '') . ' autocomplete="off"/>';
+				echo '<label for="theme_progressbar_1">' . $lang['yes'] . '</label> ';
+				echo '</div>';
+				echo '<div class="setting_item" id="theme_progressbar">';
+				echo '<input type="radio" id="theme_progressbar_0" name="progressbar" value="0"' . ($row['progressbar'] == 0 ? ' checked="checked"' : '') . ' autocomplete="off"/>';
+				echo '<label for="theme_progressbar_0">' . $lang['no1'] . '</label> ';
+				echo '</div>';
+							
+				echo '</div>';
+
 			}
 		}
 		
-		echo '<fieldset><legend>'.$lang['srv_te_survey_h_text'].'</legend>';
+		echo '<h3>'.$lang['srv_te_survey_h_text'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(1, 1);
 		$this->displayOption(1, 4);
 		$this->displayOption(1, 2);
 		$this->displayOption(1, 3);
-		echo '</fieldset>';
+		echo '</div>';
 		
-		echo '<br />';
-		
-		echo '<fieldset><legend>'.$lang['srv_te_outer_frame'].'</legend>';
+		echo '<h3>'.$lang['srv_te_background_color'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(6, 3);
-		echo '</fieldset>';
+		echo '</div>';
 		
-		echo '<br />';
-		
-		echo '<fieldset><legend>'.$lang['srv_te_question_border'].'</legend>';
-		$this->displayOption(5, 5);
-		echo '</fieldset>';
-		
-		echo '<br />';
-		
-		echo '<fieldset><legend>'.$lang['srv_te_question_text'].'</legend>';
+		echo '<h3>'.$lang['srv_te_question_border'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(2, 1);
 		$this->displayOption(2, 4);
 		$this->displayOption(2, 2);
+		echo '</div>';
+		echo '<div class="columns top16">';
 		$this->displayOption(5, 3);
-		echo '</fieldset>';
+		$this->displayOption(5, 5);
+		echo '</div>';
 		
-		echo '<br />';
-		
-		echo '<fieldset><legend>'.$lang['srv_te_answers_text'].'</legend>';
+		echo '<h3>'.$lang['srv_te_answers_text'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(3, 1);
 		$this->displayOption(3, 4);
-		$this->displayOption(3, 2);
+		echo '</div>';
+		echo '<div class="columns top16">';$this->displayOption(3, 2);
 		$this->displayOption(4, 3);
-		echo '</fieldset>';
-
-        echo '<br />';
+		echo '</div>';
 
 		// Custom checkbox/radio (stars, smilies, thumbs)
-        echo '<fieldset>';
 		// Radio/checkboxi za pc
 		if($mobile != 1){
-			echo '<legend>'.$lang['srv_te_custom_checkbox_radio'].'</legend>';		
+			echo '<h3>'.$lang['srv_te_custom_checkbox_radio'].'</h3>';		
+			echo '<div class="columns">';
 			$this->displayOption(7, 7);
 			$this->displayOption(7, 15);
+			echo '</div>';
 			//$this->displayOption(10, 17);
 		}
 		// Radio/checkboxi za mobitel
 		else{
-			echo '<legend>'.$lang['srv_te_custom_mobile_checkbox_radio'].'</legend>';	
+			echo '<h3>'.$lang['srv_te_custom_mobile_checkbox_radio'].'</h3>';
+			echo '<div class="columns">';
 			$this->displayOption(7, 8);
 			$this->displayOption(7, 16);
+			echo '</div>';
 			// Za mobitel ne rabimo accessibility ikon
 			//$this->displayOption(10, 17);
 		}
-        echo '</fieldset>';
-
-		echo '<br />';
 		
 		// Tooltipster/slovar/glossary
-		echo '<fieldset><legend>'.$lang['srv_te_custom_glossary_popup'].'</legend>';
+		echo '<h3>'.$lang['srv_te_custom_glossary_popup'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(8, 9);
 		$this->displayOption(8, 11);
 		$this->displayOption(8, 10);
 		$this->displayOption(8, 12);
-		echo '</fieldset>';
-
-		echo '<br />';
+		echo '</div>';
 		
-		echo '<fieldset><legend>'.$lang['srv_te_custom_glossary_keywords'].'</legend>';
+		echo '<h3>'.$lang['srv_te_custom_glossary_keywords'].'</h3>';
+		echo '<div class="columns">';
 		$this->displayOption(9, 9);
 		$this->displayOption(9, 13);
 		$this->displayOption(9, 14);
-		echo '</fieldset>';
-		
-		
-		echo '<p><label><input type="checkbox" name="current_skin" value="1" '.($row['skin_profile'] == $rowa['id']?'checked disabled':'').' onchange="$(this).attr(\'disabled\', true); te_change_profile(\''.$this->profile.'\'); return false;"> '.$lang['srv_save_set_theme'].'</label></p>';
-		
-		echo '<p>';
-		echo '<div class="buttonwrapper"><a class="ovalbutton ovalbutton_orange floatLeft" href="index.php?anketa='.$this->anketa.'&a=tema"><span>'.$lang['edit1337'].'</span></a></div>';
-		echo '</p>';
-		
 		echo '</div>';
 		
+		//echo '<p><label><input type="checkbox" name="current_skin" value="1" '.($row['skin_profile'] == $rowa['id']?'checked disabled':'').' onchange="$(this).attr(\'disabled\', true); te_change_profile(\''.$this->profile.'\'); return false;"> '.$lang['srv_save_set_theme'].'</label></p>';
+		
+		echo '<div class="button_holder">';
+		echo '<button class="medium white-blue" onClick="window.location='.$preklici_url.';return false;">'.$lang['edit1338'].'</button>';				
+		echo '<button class="medium blue" onClick="window.location.href=\'index.php?anketa='.$this->anketa.'&a=tema\';return false;">'.$lang['edit1337'].'</button>';
+		echo '</div>';
+		
+		echo '</div>';
+
 		$this->preview();
+
+		echo '</div>';
 		
 		?>
 		<script>
@@ -195,8 +199,6 @@ class SurveyThemeEditor {
 		</script>
 		<?
 		
-		//echo '</div>';
-			
 	}
 	
 	static function new_theme_alert ($name, $css=false) {
@@ -233,17 +235,18 @@ class SurveyThemeEditor {
 		$sql = sisplet_query("SELECT value FROM srv_theme_editor".$this->mobile." WHERE profile_id='$this->profile' AND id='$id' AND type='$type'");
 		$row = mysqli_fetch_array($sql);
 		
-		echo '<p>';
-		
 		// pisava
 		if ($type == 1) {
+
+			echo '<div class="setting_box">';
 			
-			echo ''.$lang['srv_te_font_family'].': <select name="font'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
-			echo '<option value=""'.(''==$row['value']?' selected':'').' style="font-size:13px">'.$lang['srv_te_default'].'</option>';
+			echo ''.$lang['srv_te_font_family'].': <select class="dropdown large auto-save" name="font'.$id.'" data-id="'.$id.'" data-type="'.$type.'">';
+			echo '<option value=""'.(''==$row['value']?' selected':'').'">'.$lang['srv_te_default'].'</option>';
 			foreach (self::$fonts AS $key => $val) {
 				echo '<option value="'.$key.'"'.($key==$row['value']?' selected':'').' style="font-family: '.$val.'; font-size:13px">'.substr($val, 0, strpos($val, ',')).'</option>';
 			}
 			echo '</select> ';
+			echo '</div> ';
 
 			if ($row['value'] != '')
 				echo '<a href="#" onclick="te_remove_setting(\''.$id.'\', \''.$type.'\'); return false;" title="'.$lang['srv_te_remove_setting'].'"><span class="sprites arrow_undo"></span></a>';
@@ -253,9 +256,11 @@ class SurveyThemeEditor {
 			
 			if ($row['value'] == '') $value = '#000000'; else $value = $row['value'];
 			
+			echo '<div class="setting_box">';
+			
 			if ($type == 2 || $type == 9)
 				echo ''.$lang['srv_te_font_color'].': ';
-			elseif ($type == 3)
+			elseif($type == 3)
 				echo ''.$lang['srv_te_background_color'].': ';
 			elseif($type == 10)
 				echo ''.$lang['srv_te_custom_border_color'].': ';
@@ -269,19 +274,23 @@ class SurveyThemeEditor {
 			if ($row['value'] == '') echo '<span><a href="#" onclick="$(\'#color-'.$id.'-'.$type.'\').show(); $(this).parent().hide(); return false;" title="'.$lang['edit4'].'">'.$lang['srv_te_default'].' <span class="faicon edit"></span></a></span>';
 			
 			echo '<span id="color-'.$id.'-'.$type.'" '.($row['value']==''?'style="display:none;"':'').'>';
-			echo '<input type="text" id="color'.$id.'-'.$type.'" class="colorwell auto-save" name="color'.$id.'-'.$type.'" value="'.$value.'" data-id="'.$id.'" data-type="'.$type.'"> ';
+			echo '<input type="text" class="text large colorwell auto-save" id="color'.$id.'-'.$type.'" name="color'.$id.'-'.$type.'" value="'.$value.'" data-id="'.$id.'" data-type="'.$type.'"> ';
 			echo '<a href="#" onclick="te_remove_setting(\''.$id.'\', \''.$type.'\'); return false;" title="'.$lang['srv_te_remove_setting'].'"><span class="sprites arrow_undo"></span></a>';
 			echo '</span>';
+			echo '</div>';
 		
 		// velikost pisave
 		} elseif ($type == 4) {
+
+			echo '<div class="setting_box">';
 			
-			echo ''.$lang['srv_te_font_size'].': <select name="fontsize'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
+			echo ''.$lang['srv_te_font_size'].': <select class="dropdown large auto-save" name="fontsize'.$id.'" data-id="'.$id.'" data-type="'.$type.'">';
 			echo '<option value=""'.(''==$row['value']?' selected':'').'>'.$lang['srv_te_default'].'</option>';
 			for ($i=50; $i<=200; $i+=10) {
 				echo '<option value="'.$i.'"'.($i==$row['value']?' selected':'').' style="font-size: '.$i.'%;">'.$i.'%</option>';
 			}
 			echo '</select> ';
+			echo '</div> ';
 			
 			if ($row['value'] != '')
 				echo '<a href="#" onclick="te_remove_setting(\''.$id.'\', \''.$type.'\'); return false;" title="'.$lang['srv_te_remove_setting'].'"><span class="sprites arrow_undo"></span></a>';
@@ -291,17 +300,23 @@ class SurveyThemeEditor {
 			
 			if ($row['value'] == '') $value = '1'; else $value = $row['value'];
 
-			echo $lang['srv_te_question_border'].': <select name="question_border'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
+			echo '<div class="setting_box">';
+
+			echo '<p>'.$lang['srv_te_question_border'].'</p><select class="dropdown large" name="question_border'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
 			echo '<option value="" '.(''==$row['value']?' selected':'').'>'.$lang['default'].'</option>';
 			echo '<option value="0" '.($row['value']=='0'?' selected':'').'>'.$lang['srv_te_question_border_0'].'</option>';
 			echo '<option value="1" '.($row['value']=='1'?' selected':'').'>'.$lang['srv_te_question_border_1'].'</option>';
 			echo '<option value="2" '.($row['value']=='2'?' selected':'').'>'.$lang['srv_te_question_border_2'].'</option>';
 			echo '</select> ';
+			echo '</div> ';
 
         // izbira custom checkbox/radio gumbov
         } elseif($type == 7 ) {
+
+			echo '<div class="setting_box">';
+
             echo $lang['srv_te_custom_icon_pc'] . ': ';
-            echo '<select id="izbira-checkbox-gumbov" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">
+            echo '<select class="dropdown large" id="izbira-checkbox-gumbov" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">
                 <option value="0" '.(($row['value'] == 0 || is_null($row['value'])) ? " selected":"").'>'.$lang['default'].'</option>
                 <option value="18" '.($row['value'] == 18 ? " selected":"").'>18 px</option>
                 <option value="21" '.($row['value'] == 21 ? " selected":"").'>21 px</option>
@@ -312,12 +327,13 @@ class SurveyThemeEditor {
                 <option value="45" '.($row['value'] == 45 ? " selected":"").'>45 px</option>
                 <option value="50" '.($row['value'] == 50 ? " selected":"").'>50 px</option>
                 <option value="55" '.($row['value'] == 55 ? " selected":"").'>55 px</option>
-              </select>';
+              </select></div>';
 
 
         } elseif($type == 8) {
+			echo '<div class="setting_box">';
             echo $lang['srv_te_custom_icon_mobile'] . ': ';
-            echo '<select id="izbira-checkbox-gumbov" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">
+            echo '<select class="dropdown large" id="izbira-checkbox-gumbov" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">
                 <option value="0" '.(($row['value'] == 0 || is_null($row['value'])) ? " selected":"").'>'.$lang['default'].'</option>
                 <option value="21" '.($row['value'] == 20 ? " selected":"").'>20 px</option>
                 <option value="25" '.($row['value'] == 25 ? " selected":"").'>25 px</option>
@@ -327,44 +343,55 @@ class SurveyThemeEditor {
                 <option value="45" '.($row['value'] == 45 ? " selected":"").'>45 px</option>
                 <option value="50" '.($row['value'] == 50 ? " selected":"").'>50 px</option>
                 <option value="55" '.($row['value'] == 55 ? " selected":"").'>55 px</option>
-              </select>';
+              </select></div>';
 
 		// Izpišemo border opcije
         } elseif($type == 11) {
+			echo '<div class="setting_box">';
+
 				echo $lang['srv_te_custom_border_size'].': ';
-				echo '<select name="bordersize'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
+				echo '<select class="dropdown large" name="bordersize'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
 				echo '<option value=""'.(''==$row['value']?' selected':'').'>'.$lang['srv_te_default'].'</option>';
 				for ($i=1; $i<=6; $i++) {
 					echo '<option value="'.$i.'"'.($i==$row['value']?' selected':'').'>'.$i.'px</option>';
 				}
 				echo '</select> ';
+				echo '</div> ';
 
 		} elseif($type == 12) {
+			echo '<div class="setting_box">';
+
 			echo $lang['srv_te_custom_border_radius'].': ';
-			echo '<select name="borderradius'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
+			echo '<select class="dropdown large" name="borderradius'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
 			echo '<option value=""'.(''==$row['value']?' selected':'').'>'.$lang['srv_te_default'].'</option>';
 			for ($i=5; $i<=30; $i+=5) {
 				echo '<option value="'.$i.'"'.($i==$row['value']?' selected':'').'>'.$i.'px</option>';
 			}
 			echo '</select> ';
+			echo '</div> ';
 		
 		// Stil pisave bold, italic, underline
 		} elseif($type == 14) {
+			echo '<div class="setting_box">';
+
 			echo $lang['srv_te_custom_font_style_keywords'].': ';
-			echo '<select name=""keyword_style'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
+			echo '<select class="dropdown large" name=""keyword_style'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save">';
 			echo '<option value=""'.(''==$row['value']?' selected':'').'>'.$lang['srv_te_default'].'</option>';
 			echo '<option value="bold" '.('bold'==$row['value']?' selected':'').'>'.$lang['srv_te_custom_font_style_keywords_bold'].'</option>';
 			echo '<option value="italic" '.('italic'==$row['value']?' selected':'').'>'.$lang['srv_te_custom_font_style_keywords_italic'].'</option>';
 			echo '<option value="underline" '.('underline'==$row['value']?' selected':'').'>'.$lang['srv_te_custom_font_style_keywords_underline'].'</option>';
 			echo '</select> ';
+			echo '</div> ';
 			
 		// Accessibility checkbox (radio/checkboxi niso obarvani)
 		} elseif($type == 17) {
+			echo '<div class="setting_box">';
+
 			echo '<label for="accessibility'.$id.'">'.$lang['srv_te_custom_icon_accessibility'].': ';
 			echo '<input type="checkbox" value="1" name="accessibility'.$id.'" id="accessibility'.$id.'" data-id="'.$id.'" data-type="'.$type.'" class="auto-save" '.($row['value'] == '1' ? ' checked="checked"' : '').'></label>';
+			echo '</div> ';
 		}
 
-		echo '</p>';
 	}
 	
 	function preview () {
diff --git a/lang/1.php b/lang/1.php
index ebbb8208c..5b80e670b 100644
--- a/lang/1.php
+++ b/lang/1.php
@@ -6166,35 +6166,35 @@ $lang = array (
 	'srv_te_progressbar'						=>	'Vrstica/indikator napredka',
 	'srv_te_progressbar_show'					=>	'Prikaži vrstico/indikator napredka',
 	'srv_te_survey_text'						=>	'Besedilo ankete',
-	'srv_te_survey_h_text'						=>	'Besedilo naslova ankete',
+	'srv_te_survey_h_text'						=>	'Naslov ankete',
 	'srv_te_outer_frame'						=>	'Zunanji okvir',
 	'srv_te_question_text'						=>	'Besedilo vprašanja',
-	'srv_te_question_border'					=>	'Okvir vprasanja',
+	'srv_te_question_border'					=>	'Vprašanja',
 	'srv_te_question_border_0'					=>	'Brez',
 	'srv_te_question_border_1'					=>	'Črta',
 	'srv_te_question_border_2'					=>	'Okvir',
-	'srv_te_answers_text'						=>	'Besedilo odgovorov',
+	'srv_te_answers_text'						=>	'Odgovori',
 	'srv_te_remove_setting'						=>	'Odstrani lastno nastavitev',
 	'srv_te_font_family'						=>	'Pisava',
 	'srv_te_font_size'							=>	'Velikost pisave',
 	'srv_te_font_color'							=>	'Barva pisave',
 	'srv_te_background_color'					=>	'Barva ozadja',
 	'srv_te_default'							=>	'Privzeta',
-    'srv_te_custom_checkbox_radio'				=>	'Ikone za osebni računalnik',
+    'srv_te_custom_checkbox_radio'				=>	'IZBIRNI GUMBI IN POTRDITVENA POLJA',
     'srv_te_custom_mobile_checkbox_radio'		=>	'Ikone za mobilni telefon',
-    'srv_te_custom_icon_pc'                     =>  'Velikost ikon checkbox/radio',
-    'srv_te_custom_icon_pc_color' 				=> 	'Barva ikon checkbox/radio',
-    'srv_te_custom_icon_mobile'                 =>  'Velikost ikon checkbox/radio',
-    'srv_te_custom_icon_mobile_color'           =>  'Barva ikon checkbox/radio',
+    'srv_te_custom_icon_pc'                     =>  'Velikost',
+    'srv_te_custom_icon_pc_color' 				=> 	'Barva',
+    'srv_te_custom_icon_mobile'                 =>  'Velikost',
+    'srv_te_custom_icon_mobile_color'           =>  'Barva',
     'srv_te_custom_icon_accessibility'          =>  'Accessibility ikone',
 	'srv_te_custom_glossary_popup'				=> 	'Oblaček pri slovarju',
 	'srv_te_custom_glossary_keywords'			=> 	'Ključna beseda pri slovarju',
-	'srv_te_custom_border_size'              	=>  'Velikost obrobe oblačka',
-	'srv_te_custom_border_style'              	=>  'Oblika obrobe oblačka',
-	'srv_te_custom_border_color'              	=>  'Barva obrobe oblačka',
-	'srv_te_custom_border_radius'              	=>  'Ostrina roba oblačka',
-	'srv_te_custom_background_keywords'			=> 	'Barva ozadja ključne besede',
-	'srv_te_custom_font_style_keywords'			=>  'Stil ključne besede',
+	'srv_te_custom_border_size'              	=>  'Velikost obrobe',
+	'srv_te_custom_border_style'              	=>  'Oblika obrobe',
+	'srv_te_custom_border_color'              	=>  'Barva obrobe',
+	'srv_te_custom_border_radius'              	=>  'Ostrina roba',
+	'srv_te_custom_background_keywords'			=> 	'Barva ozadja',
+	'srv_te_custom_font_style_keywords'			=>  'Stil',
 	'srv_te_custom_font_style_keywords_bold'	=>  'Odobeljeno',
 	'srv_te_custom_font_style_keywords_italic'	=> 	'Poševno',
 	'srv_te_custom_font_style_keywords_underline'=> 'Podčrtano',
@@ -6236,7 +6236,7 @@ $lang = array (
     'srv_aapor_show_approximate'	            =>	'Prikaži približke',
 	'srv_show_continue_later'					=>	'Opcija za nadaljevanje kasneje',
 	'srv_themes_select'							=>	'Izbira teme',
-	'srv_themes_mod'							=>	'Prilagoditev teme',
+	'srv_themes_mod'							=>	'Trenutno urejate temo',
 	'srv_themes_edit'							=>	'CSS urejanje teme',
 	'srv_themes_edit_warning'					=>	'Opozorilo! Urejanje teme na lastno odgovornost!',
 	'srv_themes_upload_css'						=>	'Naložite lasten CSS',
diff --git a/lang/2.php b/lang/2.php
index 4e3b7b89d..f775a9358 100644
--- a/lang/2.php
+++ b/lang/2.php
@@ -6060,35 +6060,35 @@ $lang = array (
 	'srv_te_progressbar'						=>	'Progress indicator',
 	'srv_te_progressbar_show'					=>	'Show progress indicator',
 	'srv_te_survey_text'						=>	'Survey text',
-	'srv_te_survey_h_text'						=>	'Survey header text',
+	'srv_te_survey_h_text'						=>	'Survey title',
 	'srv_te_outer_frame'						=>	'Outer frame',
 	'srv_te_question_text'						=>	'Question text',
-	'srv_te_answers_text'						=>	'Answer text',
+	'srv_te_answers_text'						=>	'Answers',
 	'srv_te_remove_setting'						=>	'Remove setting',
 	'srv_te_font_family'						=>	'Font',
 	'srv_te_font_size'							=>	'Font size',
 	'srv_te_font_color'							=>	'Font color',
 	'srv_te_background_color'					=>	'Background color',
 	'srv_te_default'							=>	'Default',
-	'srv_te_custom_checkbox_radio'				=>	'Custom icons',
+	'srv_te_custom_checkbox_radio'				=>	'Radio button and checkbox',
 	'srv_te_custom_mobile_checkbox_radio'		=>	'Mobile phone custom icons',
-	'srv_te_custom_icon_pc'                     =>  'Icons size',
-    'srv_te_custom_icon_pc_color' 				=> 	'Icons color',
-	'srv_te_custom_icon_mobile'                 =>  'Icons size',
-    'srv_te_custom_icon_mobile_color'           =>  'Icons color',
+	'srv_te_custom_icon_pc'                     =>  'Ssize',
+    'srv_te_custom_icon_pc_color' 				=> 	'Color',
+	'srv_te_custom_icon_mobile'                 =>  'Size',
+    'srv_te_custom_icon_mobile_color'           =>  'Color',
     'srv_te_custom_icon_accessibility'          =>  'Accessibility icons',	
 	'srv_te_custom_glossary_popup'				=> 	'Glossary pop-up',
 	'srv_te_custom_glossary_keywords'			=> 	'Glossary keywords',
 	'srv_te_custom_border_size'              	=>  'Border size',
 	'srv_te_custom_border_style'              	=>  'Border style',
 	'srv_te_custom_border_color'              	=>  'Border color',
-	'srv_te_custom_border_radius'              	=>  'Border radious',
-	'srv_te_custom_background_keywords'			=> 	'Backgroudn color of the keywords',
-	'srv_te_custom_font_style_keywords'			=>  'Font style of the keywords',
+	'srv_te_custom_border_radius'              	=>  'Border radius',
+	'srv_te_custom_background_keywords'			=> 	'Backgroudn color',
+	'srv_te_custom_font_style_keywords'			=>  'Font style',
 	'srv_te_custom_font_style_keywords_bold'	=>  'Bold',
 	'srv_te_custom_font_style_keywords_italic'	=> 	'Italic',
 	'srv_te_custom_font_style_keywords_underline'=> 'Underline',
-	'srv_te_question_border'					=>	'Question border',
+	'srv_te_question_border'					=>	'Questions',
 	'srv_te_question_border_0'					=>	'None',
 	'srv_te_question_border_1'					=>	'Line',
 	'srv_te_question_border_2'					=>	'Frame',
@@ -6130,7 +6130,7 @@ $lang = array (
     'srv_aapor_show_approximate'	            =>	'Show approximate',
 	'srv_show_continue_later'					=>	'Display continue later option',
 	'srv_themes_select'							=>	'Theme selection',
-	'srv_themes_mod'							=>	'Theme modification',
+	'srv_themes_mod'							=>	'Currently editing',
 	'srv_themes_edit'							=>	'CSS editing',
 	'srv_themes_edit_warning'					=>	'Warning! Theme editing at your own risk!',
 	'srv_themes_upload_css'						=>	'Upload your own CSS',
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 19a8eb10e..6d747a01d 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -10351,6 +10351,8 @@ div.page_tema div.theme_list div.options div.button {
   border: 1px solid #E5E5E5;
   box-sizing: border-box;
   border-radius: 2px;
+  display: flex;
+  align-items: center;
   padding: 6px 16px;
   margin-right: 8px;
   font-size: 14px;
@@ -10363,8 +10365,7 @@ div.page_tema div.theme_list div.options div.button span.faicon {
   margin-right: 8px;
   color: #1E88E5;
 }
-
-div.div_theme_group {
+div.page_tema div.div_theme_group {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -10372,56 +10373,340 @@ div.div_theme_group {
   flex-wrap: wrap;
   box-sizing: border-box;
 }
-div.div_theme_group.custom {
+div.page_tema div.div_theme_group.custom {
   display: none;
 }
-div.div_theme_group div.theme_label {
+div.page_tema div.div_theme_group div.theme_label {
   width: 202px;
   height: 245px;
   background-color: #F8F8F8;
   border: 1px solid #F8F8F8;
   padding: 14px 16px;
 }
-div.div_theme_group div.theme_label .theme_label_content {
+div.page_tema div.div_theme_group div.theme_label .theme_label_content {
   border-bottom: 1px solid #E5E5E5;
   padding-bottom: 15px;
 }
-div.div_theme_group div.theme_label .theme_label_content img {
+div.page_tema div.div_theme_group div.theme_label .theme_label_content img {
   display: block;
   clear: both;
   width: 100%;
   margin-bottom: 15px;
   border: none;
 }
-div.div_theme_group div.theme_label .theme_label_options {
+div.page_tema div.div_theme_group div.theme_label .theme_label_options {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding-top: 16px;
 }
-div.div_theme_group div.theme_label .theme_label_options div.button {
+div.page_tema div.div_theme_group div.theme_label .theme_label_options div.button {
   background: #FFFFFF;
   border: 1px solid #E5E5E5;
   box-sizing: border-box;
   border-radius: 2px;
+  display: flex;
+  align-items: center;
   padding: 7px 6px;
   font-size: 14px;
   cursor: pointer;
 }
-div.div_theme_group div.theme_label .theme_label_options div.button span.faicon {
+div.page_tema div.div_theme_group div.theme_label .theme_label_options div.button span.faicon {
   margin: 0;
   color: #1E88E5;
 }
-div.div_theme_group div.theme_label .theme_label_options div.button.wtext {
+div.page_tema div.div_theme_group div.theme_label .theme_label_options div.button.wtext {
   padding: 5px 16px;
 }
-div.div_theme_group div.theme_label .theme_label_options div.button.wtext span.faicon {
+div.page_tema div.div_theme_group div.theme_label .theme_label_options div.button.wtext span.faicon {
   margin-right: 8px;
 }
-div.div_theme_group div.theme_label.span_theme_current {
+div.page_tema div.div_theme_group div.theme_label.span_theme_current {
   border: 1px solid #1E88E5;
 }
 
+div#theme-edit-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 32px;
+  width: 100%;
+}
+div#theme-edit-wrap div#theme-editor {
+  min-height: 600px;
+  width: 50%;
+}
+div#theme-edit-wrap div#theme-editor h2 {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+div#theme-edit-wrap div#theme-editor h2 span.name {
+  text-transform: none;
+}
+div#theme-edit-wrap div#theme-editor h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1E88E5;
+  text-transform: uppercase;
+  overflow: hidden;
+  margin-bottom: 16px;
+  margin-top: 24px;
+}
+div#theme-edit-wrap div#theme-editor h3:after {
+  content: "";
+  display: inline-block;
+  height: 0.5em;
+  vertical-align: bottom;
+  width: 100%;
+  box-sizing: border-box;
+  margin-right: -100%;
+  margin-left: 8px;
+  border-top: 1px solid #E5E5E5;
+}
+div#theme-edit-wrap div#theme-editor h3:first-of-type {
+  margin-top: 0px;
+}
+div#theme-edit-wrap div#theme-editor input#skin-name {
+  width: 319px;
+}
+div#theme-edit-wrap div#theme-editor div.setting_holder {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+}
+div#theme-edit-wrap div#theme-editor div.setting_holder.bottom8 {
+  margin-bottom: 8px !important;
+}
+div#theme-edit-wrap div#theme-editor div.setting_holder:first-of-type {
+  margin-top: 0;
+}
+div#theme-edit-wrap div#theme-editor div.setting_holder:last-of-type {
+  margin-bottom: 0;
+}
+div#theme-edit-wrap div#theme-editor div.setting_holder .setting_item {
+  margin-top: 8px;
+}
+div#theme-edit-wrap div#theme-editor div.columns {
+  display: flex;
+  flex-direction: row;
+  width: 80%;
+  gap: 32px 16px;
+}
+div#theme-edit-wrap div#theme-editor div.columns.top16 {
+  margin-top: 16px;
+}
+div#theme-edit-wrap div#theme-editor div.columns div.setting_box {
+  display: flex;
+  flex-direction: column;
+}
+div#theme-edit-wrap div#theme-editor div.columns div.setting_box select,
+div#theme-edit-wrap div#theme-editor div.columns div.setting_box input,
+div#theme-edit-wrap div#theme-editor div.columns div.setting_box div.input_box {
+  width: 99px;
+  height: 32px;
+  font-size: 14px;
+  padding: 7px 8px;
+}
+div#theme-edit-wrap div#theme-editor div.columns div.setting_box div.input_box {
+  border: 1px solid #C4C4C4;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-top: 4px;
+}
+div#theme-edit-wrap div#theme-editor #picker {
+  /*max-height: 90vh;
+  overflow-y: scroll;*/
+  max-width: 90vw;
+  padding: 16px;
+  font-size: 16px;
+  line-height: 20px;
+  background-color: white;
+  position: fixed;
+  left: 500px;
+  z-index: 999;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_close {
+  position: absolute !important;
+  top: 10px;
+  right: 10px;
+  z-index: 9999;
+  font-size: 12px !important;
+  color: #777777;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_close:hover {
+  color: #333333;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_close a {
+  color: #777777;
+  text-decoration: none;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_close a:hover {
+  color: #333333;
+}
+div#theme-edit-wrap div#theme-editor #picker h2,
+div#theme-edit-wrap div#theme-editor #picker .divPopUp_top {
+  width: 100%;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  text-transform: uppercase;
+  border-bottom: 1px #E5E5E5 solid;
+  margin-block-start: 0;
+}
+div#theme-edit-wrap div#theme-editor #picker h2 span.faicon,
+div#theme-edit-wrap div#theme-editor #picker .divPopUp_top span.faicon {
+  margin-right: 6px;
+  color: #1E88E5;
+}
+div#theme-edit-wrap div#theme-editor #picker h2 span.faicon:before,
+div#theme-edit-wrap div#theme-editor #picker .divPopUp_top span.faicon:before {
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker p {
+  line-height: 20px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_note {
+  margin-bottom: 16px;
+  padding: 8px;
+  font-size: 16px;
+  border: 1px #C4C4C4 solid;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px #C4C4C4 solid;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main.with_menu {
+  flex-direction: row;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left {
+  box-sizing: border-box;
+  width: 216px;
+  min-width: 216px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+  margin-right: 16px;
+  border-right: 1px #C4C4C4 solid;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left .list {
+  display: flex;
+  flex-direction: column;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left .list .list-item {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 8px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  border: 1px #E5E5E5 solid;
+  border-radius: 2px;
+  transition: 0.2s;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left .list .list-item.active, div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left .list .list-item:hover {
+  background-color: #F8F8F8;
+  border-color: #1E88E5;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left .list .list-item .profile_icons a {
+  margin-left: 8px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-weight: 400;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left button .faicon {
+  font-size: 12px;
+  line-height: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_left button .faicon::before {
+  margin-right: 8px;
+  font-size: 14px;
+  color: #1E88E5;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_right {
+  overflow-y: auto;
+  max-height: 70vh;
+  width: 100%;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .popup_right .popup_right_note {
+  margin-bottom: 16px;
+  font-size: 16px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main fieldset {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0 0 0;
+  margin-bottom: 16px;
+  border: 0;
+  border-top: 1px #E5E5E5 solid;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main fieldset legend {
+  padding: 0 8px 0 0;
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main span {
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .setting_line {
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .setting_line:last-of-type {
+  margin-bottom: 0;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .setting_line label,
+div#theme-edit-wrap div#theme-editor #picker .popup_main .setting_line span {
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .settings_block {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+div#theme-edit-wrap div#theme-editor #picker .popup_main .settings_block label,
+div#theme-edit-wrap div#theme-editor #picker .popup_main .settings_block span {
+  font-size: 14px;
+}
+div#theme-edit-wrap div#theme-editor #picker .button_holder {
+  justify-content: end !important;
+  margin: 20px 0 0 0;
+}
+div#theme-edit-wrap div#theme-editor #picker .button_holder button:last-child {
+  margin-right: 0;
+}
+div#theme-edit-wrap div#theme-editor #picker.warning_popup h2::before {
+  padding-right: 8px;
+  font-family: "Font Awesome 5 Free";
+  content: "\f071";
+  font-size: 14px;
+  color: #FFC700;
+}
+div#theme-edit-wrap div#theme-editor div.button_holder {
+  margin-top: 24px;
+  margin-bottom: 0;
+  width: 100%;
+  border-top: 1px solid #E5E5E5;
+  padding-top: 16px;
+}
+div#theme-edit-wrap div#theme-preview {
+  min-height: 600px;
+  border: 1px solid #E5E5E5;
+  width: 50%;
+}
+div#theme-edit-wrap div#theme-preview iframe {
+  width: 100%;
+  height: 600px;
+}
+div#theme-edit-wrap div#theme-preview iframe #preview {
+  display: none;
+}
+
 .theme_header {
   font-weight: 600;
   font-size: 16px;
@@ -10535,223 +10820,12 @@ div.theme_label.span_theme_current img {
   color: #FF0000;
 }
 
-.themes-content {
-  float: right;
-  width: 100%;
-}
-.themes-content .bold {
-  font-size: 14px;
-}
-
 #theme-editor-warning {
   font-size: 13px;
   color: #FF0000;
   font-weight: 600;
 }
 
-#theme-editor {
-  width: 45%;
-  float: left;
-  min-height: 600px;
-}
-#theme-editor #picker {
-  /*max-height: 90vh;
-  overflow-y: scroll;*/
-  max-width: 90vw;
-  padding: 16px;
-  font-size: 16px;
-  line-height: 20px;
-  background-color: white;
-  position: fixed;
-  left: 500px;
-  z-index: 999;
-}
-#theme-editor #picker .popup_close {
-  position: absolute !important;
-  top: 10px;
-  right: 10px;
-  z-index: 9999;
-  font-size: 12px !important;
-  color: #777777;
-}
-#theme-editor #picker .popup_close:hover {
-  color: #333333;
-}
-#theme-editor #picker .popup_close a {
-  color: #777777;
-  text-decoration: none;
-}
-#theme-editor #picker .popup_close a:hover {
-  color: #333333;
-}
-#theme-editor #picker h2,
-#theme-editor #picker .divPopUp_top {
-  width: 100%;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  font-weight: 600;
-  font-size: 16px;
-  text-transform: uppercase;
-  border-bottom: 1px #E5E5E5 solid;
-  margin-block-start: 0;
-}
-#theme-editor #picker h2 span.faicon,
-#theme-editor #picker .divPopUp_top span.faicon {
-  margin-right: 6px;
-  color: #1E88E5;
-}
-#theme-editor #picker h2 span.faicon:before,
-#theme-editor #picker .divPopUp_top span.faicon:before {
-  font-size: 14px;
-}
-#theme-editor #picker p {
-  line-height: 20px;
-}
-#theme-editor #picker .popup_note {
-  margin-bottom: 16px;
-  padding: 8px;
-  font-size: 16px;
-  border: 1px #C4C4C4 solid;
-}
-#theme-editor #picker .popup_main {
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px #C4C4C4 solid;
-}
-#theme-editor #picker .popup_main.with_menu {
-  flex-direction: row;
-}
-#theme-editor #picker .popup_main .popup_left {
-  box-sizing: border-box;
-  width: 216px;
-  min-width: 216px;
-  padding-right: 16px;
-  padding-bottom: 16px;
-  margin-right: 16px;
-  border-right: 1px #C4C4C4 solid;
-}
-#theme-editor #picker .popup_main .popup_left .list {
-  display: flex;
-  flex-direction: column;
-}
-#theme-editor #picker .popup_main .popup_left .list .list-item {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 8px;
-  margin-bottom: 8px;
-  font-size: 14px;
-  border: 1px #E5E5E5 solid;
-  border-radius: 2px;
-  transition: 0.2s;
-}
-#theme-editor #picker .popup_main .popup_left .list .list-item.active, #theme-editor #picker .popup_main .popup_left .list .list-item:hover {
-  background-color: #F8F8F8;
-  border-color: #1E88E5;
-}
-#theme-editor #picker .popup_main .popup_left .list .list-item .profile_icons a {
-  margin-left: 8px;
-}
-#theme-editor #picker .popup_main .popup_left button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-weight: 400;
-}
-#theme-editor #picker .popup_main .popup_left button .faicon {
-  font-size: 12px;
-  line-height: 14px;
-}
-#theme-editor #picker .popup_main .popup_left button .faicon::before {
-  margin-right: 8px;
-  font-size: 14px;
-  color: #1E88E5;
-}
-#theme-editor #picker .popup_main .popup_right {
-  overflow-y: auto;
-  max-height: 70vh;
-  width: 100%;
-}
-#theme-editor #picker .popup_main .popup_right .popup_right_note {
-  margin-bottom: 16px;
-  font-size: 16px;
-}
-#theme-editor #picker .popup_main fieldset {
-  display: flex;
-  flex-direction: column;
-  padding: 16px 0 0 0;
-  margin-bottom: 16px;
-  border: 0;
-  border-top: 1px #E5E5E5 solid;
-}
-#theme-editor #picker .popup_main fieldset legend {
-  padding: 0 8px 0 0;
-  font-size: 14px;
-}
-#theme-editor #picker .popup_main span {
-  font-size: 14px;
-}
-#theme-editor #picker .popup_main .setting_line {
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-#theme-editor #picker .popup_main .setting_line:last-of-type {
-  margin-bottom: 0;
-}
-#theme-editor #picker .popup_main .setting_line label,
-#theme-editor #picker .popup_main .setting_line span {
-  font-size: 14px;
-}
-#theme-editor #picker .popup_main .settings_block {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-}
-#theme-editor #picker .popup_main .settings_block label,
-#theme-editor #picker .popup_main .settings_block span {
-  font-size: 14px;
-}
-#theme-editor #picker .button_holder {
-  justify-content: end !important;
-  margin: 20px 0 0 0;
-}
-#theme-editor #picker .button_holder button:last-child {
-  margin-right: 0;
-}
-#theme-editor #picker.warning_popup h2::before {
-  padding-right: 8px;
-  font-family: "Font Awesome 5 Free";
-  content: "\f071";
-  font-size: 14px;
-  color: #FFC700;
-}
-
-#theme-preview {
-  width: 50%;
-  float: right;
-  min-height: 600px;
-  position: relative;
-  border: 1px #E5E5E5 solid;
-}
-#theme-preview iframe {
-  width: 100%;
-  height: 600px;
-}
-#theme-preview iframe #preview {
-  display: none;
-}
-
-.theme-overflow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 2;
-  margin-right: 20px;
-}
-
 #new_theme_alert {
   position: absolute;
   top: 0;
diff --git a/resources/sass/admin_new/pages/my_surveys/oblika_teme.scss b/resources/sass/admin_new/pages/my_surveys/oblika_teme.scss
index 9255cd597..fb8bd9f1c 100644
--- a/resources/sass/admin_new/pages/my_surveys/oblika_teme.scss
+++ b/resources/sass/admin_new/pages/my_surveys/oblika_teme.scss
@@ -1,3 +1,4 @@
+// Oblika - prva stran, meni s temami
 div.page_tema {
     
     h2 {
@@ -59,6 +60,9 @@ div.page_tema {
                 box-sizing: border-box;
                 border-radius: 2px;
 
+                display: flex;
+                align-items: center;
+
                 padding: 6px 16px;
 
                 margin-right: 8px;
@@ -80,8 +84,250 @@ div.page_tema {
         }
     }
 
+
+    //Splošne teme - GRID
+
+    div.div_theme_group {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 16px;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+
+        &.custom {
+            display: none;
+        }
+
+        div.theme_label {
+            width: 202px;
+            height: 245px;
+            
+            background-color: $light-gray;
+
+            border: 1px solid $light-gray;
+
+            padding: 14px 16px;
+            
+            .theme_label_content{
+                
+                border-bottom: 1px solid $gray;
+                padding-bottom: 15px;
+                
+                img {
+                    display: block;
+                    clear: both;
+                    
+                    width: 100%;
+                    margin-bottom: 15px;
+                    
+                    border: none;			
+                }
+            }
+
+            .theme_label_options {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                padding-top: 16px;
+
+                div.button {
+                    background: $white;
+                    border: 1px solid $gray;
+                    box-sizing: border-box;
+                    border-radius: 2px;
+
+                    display: flex;
+                    align-items: center;
+
+                    padding: 7px 6px;
+
+                    font-size: 14px;
+
+                    cursor: pointer;
+
+                    span.faicon {
+                        margin: 0;
+                        color: $blue;
+                    }
+
+                    &.wtext {
+                        span.faicon {
+                            margin-right: 8px;
+                        }
+                        padding: 5px 16px;
+                    }
+
+                }
+            }
+
+            //Aktivna tema
+            &.span_theme_current {
+                border: 1px solid $blue;
+            }
+            
+        }
+    }
+
 }
 
+// Oblika - prilagoditev teme
+
+div#theme-edit-wrap{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 32px;
+
+    width: 100%;
+
+
+    // < Leva stran (editor)
+    div#theme-editor {
+        min-height: 600px;
+        width: 50%;
+
+        h2 {
+            font-weight: $semi-bold;
+            text-transform: uppercase;
+            font-size: 16px;
+
+            margin-bottom: 16px;
+
+            span.name {
+                text-transform: none;
+            }
+        }
+
+        h3 {
+            font-size: 16px;
+            font-weight: 700;
+            color: $blue;
+            text-transform: uppercase;
+
+            overflow: hidden;
+            
+            &:after {
+                content: "";
+                display: inline-block;
+                height: 0.5em;
+                vertical-align: bottom;
+                width: 100%;
+                box-sizing: border-box;
+                margin-right: -100%;
+                margin-left: 8px;
+                border-top: 1px solid $gray;
+            }
+
+            margin-bottom: 16px;
+            margin-top: 24px;
+            &:first-of-type {
+                margin-top: 0px;
+            }
+        }
+
+        input#skin-name {
+            width: 319px;
+        }
+
+        div.setting_holder {
+            margin-bottom: 16px;
+                &.bottom8 {
+                    margin-bottom: 8px !important;
+                }
+            display: flex;
+            flex-direction: column;
+    
+            &:first-of-type{
+                margin-top: 0;
+            }
+    
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+    
+            //Povezane nastavitve - 8px razmaka
+            .setting_item {
+                margin-top: 8px;
+            }
+        }
+
+        div.columns {
+            display: flex;
+            flex-direction: row;
+            width: 80%;
+
+            gap: 32px 16px;
+
+            &.top16 {
+                margin-top: 16px;
+            }
+
+            div.setting_box {
+
+                display: flex;
+                flex-direction: column;
+
+                select,
+                input,
+                div.input_box {
+                    width: 99px;
+                    height: 32px;
+        
+                    font-size: 14px;
+        
+                    padding: 7px 8px;
+                }
+
+                div.input_box {
+                    border: 1px solid $dark-gray;
+                    box-sizing: border-box;
+                    border-radius: 2px;
+                    margin-top: 4px;
+                }
+            }
+        }
+
+        #picker {
+            @include popup_general();
+    
+            position: fixed;
+            left: 500px;
+            z-index: 999;
+        }
+
+        div.button_holder {
+            margin-top: 24px;
+            margin-bottom: 0;
+            width: 100%;
+            border-top: 1px solid $gray;
+            padding-top: 16px;
+        }
+
+    }
+
+    // > Desna stran (preview)
+    div#theme-preview {
+        min-height: 600px;
+        border: 1px solid $gray;
+        width: 50%;
+        
+        iframe {
+            width: 100%;
+            height: 600px;
+            #preview {
+                display: none;
+            }
+	    }
+
+    }
+}
+
+
+
+//////////////////////////////////////////////////////////
+
 // Skopiran stari styling
 
 $color_6: #990000;
@@ -96,91 +342,6 @@ $selectors: $green;
 $skin_selector_border: $blue;
 $skin_selector: $red;
 
-//Splošne teme - GRID
-
-div.div_theme_group {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 16px;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-
-    &.custom {
-        display: none;
-    }
-
-	div.theme_label {
-        width: 202px;
-        height: 245px;
-        
-        background-color: $light-gray;
-
-        border: 1px solid $light-gray;
-
-        padding: 14px 16px;
-		
-		.theme_label_content{
-			
-            border-bottom: 1px solid $gray;
-            padding-bottom: 15px;
-			
-			img {
-				display: block;
-				clear: both;
-				
-				width: 100%;
-				margin-bottom: 15px;
-				
-				border: none;			
-			}
-		}
-
-        .theme_label_options {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            padding-top: 16px;
-
-            div.button {
-                background: $white;
-                border: 1px solid $gray;
-                box-sizing: border-box;
-                border-radius: 2px;
-
-                padding: 7px 6px;
-
-                font-size: 14px;
-
-                cursor: pointer;
-
-                span.faicon {
-                    margin: 0;
-                    color: $blue;
-                }
-
-                &.wtext {
-                    span.faicon {
-                        margin-right: 8px;
-                    }
-                    padding: 5px 16px;
-                }
-
-            }
-        }
-
-        //Aktivna tema
-        &.span_theme_current {
-            border: 1px solid $blue;
-	    }
-		
-	}
-	
-    
-}
-
-
 .theme_header {
 	font-weight: 600;
 	font-size: 16px;
@@ -295,54 +456,12 @@ div.theme_label.span_theme_current {
 		color: $skin_selector;
 	}
 }
-.themes-content {
-	float: right;
-	width: 100%;
-	.bold {
-		font-size: 14px;
-	}
-}
 #theme-editor-warning {
 	font-size: 13px;
 	color: $red;
 	font-weight: 600;
 }
-#theme-editor {
-	width: 45%;
-	float: left;
-    min-height: 600px;
-    
-	#picker {
-        @include popup_general();
 
-		position: fixed;
-        left: 500px;
-        z-index: 999;
-	}
-}
-#theme-preview {
-	width: 50%;
-	float: right;
-	min-height: 600px;
-	position: relative;
-	border: 1px $gray solid;
-	iframe {
-		width: 100%;
-		height: 600px;
-		#preview {
-			display: none;
-		}
-	}
-}
-.theme-overflow {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 2;
-	margin-right: 20px;
-}
 #new_theme_alert {
 	position: absolute;
 	top: 0;