plainstyles | Style 4 - Complex Mobile Remix: Solarized (Dark)

I was trying to resolve my media query / mobile responsive problem and ended up exploring custom S2 layouts / layers / themes. This is really too complicated for most people. I want good design to be more accessible, so I will stop here for now.

I'm putting it up here while I go back to my previous posts and clean them up. (EDIT: Previous themes have been cleaned.)

This style uses custom layers and themes. This also works well on both DESKTOP and MOBILE.

PREVIEW:

This is similar to my previous theme, Style 3 - Text-only (Solarized Dark) but this is based on Trifecta instead of Tabula Rasa.

Guide

1. Go to Advanced Layers and Create top-level layer using these details --

Type: Layout. Core version: 2.

If you're unable to create a new layer, just delete some from your current layers.

After creating, you'll find this layer on the list with the name (none).

--

2. Edit the layer you just created (right now it should still show the name 'none'). SELECT ALL the text and copy and paste this inside:

layerinfo "type" = "layout";
layerinfo "name" = "Plain Styles Blank";
layerinfo "author_name"     = "tickletheory";
layerinfo "des"             = "Simple styles.";
layerinfo redist_uniq = "plainstyles/layout";

layerinfo "is_public"       = 1;
layerinfo "source_viewable" = 1;

##===============================
## Presentation
##===============================

propgroup presentation {
    property use layout_type;
    property use num_items_recent;
    property use num_items_reading;
    property use use_custom_friend_colors;
    property use use_shared_pic;
    property use use_journalstyle_entry_page;
    property use margins_size;
    property use margins_unit;
    property use sidebar_width;
    property use sidebar_width_doubled;
    property use medium_breakpoint_width;
    property use large_breakpoint_width;
    property use custom_control_strip_colors;

property use reverse_sortorder_group;
    property use reg_firstdayofweek;
    property use tags_page_type;
    property use num_items_icons;
    property use icons_page_sort;

property use all_entrysubjects;
    property use all_commentsubjects;
    property use entry_datetime_format_group;
    property use comment_datetime_format_group;
    property use userpics_style_group;
    property use userpics_position;
    property use entry_metadata_position;
    property use userlite_interaction_links;
    property use entry_management_links;
    property use comment_management_links;

}

set layout_type = "two-columns-right";
set sidebar_width = "15em";
set sidebar_width_doubled = "30em";
set userpics_position = "left";
set use_custom_friend_colors = false;
set custom_foreground_element = "userpic_border";
set custom_background_element = "userpic_background";

##===============================
## Colors
##===============================

propgroup colors {
    property use color_page_background;
    property use color_page_text;
    property use color_page_link;
    property use color_page_link_active;
    property use color_page_link_hover;
    property use color_page_link_visited;
    property use color_page_border;

property use color_module_background;
    property use color_module_text;
    property use color_module_link;
    property use color_module_link_active;
    property use color_module_link_hover;
    property use color_module_link_visited;
    property use color_module_title_background;
    property use color_module_title;
    property use color_module_border;

property use color_header_background;
    property use color_page_title;

property use color_footer_background;
    property use color_footer_link;
    property use color_footer_link_active;
    property use color_footer_link_hover;
    property use color_footer_link_visited;

property use color_entry_background;
    property use color_entry_text;
    property use color_entry_link;
    property use color_entry_link_active;
    property use color_entry_link_hover;
    property use color_entry_link_visited;
    property use color_entry_title_background;
    property use color_entry_title;
    property use color_entry_interaction_links;
    property use color_entry_interaction_links_active;
    property use color_entry_interaction_links_hover;
    property use color_entry_interaction_links_visited;
    property use color_entry_border;

property use color_comment_title_background;
    property use color_comment_title;

property use control_strip_bgcolor;
    property use control_strip_fgcolor;
    property use control_strip_bordercolor;
    property use control_strip_linkcolor;
}

##===============================
## Fonts
##===============================

