From f95684c881a8bf0832f01ddc778844a6cb81cfbd Mon Sep 17 00:00:00 2001 From: Thomas Willingham Date: Wed, 20 Feb 2013 20:30:47 +0000 Subject: PCSS Redbasic --- view/theme/redbasic/css/fancy.css | 184 +++++++++++++++++++++++++++++ view/theme/redbasic/css/style.css | 2 +- view/theme/redbasic/php/config.php | 109 +++++++++++++---- view/theme/redbasic/php/style.php | 109 +++++++++++++---- view/theme/redbasic/tpl/theme_settings.tpl | 18 ++- 5 files changed, 374 insertions(+), 48 deletions(-) create mode 100644 view/theme/redbasic/css/fancy.css (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/css/fancy.css b/view/theme/redbasic/css/fancy.css new file mode 100644 index 000000000..f5316e31e --- /dev/null +++ b/view/theme/redbasic/css/fancy.css @@ -0,0 +1,184 @@ +/* There's probably some stuff in here we don't need, and maybe some missing stuff we do need. We can clean it up incrementaly, just get the heavy lifting done for now */ + +aside { +border-radius: 0px 0px 20px 0px;} + + +.tab { + height: auto; + background-color: #f00; + color: #fff !important; + font-weight: bold; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 20px; + margin: 0; + width: auto; + margin-left: 8px; + padding: 4px; + text-align: center; +} +.tab:hover, .tab.active:hover { + background: #d00; + color: #fff; + ; +} +.tab:active { + background: #fff; + color: #f00; +} +.tab.active { + background: #f00; + color: #fff; + box-shadow: 3px 3px 3px #333 inset; + padding: 5px; /* strageness of the human mind - has to be larger than inactive tabs, or it looks smaller than them */ +} + + + +/* Give the top level post bigger shadows than the comments. This makes them appear "higher" and the comments "lower", which separates posts from each other reasonably without literally drawing a line under it */ + +.wall-item-content-wrapper { + position: relative; + background: #fff; + border-radius: 10px; + box-shadow: 8px 8px 8px #000; + border: 1px solid #eec; +} + +.thread-wrapper .thread-wrapper { + margin-left: 50px; +} + +.thread-end-wrapper { + margin-left: 50px; +} + + +/* This shadow isn't quite right - not sure if it's colour or size */ + +.wall-item-content-wrapper.comment { + background: #fff; + border-left: 1px solid #e0e0e0; + margin-left: 50px; + margin-top: 15px; + box-shadow: 5px 5px 5px #222; + +} + +.wall-item-info { + display: block; + float: left; + width:110px; + margin-right:10px; +} +.comment .wall-item-info { + width: 70px; +} + +.wall-item-photo-wrapper { + margin-top: 10px; + margin-left: 10px; + margin-bottom: 10px; + width: 100px; +} + +.wall-item-content img { + max-height: 95% !important; + max-width: 95% !important; + box-shadow: 8px 8px 8px #666; +} + +.wall-item-content img.smiley { + box-shadow: none; +} + +.wall-item-like:hover, .wall-item-dislike:hover{ +opacity: 1; +} + +.wall-item-author { + margin-top: 10px; +} + +.comment-edit-wrapper { + margin-top: 15px; + background: #ffffff; + margin-left: 50px; +} + +.comment-edit-text-empty, .comment-edit-text-full { + float: left; + margin-top: 10px; + padding: 3px 1px 1px 3px; + border: 1px solid #ccc; + padding: 8px; + border-radius: 5px 5px 5px 5px; + box-shadow: 5px 5px 5px #666 inset; +} + +.comment-edit-text-empty { +color: gray; +height: 1.5em; +width: 80%; /*Too wide? */ +overflow: auto; +margin-bottom: 10px; +} + +.comment-edit-text-full { + color: black; + height: 150px; + width: 80%; + overflow: auto; +} + + +#profile-jot-text { + height: 20px; + color:#000; + border: 1px solid #cccccc; + padding: 10px; + width: 90%; + border-radius: 20px; + box-shadow: 4px 4px 3px 0 #666 inset; +} + +#profile-jot-submit { + height: auto; + background-color: #dd0000; + color: #eeeeec; + font-weight: bold; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + border: 2px outset #222420 !important; + margin: 0; + float: right; + text-shadow: 1px 1px #111; + width: auto; + box-shadow: 5px 5px 5px #444; +} +ul.menu-popup { + position: absolute; + display: none; + width: 10em; + background: #dd0000; + color: #eec; + padding: 0px; + list-style: none; + border-radius: 0px 0px 20px 20px; + z-index: 100000; + -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); +} +ul.menu-popup a { + display: block; + color: #eec; + padding: 5px 10px; + text-decoration: none; +} +ul.menu-popup a:hover { + background-color: #eec; + color: #f00; +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index db73e27d5..b45000a3d 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -256,7 +256,7 @@ header #banner #logo-text { font-size: 22px; } -.nav-commlink { +.nav-commlink, .nav-login-link { display: block; height: 15px; margin-top: 67px; diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index ad5df57ce..24bdc7794 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -4,13 +4,20 @@ */ function theme_content(&$a) { + // Doesn't yet work for anyone other than the channel owner, and stupid mode isn't finished, so return both for now. if(!local_user()) { return; } - + if(! feature_enabled(local_user(),'expert')) {return;} + $font_size = get_pconfig(local_user(),'redbasic', 'font_size' ); $line_height = get_pconfig(local_user(), 'redbasic', 'line_height' ); $colour = get_pconfig(local_user(), 'redbasic', 'colour' ); - - return redbasic_form($a, $font_size, $line_height, $colour); + $shadow = get_pconfig(local_user(), 'redbasic', 'shadow' ); + $navcolour = get_pconfig(local_user(), 'redbasic', 'navcolour'); + $displaystyle = get_pconfig(local_user(), 'redbasic', 'displaystyle'); + $linkcolour = get_pconfig(local_user(), 'redbasic', 'linkcolour'); + $iconset = get_pconfig(local_user(), 'redbasic', 'iconset'); + $shiny = get_pconfig(local_user(), 'redbasic', 'shiny'); + return redbasic_form($a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $displaystyle, $linkcolour, $iconset, $shiny); } function theme_post(&$a) { @@ -20,26 +27,47 @@ function theme_post(&$a) { set_pconfig(local_user(), 'redbasic', 'font_size', $_POST['redbasic_font_size']); set_pconfig(local_user(), 'redbasic', 'line_height', $_POST['redbasic_line_height']); set_pconfig(local_user(), 'redbasic', 'colour', $_POST['redbasic_colour']); + set_pconfig(local_user(), 'redbasic', 'shadow', $_POST['redbasic_shadow']); + set_pconfig(local_user(), 'redbasic', 'navcolour', $_POST['redbasic_navcolour']); + set_pconfig(local_user(), 'redbasic', 'displaystyle', $_POST['redbasic_displaystyle']); + set_pconfig(local_user(), 'redbasic', 'linkcolour', $_POST['redbasic_linkcolour']); + set_pconfig(local_user(), 'redbasic', 'iconset', $_POST['redbasic_iconset']); + set_pconfig(local_user(), 'redbasic', 'shiny', $_POST['redbasic_shiny']); } } -function theme_admin(&$a) { - $font_size = get_config('redbasic', 'font_size' ); - $line_height = get_config('redbasic', 'line_height' ); - $colour = get_config('redbasic', 'colour' ); - - return redbasic_form($a, $font_size, $line_height, $colour); -} +// We probably don't want these if we're having global settings, but we'll comment out for now, just in case +//function theme_admin(&$a) { $font_size = get_config('redbasic', 'font_size' ); +// $line_height = get_config('redbasic', 'line_height' ); +// $colour = get_config('redbasic', 'colour' ); +// $shadow = get_config('redbasic', 'shadow' ); +// $navcolour = get_config('redbasic', 'navcolour' ); +// $opaquenav = get_config('redbasic', 'opaquenav' ); +// $itemstyle = get_config('redbasic', 'itemstyle' ); +// $linkcolour = get_config('redbasic', 'linkcolour' ); +// $iconset = get_config('redbasic', 'iconset' ); +// $shiny = get_config('redbasic', 'shiny' ); +// +// return redbasic_form($a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $itemstyle, $linkcolour, $iconset, $shiny); +//} -function theme_admin_post(&$a) { - if (isset($_POST['redbasic-settings-submit'])) { - set_config('redbasic', 'font_size', $_POST['redbasic_font_size']); - set_config('redbasic', 'line_height', $_POST['redbasic_line_height']); - set_config('redbasic', 'colour', $_POST['redbasic_colour']); - } -} +//function theme_admin_post(&$a) { +// if (isset($_POST['redbasic-settings-submit'])) { +// set_config('redbasic', 'font_size', $_POST['redbasic_font_size']); +// set_config('redbasic', 'line_height', $_POST['redbasic_line_height']); +// set_config('redbasic', 'colour', $_POST['redbasic_colour']); +// set_config('redbasic', 'shadow', $_POST['redbasic_shadow']); +// set_config('redbasic', 'navcolour', $_POST['redbasic_navcolour']); +// set_config('redbasic', 'opaquenav', $_POST['redbasic_opaquenav']); +// set_config('redbasic', 'itemstyle', $_POST['redbasic_itemstyle']); +// set_config('redbasic', 'linkcolour', $_POST['redbasic_linkcolour']); +// set_config('redbasic', 'iconset', $_POST['redbasic_iconset']); +// set_config('redbasic', 'shiny', $_POST['redbasic_shiny']); +// } +//} -function redbasic_form(&$a, $font_size, $line_height, $colour) { +// These aren't all used yet, but they're not bloat - we'll use drop down menus in idiot mode. +function redbasic_form(&$a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $displaystyle, $linkcolour, $iconset, $shiny) { $line_heights = array( "1.3" => "1.3", "---" => "---", @@ -61,19 +89,54 @@ function redbasic_form(&$a, $font_size, $line_height, $colour) { '12' => '12', ); $colours = array( - 'light' => 'light', - 'dark' => 'dark', + 'redbasic' => 'light', + 'fancyred' => 'dark', + ); + + $shadows = array( + 'true' => 'Yes', + 'false' => 'No', ); - $t = get_markup_template('theme_settings.tpl'); - $o .= replace_macros($t, array( + $navcolours = array ( + 'red' => 'red', + 'black' => 'black', + ); + + $displaystyles = array ( + 'fancy' => 'fancy', + 'classic' => 'classic', + ); + + $linkcolours = array ( + 'blue' => 'blue', + 'red' => 'red', + ); + + $iconsets = array ( + 'default' => 'default', + ); + + $shinys = array ( + 'none' => 'none', + 'opaque' => 'opaque', + ); + if(feature_enabled(local_user(),'expert')) { + $t = get_markup_template('theme_settings.tpl'); + $o .= replace_macros($t, array( '$submit' => t('Submit'), '$baseurl' => $a->get_baseurl(), '$title' => t("Theme settings"), '$font_size' => array('redbasic_font_size', t('Set font-size for posts and comments'), $font_size, '', $font_sizes), '$line_height' => array('redbasic_line_height', t('Set line-height for posts and comments'), $line_height, '', $line_heights), '$colour' => array('redbasic_colour', t('Set colour scheme'), $colour, '', $colours), - )); + '$shadow' => array('redbasic_shadow', t('Draw shadows'), $shadow, '', $shadows), + '$navcolour' => array('redbasic_navcolour', t('Navigation bar colour'), $navcolour, '', $navcolours), + '$displaystyle' => array('redbasic_displaystyle', t('Display style'), $displaystyle, '', $displaystyles), + '$linkcolour' => array('redbasic_linkcolour', t('Display colour of links - hex value, do not include the #'), $linkcolour, '', $linkcolours), + '$iconset' => array('redbasic_iconset', t('Icons'), $iconset, '', $iconsets), + '$shiny' => array('redbasic_shiny', t('Shiny style'), $shiny, '', $shinys), + ));} return $o; } diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php index 99ad06c55..450cabc7c 100644 --- a/view/theme/redbasic/php/style.php +++ b/view/theme/redbasic/php/style.php @@ -1,46 +1,111 @@ = 10.0) && ($redbasic_font_size <= 16.0)) { + //if($colour != "light" { grab the contents of file $colour which doesn't exist yet, and echo it when it does} + //see the displaystyle bit to see how this works. + //Then, grab the "Light" PCSS from KakSte Friendica theme, flip the colours, and the job is 90% done + //$colour_scheme (not yet implemented) should be used for idiot mode + + +// Enforce sane limits for expert mode - otherwise we'll end up with "experts" who think font size is a percentage. + + if(($redbasic_font_size >= 8.0) && ($redbasic_font_size <= 20.0)) { echo ".wall-item-content { font-size: $redbasic_font_size; }\r\n"; } - if(($line_height >= 1.0) && ($line_height <= 1.5)) { + if(($line_height >= 1.0) && ($line_height <= 2.0)) { echo ".wall-item-content { line-height: $line_height; }\r\n"; } + + +// Minimum value shadows - they shouldn't all be the same size; just get it working, clean up later. + if($shadows === "true") { + echo "code, blockquote, .wall-item-content-wrapper, .wall-item-content-wrapper.comment, .wall-item-content img, #profile-jot-perms, #profile-jot-submit, .tab, .tab.active, .settings-widget li, .wall-item-photo, .photo, .contact-block-img, .my-comment-photo, #posted-date-selector:hover, .contact-entry-photo img, .profile-match-photo img, #photo-photo img, .directory-photo-img, .photo-album-photo, .photo-top-photo, .group-selected, .nets-selected, .fileas-selected, .categories-selected { + box-shadow: 5px 5px 5px #111;}\r\n + + .tab.active, #jot-title, #jot-category, .comment-edit-text-empty, .comment-edit-text-full, iframe#profile-jot-text_ifr, #profile-jot-text { + box-shadow: 5px 5px 5px #666 inset;}\r\n"; + + } + +// Since every change would otherwise require five lines, it's simpler to just set a default and echo this without first checking if we've set it. + echo "nav {background-image: linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%); + background-image: -o-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%); + background-image: -moz-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%) !important; + background-image: -webkit-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%); + background-image: -ms-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%);}"; + +// This takes quite a lot of code, so we'll keep it in a separate file, and echo the lot. Devs still don't have to worry about - it's just overrides. +// Theme devs can play with it without facing scary PHP. + + if ($displaystyle === "fancy") + {if (file_exists('view/theme/' . current_theme() . '/css/fancy.css')) { + $fancy = (file_get_contents('view/theme/' . current_theme() . '/css/fancy.css')); + echo "$fancy";} + } + +// Put the # here to force hex colours - if we don't, somebody is going to do something odd, using RGB and we're all going to be confused on the support forums +// until one of us works out what they've done. + + if ($linkcolour != false) { + echo "a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {color: #$linkcolour;}\r\n"; + } + +// If you want a shiny that just sets a different colour, add an if $shiny != false and handle it as the linkcolour above. + + if ($shiny === opaque) { + echo "div.wall-item-content-wrapper.shiny {opacity: 1;}\r\n + .wall-item-content-wrapper {opacity: 0.8;}"; + } \ No newline at end of file diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl index d0d153e73..6e7e079e0 100644 --- a/view/theme/redbasic/tpl/theme_settings.tpl +++ b/view/theme/redbasic/tpl/theme_settings.tpl @@ -1,6 +1,20 @@ -{{inc field_select.tpl with $field=$font_size}}{{endinc}} +{{inc field_select.tpl with $field=$colour}}{{endinc}} -{{inc field_select.tpl with $field=$line_height}}{{endinc}} +{{inc field_input.tpl with $field=$font_size}}{{endinc}} + +{{inc field_input.tpl with $field=$line_height}}{{endinc}} + +{{inc field_select.tpl with $field=$shadow}}{{endinc}} + +{{inc field_select.tpl with $field=$navcolour}}{{endinc}} + +{{inc field_select.tpl with $field=$displaystyle}}{{endinc}} + +{{inc field_input.tpl with $field=$linkcolour}}{{endinc}} + +{{inc field_select.tpl with $field=$iconset}}{{endinc}} + +{{inc field_select.tpl with $field=$shiny}}{{endinc}}
-- cgit v1.2.3 From 3964625fa2c0cdedb7abea566139470d2981c0a1 Mon Sep 17 00:00:00 2001 From: Thomas Willingham Date: Wed, 20 Feb 2013 20:41:41 +0000 Subject: typo --- view/theme/redbasic/php/config.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index 24bdc7794..8c3269bd8 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -88,7 +88,7 @@ function redbasic_form(&$a, $font_size, $line_height, $colour, $shadow, $navcolo '12.5' => '12.5', '12' => '12', ); - $colours = array( + $colour_scheme = array( 'redbasic' => 'light', 'fancyred' => 'dark', ); -- cgit v1.2.3 From fffaeb09ea622c03f13172d84e8b6a558dd704c0 Mon Sep 17 00:00:00 2001 From: Thomas Willingham Date: Wed, 20 Feb 2013 20:44:34 +0000 Subject: Ugh, not enough caffeine. --- view/theme/redbasic/php/config.php | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index 8c3269bd8..9afc010d7 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -88,11 +88,15 @@ function redbasic_form(&$a, $font_size, $line_height, $colour, $shadow, $navcolo '12.5' => '12.5', '12' => '12', ); - $colour_scheme = array( - 'redbasic' => 'light', - 'fancyred' => 'dark', + $colours = array( + 'light' => 'light', + 'dark' => 'dark', + ); + + $colour_schemes = array( + 'redbasic' => 'redbasic', + 'fancyred' => 'fancyred', ); - $shadows = array( 'true' => 'Yes', 'false' => 'No', -- cgit v1.2.3 From ce77a80972d26ebeed5b90ebe9b8d31a1099c2a6 Mon Sep 17 00:00:00 2001 From: Thomas Willingham Date: Wed, 20 Feb 2013 20:57:41 +0000 Subject: Oh, and you'll be wanting the smarty template --- view/theme/redbasic/tpl/smarty3/theme_settings.tpl | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/tpl/smarty3/theme_settings.tpl b/view/theme/redbasic/tpl/smarty3/theme_settings.tpl index f91f24de6..f8d9f223c 100644 --- a/view/theme/redbasic/tpl/smarty3/theme_settings.tpl +++ b/view/theme/redbasic/tpl/smarty3/theme_settings.tpl @@ -3,9 +3,23 @@ * DO NOT EDIT THIS FILE, CHANGES WILL BE OVERWRITTEN * *}} -{{include file="field_select.tpl" field=$font_size}} +{{include file="field_select.tpl" field=$colour}} -{{include file="field_select.tpl" field=$line_height}} +{{include file="field_input.tpl" field=$font_size}} + +{{include file="field_input.tpl" field=$line_height}} + +{{include file="field_select.tpl" field=$shadow}} + +{{include file="field_select.tpl" field=$navcolour}} + +{{include file="field_select.tpl" field=$displaystyle}} + +{{include file="field_input.tpl" field=$linkcolour}} + +{{include file="field_select.tpl" field=$iconset}} + +{{include file="field_select.tpl" field=$shiny}}
-- cgit v1.2.3 From 21317ee953c68b1888e801f8728f5e7a606f6286 Mon Sep 17 00:00:00 2001 From: Thomas Willingham Date: Wed, 20 Feb 2013 22:09:40 +0000 Subject: Fix font size. That should never have worked in the first place. --- view/theme/redbasic/php/style.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php index 450cabc7c..f9e70d4ff 100644 --- a/view/theme/redbasic/php/style.php +++ b/view/theme/redbasic/php/style.php @@ -62,7 +62,7 @@ // Enforce sane limits for expert mode - otherwise we'll end up with "experts" who think font size is a percentage. if(($redbasic_font_size >= 8.0) && ($redbasic_font_size <= 20.0)) { - echo ".wall-item-content { font-size: $redbasic_font_size; }\r\n"; + echo ".wall-item-content { font-size: $redbasic_font_size\px;}\r\n"; } if(($line_height >= 1.0) && ($line_height <= 2.0)) { -- cgit v1.2.3