propgroup fonts {
    property use font_base;
    property use font_fallback;
    property use font_base_size;
    property use font_base_units;
    property use font_module_heading;
    property use font_module_heading_size;
    property use font_module_heading_units;
    property use font_module_text;
    property use font_module_text_size;
    property use font_module_text_units;
    property use font_journal_title;
    property use font_journal_title_size;
    property use font_journal_title_units;
    property use font_journal_subtitle;
    property use font_journal_subtitle_size;
    property use font_journal_subtitle_units;
    property use font_entry_title;
    property use font_entry_title_size;
    property use font_entry_title_units;
    property use font_comment_title;
    property use font_comment_title_size;
    property use font_comment_title_units;
    property use font_sources;
}

set font_base = "";
set font_fallback = "";
set font_base_size = "100";
set font_base_units = "%";

##===============================
## Images
##===============================

propgroup images {
    property use image_background_page_group;
    property use image_background_module_group;
    property use image_background_header_group;
    property use image_background_header_height;
    property use image_background_entry_group;
}

##===============================
## Modules
##===============================

propgroup modules {
    property use module_userprofile_group;
    property use module_navlinks_group;
    property use module_calendar_group;
    property use module_links_group;
    property use module_syndicate_group;
    property use module_tags_group;
    property use module_pagesummary_group;
    property use module_active_group;
    property use module_time_group;
    property use module_poweredby_group;
    property use module_customtext_group;
    property use module_credit_group;
    property use module_search_group;
    property use module_cuttagcontrols_group;
    property use module_subscriptionfilters_group;
}

##===============================
## Text
##===============================

propgroup text {

property use text_module_userprofile;
    property use text_module_links;
    property use text_module_syndicate;
    property use text_module_tags;
    property use text_module_popular_tags;
    property use text_module_pagesummary;
    property use text_module_active_entries;
    property use text_module_customtext;
    property use text_module_customtext_url;
    property use text_module_customtext_content;
    property use text_module_credit;
    property use text_module_search;
    property use text_module_cuttagcontrols;
    property use text_module_subscriptionfilters;

property use text_view_recent;
    property use text_view_archive;
    property use text_view_friends;
    property use text_view_friends_comm;
    property use text_view_network;
    property use text_view_tags;
    property use text_view_memories;
    property use text_view_userinfo;

property use text_entry_prev;
    property use text_entry_next;
    property use text_edit_entry;
    property use text_edit_tags;
    property use text_mem_add;
    property use text_tell_friend;
    property use text_watch_comments;
    property use text_unwatch_comments;

property use text_read_comments;
    property use text_read_comments_friends;
    property use text_read_comments_screened_visible;
    property use text_read_comments_screened;
    property use text_post_comment;
    property use text_post_comment_friends;
    property use text_permalink;

property use text_meta_location;
    property use text_meta_mood;
    property use text_meta_music;
    property use text_meta_xpost;
    property use text_tags;

property use text_stickyentry_subject;

property use text_max_comments;
    property use text_skiplinks_back;
    property use text_skiplinks_forward;
}

##===============================
## Custom CSS
##===============================

propgroup customcss {
    property use external_stylesheet;
    property use include_default_stylesheet;
    property use linked_stylesheet;
    property use custom_css;
}

function Page::print_default_stylesheet() {
    var string medium_media_query = generate_medium_media_query();
    var string large_media_query = generate_large_media_query();

var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background);
    var string header_background = generate_background_css ($*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background);
    if ($*image_background_header_height > 0) {
        $header_background = """
            $header_background
            height: """ + $*image_background_header_height + """px;""";
    }

var string footer_background = generate_background_css( "", "", "", $*color_footer_background );
    var string footer_link_colors = generate_color_css( $*color_footer_link, new Color, new Color );
    var string footer_link_active_colors = generate_color_css( $*color_footer_link_active, new Color, new Color );
    var string footer_link_hover_colors = generate_color_css( $*color_footer_link_hover, new Color, new Color );
    var string footer_link_visited_colors = generate_color_css( $*color_footer_link_visited, new Color, new Color );

var string entry_background = generate_background_css ($*image_background_entry_url, $*image_background_entry_repeat, $*image_background_entry_position, $*color_entry_background);
    var string module_background = generate_background_css ($*image_background_module_url, $*image_background_module_repeat, $*image_background_module_position, $*color_module_background);

var string page_colors = generate_color_css($*color_page_text, $*color_page_background, $*color_page_border);
    var string entry_colors = generate_color_css($*color_entry_text, $*color_entry_background, $*color_entry_border);
    var string module_colors = generate_color_css($*color_module_text, $*color_module_background, $*color_module_border);

var string page_title_colors = generate_color_css($*color_page_title, new Color, new Color);
    var string entry_title_colors = generate_color_css($*color_entry_title, $*color_entry_title_background, new Color);
    var string comment_title_colors = generate_color_css($*color_comment_title, $*color_comment_title_background, new Color);
    var string module_title_colors = generate_color_css($*color_module_title, $*color_module_title_background, new Color);

var string page_link_colors = generate_color_css($*color_page_link, new Color, new Color);
    var string page_link_active_colors = generate_color_css($*color_page_link_active, new Color, new Color);
    var string page_link_hover_colors = generate_color_css($*color_page_link_hover, new Color, new Color);
    var string page_link_visited_colors = generate_color_css($*color_page_link_visited, new Color, new Color);

var string entry_link_colors = generate_color_css($*color_entry_link, new Color, new Color);
    var string entry_link_active_colors = generate_color_css($*color_entry_link_active, new Color, new Color);
    var string entry_link_hover_colors = generate_color_css($*color_entry_link_hover, new Color, new Color);
    var string entry_link_visited_colors = generate_color_css($*color_entry_link_visited, new Color, new Color);
    var string entry_interaction_link_colors = generate_color_css($*color_entry_interaction_links, new Color, new Color);
    var string entry_interaction_link_active_colors = generate_color_css($*color_entry_interaction_links_active, new Color, new Color);
    var string entry_interaction_link_hover_colors = generate_color_css($*color_entry_interaction_links_hover, new Color, new Color);
    var string entry_interaction_link_visited_colors = generate_color_css($*color_entry_interaction_links_visited, new Color, new Color);

var string module_link_colors = generate_color_css($*color_module_link, new Color, new Color);
    var string module_link_active_colors = generate_color_css($*color_module_link_active, new Color, new Color);
    var string module_link_hover_colors = generate_color_css($*color_module_link_hover, new Color, new Color);
    var string module_link_visited_colors = generate_color_css($*color_module_link_visited, new Color, new Color);

var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units);
    var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units);
    var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units);
    var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units);
    var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units);
    var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);
    var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);

var string userpic_css = "";
         if ($*userpics_position == "right") {
             $userpic_css = """
             .entry .userpic,
             .comment .userpic {
                 text-align: right;
                 }
             """;
         }
    print_custom_control_strip_css();

"""

""";
}

Click on SAVE & COMPILE on the top of the window.

After saving, click on Back to layers list just beside the 'Save & Compile' button.

--

3. Create a style-specific layer. This will contain the css/style that will be applied to the layer you just created. Use these details -- Type: Theme. Style: Plain Styles Blank (scroll to the very bottom of the list).

Edit it, similar to what you did with the layer above. SELECT ALL and copy and paste this code in the window:

layerinfo "type" = "theme";
layerinfo "name" = "Solarized Dark";
layerinfo "is_public"       = 1;
layerinfo "source_viewable" = 1;

##===============================
## Presentation
##===============================

set layout_type = "two-columns-right";

##===============================
## Stylesheet
##===============================

function Page::print_theme_stylesheet() {
"""

.ContextualPopup{background:#073642;color:#839496;box-shadow:none;border:1px solid #586E75}.ContextualPopup a{color:#D33682}.ContextualPopup a:visited{color:#D33682}.ContextualPopup a:hover{color:#D33682;border-bottom:1px solid #D33682}#lj_controlstrip{background-image:none}#lj_controlstrip input{background-color:#073642;color:#839496}#lj_controlstrip img{border-radius:100%}H1,H2,H3{margin:.25em 0;padding:.25em 0;font-family:'Josefin Sans',sans-serif}h4,h5,h6{font-family:'Josefin Sans',sans-serif}blockquote{border-left:6px solid #002B36;padding:.5em 1em;font-style:italic;font-size:1.2em}img{border:none}hr,.no-userpic .entry .userpic,.my-journal.page-recent .entry .userpic{display:none}.entry-content hr,.comment-content hr{display:block;margin:1em 10%}body{padding:0;background:#002B36;color:#839496;font:100% 'PT Sans',sans-serif}html body{margin-left:0;margin-right:0}a,a:visited{color:#D33682;text-decoration:none}a:hover,a:active{border-bottom:1px solid #D33682}q{font-style:italic}#content{float:none}@media only screen and (min-width: 48em){.two-columns-left #content,.three-columns-sides #content{border-left:15em solid transparent}.two-columns-right #content,.three-columns-sides #content{border-right:15em solid transparent}.three-columns-left #content{border-left:30em solid transparent}.three-columns-right #content{border-right:30em solid transparent}.column-right #content{min-width:15em}}#content-footer{height:0;font-size:0;clear:both}#header,#footer{margin:0;clear:both;padding:.5em}#title{font-size:2em;margin:0;padding:.5em 0 0}#subtitle,#pagetitle{font-size:1em}.page-entry #pagetitle{display:none}#title a{color:#2AA198}#primary{width:100%;margin-right:-100%;margin-left:0}#primary > .inner:first-child,#secondary > .inner:first-child,#tertiary > .inner:first-child{padding:2em}#primary{float:none}#secondary,#tertiary{width:100%}@media only screen and (min-width: 48em){.multiple-columns #primary{float:left}.two-columns-left #secondary,.three-columns-sides #secondary{float:left;width:15em;margin-left:-15em}.two-columns-right #secondary{float:right;width:15em;margin-right:-15em}.three-columns-left #secondary{float:left;width:15em;margin-left:-30em}.three-columns-right #secondary{float:right;width:15em;margin-right:-15em}.two-columns #tertiary{clear:both;width:auto}.two-columns-left #tertiary{margin-left:-15em}.two-columns-right #tertiary{margin-right:-15em}.two-columns #tertiary .module{float:left;width:15em}.three-columns-left #tertiary{float:left;width:15em;margin-left:-15em}.three-columns-right #tertiary{float:right;width:15em;margin-right:-30em;margin-left:15em}.three-columns-sides #tertiary{float:right;width:15em;margin-right:-15em}}.navigation ul{margin-left:0;padding-left:0}.navigation li{display:inline;padding:0}.comment-content:before{content:"";display:block;overflow:hidden;width:10em}.comment-content{border-top:1px transparent solid}.entry-content li,.comment-content li{list-style-position:inside}.entry-content img,.comment-content img{max-width:100%;height:auto}.metadata ul{display:inline;list-style:none;margin-left:.5em;padding-left:0}.metadata li{margin-bottom:.5em}.metadata.top-metadata ul{margin:0}.metadata.top-metadata{margin-bottom:1em}.tag ul{display:inline;margin-left:0;padding-left:0}.tag ul li{display:inline}.entry-management-links{float:right;padding-top:1.2em;text-align:right}.entry-management-links li{display:inline;padding:0 .25em}.entry-interaction-links{margin-left:0;padding-left:0;text-align:left;border-top:1px solid #002B36;padding-top:1em}.entry-interaction-links li{display:inline;padding:0 .25em}.entry-interaction-links .entry-permalink{display:none}.comment-posted{font-weight:700}.comment-wrapper{padding:.5em 0;min-width:15em}.comment .comment-title{font-size:1.1em;margin:0}.comment-management-links{margin-left:0;padding-left:0;text-align:right}.comment-management-links li{display:inline;padding:0 .25em}.comment-interaction-links{margin-left:0;padding-left:0;text-align:left;margin-top:-1.4em}.comment-interaction-links li{display:inline;padding:0 .25em}#commenttext{width:100%}table.month{margin:0 auto;border-collapse:collapse}table.month td{height:3.25em}table.month td,table.month th{border:1px solid;padding:3px}table.month td p{margin:0;padding:3px}.month dl dt{font-weight:700;font-size:1.2em;position:relative;top:2em;background:#002B36;display:inline-block;border-radius:100%;width:3em;text-align:center;padding:.8em 0}.month dl .time{padding-right:.5em}.month dl h3{display:inline}.page-month .month .entry-poster{margin-left:0}.month dl .tag ul{margin-top:0}.month h3 a,.month .entry-poster a{color:#2AA198}.month dd{border-bottom:1px solid #586E75;padding-left:5em;margin-top:-1.4em;margin-left:0}.month .datetime{text-align:left}.sorting-options ul{margin-left:0}.sorting-options ul li{display:inline}.icon-keywords ul{display:inline;margin-left:0;padding-left:0}.icon-keywords ul li{display:inline}.module-header{font-size:1.2em;color:#2AA198}.module-header a{color:#2AA198}.module-content ul{list-style:outside;margin-left:1em;padding-left:0}.module-list img{display:none}ul.userlite-interaction-links.icon-links{margin-left:0;padding-left:0}ul.userlite-interaction-links.icon-links li{display:inline;padding:0 .2em}ul.userlite-interaction-links.text-links{text-align:left}.any-column .module-calendar table{margin:0}.module-calendar .module-content{text-align:left}@media only screen and (min-width: 48em){.multiple-columns .module-calendar .module-content{text-align:center}.multiple-columns .module-calendar table{margin:0 auto}}.module-calendar td{padding:1px}.module-calendar td a{display:block;padding:2px}.search-box{margin:.2em auto;max-width:100%}.search-form .search-box-item,.search-form .search-button-item{display:block}.search-form .comment_search_checkbox_item{display:inline}.module-pagesummary .ljuser{white-space:normal!important}.module-pagesummary .module-content{word-wrap:break-word}.module-credit .category-title{font-weight:700}.tags_cloud li,.module-tags_cloud li{display:inline}body{margin:0}hr,.page-separator{display:none}#canvas{margin:0 auto;max-width:80em;padding-top:2em}#content-wrapper{max-width:75em;margin:auto}@media only screen and (min-width: 48em){.three-columns-left #content-wrapper{border-left:15em solid transparent}.three-columns-left #content-wrapper > .inner:first-child{border-left:15em solid transparent}.three-columns-right #content-wrapper{border-right:15em solid transparent}.three-columns-right #content-wrapper > .inner:first-child{border-right:15em solid transparent}.three-columns-sides #content-wrapper{border-left:15em solid transparent}.three-columns-sides #content-wrapper > .inner:first-child{border-right:15em solid transparent}.three-columns-left #content,.three-columns-right #content,.three-columns-sides #content{border:0}}.entry-content a,.entry-content a:visited{color:#D33682}.entry-content a:hover,.entry-content a:active{color:#D33682;border-bottom:1px solid #D33682}@media only screen and (min-width: 48em){.two-columns #core,.three-columns #core{float:left;margin-left:0;margin-right:-100%;width:100%}}.any-column #primary{margin-left:0;margin-right:0}#secondary > .inner:first-child{padding:2em}#tertiary > .inner:first-child{padding:2em}@media only screen and (min-width: 48em){.multiple-columns #secondary,.three-columns #tertiary{background:none}.two-columns #tertiary{text-align:center}#secondary > .inner:first-child{padding:2em 2em 0 0}#tertiary > .inner:first-child{padding:2em 2em 0 0}}#header{padding:0 3em}.one-column-split #header{margin-bottom:0}#pagetitle{line-height:1em;margin:2em 0 0;padding:0;text-transform:uppercase;letter-spacing:2px;color:#B58900}#header-content{border-right:10.5em solid transparent}@media only screen and (min-width: 48em){#header-primary{float:left;width:100%;margin-right:-100%;margin-left:0}#header-secondary{float:right;width:10.5em;margin-right:-10.5em}}#header-footer{height:0;font-size:0;clear:both}.navigation{text-align:left}.navigation ul{margin:0 0 1em;padding:0 1em}.topnav ul{margin-bottom:1em}.bottomnav ul{margin-top:1.5em}.navigation ul li{margin:0;padding:0 .2em}.navigation .page-back a::before{content:"<< "}.navigation .page-forward a::after{content:" >>"}.navigation .page-separator{display:none}.entry,#primary > .inner > div{margin-bottom:2em;padding:1em;background:#073642;border-radius:6px}#primary #entries,#primary > .inner > .entry-wrapper,#primary #comments{background:none}.entry .entry-title{display:inline;line-height:1.2em;padding:0;font-size:1.5em}.entry .entry-title,.entry .entry-title a{color:#2AA198}.entry .access-filter,.entry .restrictions{float:left;display:inline;padding-right:.25em}.datetime{clear:both;display:block;font-style:italic;margin:.5em 0;text-align:right}.entry .time::before{content:"- "}.entry .poster{display:block;font-family:'Josefin Sans',sans-serif;margin:-2.1em 0 2em;text-transform:lowercase;color:#B58900;border-bottom:1px solid #002B36;padding:0 0 1em 4em}.entry .poster::before{content:"Posted by "}.poster.empty{display:none}.no-userpic .entry .poster{padding-left:0}.entry .contents{min-height:90px}.entry-content{margin-bottom:1em}.entry-content p,.entry-content table,.entry-content span,.datetime a{color:#839496!important}pre{white-space:pre-wrap;word-wrap:break-word}.metadata{font-style:italic;font-style:italic;margin-bottom:1em}.metadata ul{margin:0}.metadata li{margin:0;padding:0}.entry .footer ul{margin:0}.entry-interaction-links{font:1.2em 'Josefin Sans',sans-serif}.entry-interaction-links a{color:#2AA198}.entry .footer li{padding:0 .1em}.tag{margin-bottom:1em}.comment-depth-1{border:1px solid #073642;border-radius:6px;margin-bottom:2em;padding:0 0 0 1em}.comment-depth-2 .comment-wrapper{margin:1em;border-left:6px solid #073642;padding-left:1em}.comment-poster{display:block;text-transform:lowercase;font:700 1.1em 'Josefin Sans',sans-serif}.poster-ip{display:block}.edittime{margin-top:1em}.comment .footer ul{margin:0;padding:0}.comment .footer li{padding:0 .1em}.comment .footer .text-links li{padding:0}.comment .footer .text-links li::after{content:" - "}.comment .footer .text-links li:last-child::after,.comment .footer .text-links .cmt_hide::after{content:""}.comment .multiform-checkbox{display:block;text-align:right}.toppages,.bottompages{padding:0 1em;text-align:left;font-size:1.2em}.toppages{margin-bottom:2em}.bottomcomment{margin:1.5em 0;padding:1em;background:#073642;border-radius:6px}.bottomcomment .entry-interaction-links{border-top:0}.bottomcomment ul{padding:0;margin:0}.bottomcomment input{margin-top:1em}.partial .comment{padding:0}.partial .poster,.partial .datetime{display:inline}.partial .datetime + a{text-align:right}#qrformdiv{margin-top:2em}.entry .userpic{position:relative;top:-2.3em}.page-recent .journal-type-P .entry .userpic{top:-5.3em}.entry .userpic,.comment .userpic{width:3em;height:3em}.entry .userpic img,.comment .userpic img{width:100%;height:100%;border-radius:3em}.entry .header,.entry-poster,.entry-content,.entry .metadata,.entry .footer,.comment .header,.full .comment .poster,.poster-ip,.comment-content,.comment .footer{margin:1em 1em 1em 4em}.my-journal.page-recent .entry .header,.my-journal.page-recent .entry-poster,.my-journal.page-recent .entry-content,.my-journal.page-recent .entry .metadata,.my-journal.page-recent .entry .footer,.no-userpic .entry .header,.no-userpic .entry-poster,.no-userpic .entry-content,.no-userpic .entry .metadata,.no-userpic .entry .footer,.no-userpic .comment .header,.no-userpic .full .comment .poster,.no-userpic .poster-ip,.no-userpic .comment-content,.no-userpic .comment .footer{margin-left:1em}.entry .userpic,.comment .userpic{display:block;float:left}.entry .footer{margin-top:2em}#postform{padding-right:1em}.month,.page-day .day,.tags-container,.icons-container{margin-bottom:.5em;padding:1em}.page-day .day{margin-bottom:0;padding:0}.month h3,.tags-container h2,.icons-container h2{font-size:1.2em;padding:0}.day-date{padding-left:1em}.month .footer,#primary .manage-link{text-align:right}.month caption{display:none}.page-archive .month .contents{margin:1.5em 0}table.month{width:80%}.page-archive .month td{vertical-align:top;width:14%}table.month td.day{padding:2px 0;text-align:center}table.month th,table.month td{border:1px solid}.month-wrapper .day-has-entries{background:#002B36;font-weight:700}#content > .inner:first-child .day-has-entries a{color:#2AA198}.sorting-options ul{margin:0 0 1em;padding:0;text-align:right}.icon-image{float:left;clear:left;margin-bottom:.75em;min-width:106px;padding-right:1em}.icon-info{min-height:100px;margin-bottom:.75em}.icon-keywords{font-style:italic}.icon-info .keywords-label,.icon-info .comment-text,.icon-info .description-text{display:none}.icon-comment::before,.icon-description::before{content:"- "}.icon-info .default{font-weight:700}.icon-keywords ul{margin:0}.icon-keywords ul li{padding:0}.module{margin-bottom:2em}#header .module-wrapper,#footer .module-wrapper{margin-top:1em;text-align:right}#footer .module{display:block;margin:0;width:100%}.pagesummary-subject a{color:#839496}.pagesummary-subject a:hover{color:#D33682;border-bottom:1px solid #D33682}@media only screen and (min-width: 48em){.one-column #secondary .module,.one-column #tertiary .module,.two-columns #tertiary .module{display:inline-block;float:none;text-align:left;vertical-align:top;width:15em}}.module ul{list-style-type:none;margin:0}.module ul li{margin:.15em 0}.module .manage-link{text-align:left}.manage-link a{color:#586E75}#header .module-content,#header .module-syndicate .module-content{text-align:right}#header .module-header{display:none}#header .module-navlinks{padding:0;text-align:right}#header .module-navlinks li{display:inline;padding:0 .25em}#header .search-box{max-width:95%}.module-userprofile ul{margin-top:.5em}.module-userprofile .userpic img{border-radius:100%;margin-bottom:1em;width:3em;height:3em}.any-column .module-calendar table{margin:0 auto 0 0;width:80%}.module-calendar td{padding:1px}.module-calendar td a{display:block;font-weight:700;padding:2px}.any-column .module-syndicate .module-content{text-align:left}#footer,#content > .inner:first-child #footer{padding:1em;text-align:left}input,textarea,select{background:#002B36;border:1px solid #586E75;color:#839496}@media only screen and (max-width: 56em){.entry-content img,.comment-content img{max-width:100%}#footer,#content > .inner:first-child #footer{background:#073642}.datetime{text-align:left}.entry .poster{margin-top:1em;padding-left:0}.entry .header,.entry-poster,.entry-content,.entry .metadata,.entry .footer,.comment .header,.full .comment .poster,.poster-ip,.comment-content,.comment .footer{margin:1em 0}.my-journal.page-recent .entry .header,.my-journal.page-recent .entry-poster,.my-journal.page-recent .entry-content,.my-journal.page-recent .entry .metadata,.my-journal.page-recent .entry .footer,.no-userpic .entry .header,.no-userpic .entry-poster,.no-userpic .entry-content,.no-userpic .entry .metadata,.no-userpic .entry .footer,.no-userpic .comment .header,.no-userpic .full .comment .poster,.no-userpic .poster-ip,.no-userpic .comment-content,.no-userpic .comment .footer{margin-left:0}.entry .footer .entry-management-links{padding-top:1.2em;padding-left:0;float:none;margin-bottom:1em}#primary > .inner:first-child{padding:0}#secondary > .inner:first-child,#tertiary > .inner:first-child{padding:1em}#header{padding:0 1em}.navigation ul{padding:0}#lj_controlstrip_actionlinks,#lj_controlstrip_search{opacity:0;height:1px;overflow:hidden}#lj_controlstrip_user,#lj_controlstrip_actionlinks,#lj_controlstrip_search{border-right:0}.poster-ip{padding-left:5.2em;font-size:.8em}.comment-poster{padding-left:4em}.bottomcomment{padding:1em}.entry .footer .entry-interaction-links li{display:block;padding:.25em}.bottomcomment .entry-management-links{float:none}.entry .userpic,.entry .footer .entry-interaction-links .entry-permalink{display:none}}

""";
}

Click on SAVE & COMPILE on the top of the window.

After saving, click on Back to layers list just beside the 'Save & Compile' button.

--

4. Go to the Main Customization Area. On the tabs on the left, you'll find Your Custom Layers. Click on that and apply the theme, "Solarized Dark"

--

5. Go and Customize your theme and add the custom CSS link below.

Custom Stylesheet URL

This is necessary to link to Google Webfonts that this theme uses. Copy-paste this URL to the textbox here

Customize

You replace these in the custom CSS box if you like.

Background (dark) - #002B36
Background - #073642
Accents / borders - #586E75
Header text - #2AA198
Primary text - #839496
Secondary text - #B58900
Links - #D33682

Primary font (body text) - 'PT Sans'
Secondary font (headers) - 'Josefin Sans'

Don't forget to change the Custom CSS URL if you want to change to different Google webfonts.

Feel free to change as much as you'd like.

Credit in bio

Theme style by <user name="plainstyles">

Flat | Top-Level Comments Only

From:

carisma_sensei

Just one question though. Only paid users can use custom layers and such right?

tickletheory

Ah nope! Even free users can use custom layers. Just delete ones you're using / may have been using if you're out of space. I think free accounts only allow 5.

A layer is created, too, when you save tweaks to an existing theme. So there's always multiple layers stored and there should be versions of layers you're not using anymore. :)

Ahh I see!
I don't know how to do all that layer stuff, I'm not so versed on coding as to do all that hahaha. Ah well! I guess I'll just make layouts and hope for them to be viewable on mobiles xD

It's not worth the hassle, haha, but I'll update this guide with more screenshots later in case you wanna try it in the future.

For now, as long as the checkbox for using the default stylesheets are checked, it should scale down well on mobile. Just don't start from scratch like me 😅

nenya_kanadka

Oh, fascinating. I'm looking at your other Solarized Dark right now (which I found through

dreamwidthlayouts and really like) and am not quite sure it does what I need on mobile, especially with multiple nested comments. So this looks relevant to my interests!

It's been a long time since I've done anything with custom layers (probably around 2005 on LJ or something) but I know it's something I can and have done in the past. With your helpful instructions I'll give it a shot! :-)

insertusername

Just wanted to say I love this journal and your styles. Awesome stuff. Can't thank you enough for sharing. <3

laraflame

Hi! I just wanted to thank you for sharing this wonderful (mobile friendly :')) layout! I'm in love with it!

blueshiftofdeath

Thanks so much for sharing these, I absolutely love this theme!

PlainStyles by TickleTheory

Simple themes for Dreamwidth journals

Style 4 - Complex Mobile Remix: Solarized (Dark)

Style 4 - Complex Mobile Remix: Solarized (Dark)

Guide

Custom Stylesheet URL

Customize

Credit in bio

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

Affiliates

Most Popular Tags