style_system | Entries tagged with module:navlinks

Hiya! I'm a CSS noob and most of what I've learned thus far is trial and error attempts at implementing suggestions for custom CSS that I've seen in this community.

I'm playing around with Fluid Measure on my journal and have a couple of questions. Thank you for any help you can give!:

1) Is it possible to put the Navigation module in a header? Or do I need to pick a different style to do that? That's a dealbreaker for me.

(ETA: fixed! thanks to althea_valara) 2) The space (container? IDEK) around the modules is showing black on my desktop (but not on mobile). I can't figure out where to change that.

Tags:

bcboomerangs

I currently have Elegant Notebook for Gold Leaf - and I'm trying to get rid of the "Network" link in my navigation links. I currently have a gap there because I removed the text, but I don't like that open space.

Any help?

UPDATE: This has been fixed. Thank you all for your help!

Current Mood: curious

Tags:

module:navlinks

6thirty

Hi again. It's me, Syx, and I'm trying to get rid of the underline under the navigation links. I also want to know where I can fix the size and font-size of the navigation bar too.

Here is the code:

/* 
base style: blanket
layout name: window
6thirty.dreamwidth.org color: #06273A;
*/
body {
background: #06273A url('http://i.imgur.com/4FiybPa.png') repeat; background-position: left bottom; background-attachment: fixed;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 10pt; text-align: center; color: #000000;
margin: 0; padding: 0; }

a, a:link, a:visited { color: #06273A;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

a:hover, a:active { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

i {}

em {}

b {}

strong {}

code {}

q { font-style: italic; }

input, textarea { color: #000000;
background-color: #e0ddd7; border: solid 1px #9b9181;
padding: 5px; line-height: 1.8em; }

#canvas { margin: 0 auto 3em; padding: 0; text-align: justify; }

#content { margin: 0; padding: 0; }

#primary { margin: 0 auto; padding: 0; z-index: 0; }

/* contextual pop-up */
.contextualpopup { color: #0d0d0f; font-family: Helvetica, Tahoma, sans-serif;
background: #ffffff url('') no-repeat; background-position: left top; background-attachment: scroll;
margin: 0; padding: 0; }

.contextualpopup div.inner a, .contextualpopup div.inner a:link, .contextualpopup div.inner a:visited { color: #06273A; text-decoration: none;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.contextualpopup div.inner a:active .contextualpopup a:hover { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.contextualpopup a, .contextualpopup a:link, .contextualpopup a:visited { color: #768fa3; }

.contextualpopup a:hover, .contextualpopup a:active { color: #dbe3ee; }

.contextualpopup .userpic { margin: .5em; padding: 0; }
    
.has-userpic .entry .userpic, .has-userpic .comment .userpic { float: right; }

.has-userpic .entry .header { margin-right: 135px; }

.has-userpic .comment .header { margin-right: 135px; }

/* control strip */
#lj_controlstrip { color: #0F2427; font-family: Helvetica, Tahoma, sans-serif; text-decoration: none;
background-color: #FAFCFB; background-image: none; 
opacity: 0.5; }

#lj_controlstrip:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

#lj_controlstrip td { color: #768fa3; border-bottom: 1px solid #ffffff; }

#lj_controlstrip_statustext { color: #768fa3; }

#lj_controlstrip a, #lj_controlstrip a:link, #lj_controlstrip a:visited  { color: #768fa3; }

#lj_controlstrip a:hover, #lj_controlstrip a:link:hover { color: #dbe3ee;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic { color: #947152;
border-right: 1px solid #ffffff; }

#lj_controlstrip_login td { border-bottom: 0; }https://cmv-ds-images.s3.amazonaws.com/wp-content/uploads/innerinsetshadow-1.jpg

#lj_controlstrip td td { border-bottom: 0; }

/* header, footer */
#header {
background-color: #FEFEFE; border-left: 20px solid #06273A; border-radius: 25px;
margin: 0 auto 2em; display: none; opacity: 0.5;
-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

#header:hover { opacity: 1.0;
-webkit-filter: grayscale(0); filter: grayscale(0); }

#header>.inner { padding: 4em 2em; }

@media only screen and (min-width: 40em) {
    #primary, #header, #secondary, .page-top { width: 60%; }
}

#footer { clear: both; display: block; }

.page-top { text-align: right; text-transform: uppercase;
margin: 0 auto; }

.navigation { text-align: center; text-transform: none; }

.navigation a, .navigation a:link, .navigation a:visited { text-decoration: none;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.navigation a:hover, .navigation a:active { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

li.page-back, li.page-forward { display: inline; margin: 0 0 0 .3125em; padding: 0; }

li.page-separator { display: none; }

.navigation ul { display: inline; margin: 0; padding: 0; }

.navigation li { display: inline; }

/* header, subtitle */
#header h1#title { color: #000000;
 font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1.25em; font-weight: normal; text-transform: none;
letter-spacing: 0; margin: 0; padding: 0; }

#header h2#subtitle { color: #000000; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: none;
letter-spacing: 1px; margin: 0; padding: 0; }

#header h2#pagetitle { color: #1e1e1e; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: none;
letter-spacing: 1px; margin: 1em 0 0; padding: 0; }

/* navigation */
.module-navlinks { color: #000000; text-decoration: none;
background-color: #FAFCFB;
bottom: 0; margin: 0 auto; padding: .75em; position: fixed; width: 100%; z-index: 100; opacity: 0.5;
-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.module-navlinks:hover { opacity: 1.0;
-webkit-filter: grayscale(0); filter: grayscale(0); }

.module-navlinks a, .module-navlinks a:link, .module-navlinks a:visited { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.module-navlinks a:hover, .module-navlinks a:active { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.module-navlinks ul.module-list { text-transform: none; 
display: inline; letter-spacing: -0.5px; margin: 0 0 0 2em; padding: 0; }

.module-navlinks ul.module-list li { display: inline; margin: 0 1em 0 0; padding: 0 .5em 0 0; }

.module-navlinks a, .module-navlinks a:link, .module-navlinks a:visited, { color: #06273A;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

/* modules */
#secondary { color: #000000;
background-color: #FEFEFE; border-left: 20px solid #06273A; border-radius: 25px;
margin: 0 auto; padding: 0; z-index: 0; opacity: 0.5;
-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

#secondary:hover { opacity: 1.0;
-webkit-filter: grayscale(0); filter: grayscale(0); }

#secondary>.inner { padding: 1em 1em; }

#secondary .module { float: left; margin-left: 1em; }

#secondary .module-header, #secondary .module-header a { color: #000000; }

#secondary .module-header { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .separator-after { clear: both; }

#secondary a, #secondary a:link, #secondary a:visited { color: #06273A; text-decoration: none;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

#secondary a:hover, #secondary a:active {  -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.module-tags_cloud { border-bottom: 1px solid #9b9181; border-top: 1px solid #9b9181;
float: none; margin: 3em 0; width: 100%; }

.module-tags_cloud .module-content { padding: 0 3em 1em; }

.module-tags_cloud li, .tags_cloud li { display: inline; }

#secondary .module-content { text-align: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .module-content ul { list-style: outside; margin-left: 1em; padding-left: 0; }

#secondary .module-content li { margin: .5em 0; }

ul.userlite-interaction-links.icon-links { margin-left: 0; padding-left: 0; }

ul.userlite-interaction-links.icon-links li { display: inline; padding: 0 .20em; }

.module-calendar td a { display: block; padding: 2px; }

.module-credit .category-title { font-weight: bold; margin-right: .5em; }

.module-search .search-form { margin: .2em auto; }

.module-search .search-box { max-width:100%; margin: .2em; }

/* entry */
.entry a,  .entry a:link, .entry a:visited { color: #06273A; text-decoration: none; 
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }
    
.entry a:hover, .entry a:active { -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);  }

.entry { color: #000000;
background-color: #FEFEFE; border-left: 20px solid #06273A; border-radius: 25px;
margin: 150px 0 100px 0; padding: 2em; opacity: 0.5; 
-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.entry:hover { opacity: 1.0;
-webkit-filter: grayscale(0); filter: grayscale(0); }

.entry-content { margin: 1em 0 0; }

.header { margin: 0 0 1em; padding: 0; }

h3.entry-title {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1.5em; color: #000000; font-weight: normal
letter-spacing: -1px; margin: 0; padding: 0; text-transform: none; }

.no-subject .entry .entry-title { background: none; }

h3.entry-title a, h3.entry-title a:link, h3.entry-title a:visited { color: #06273A; text-decoration: none; 
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

h3.entry-title a:hover, .entry a:active, { -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.datetime { color: #000000; font-size: .9em; font-weight: normal; text-transform: none;
letter-spacing: 1px; padding: 0; }

.datetime a, .datetime a:link, .datetime a:visited { color: #06273A; text-decoration: none; 
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.datetime a:hover, .datetime a:active { -webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.userpic { display: block; }

.userpic img { border-left: solid 10px #06273A; border-radius: 10px; }

.userpic img:hover { filter: contrast(0.50%) }

.poster { color: #1e1e1e; font-size: 0.9em; font-weight: normal;
letter-spacing: 0; padding: 0; text-transform: none; }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before { content: ""; display: block; overflow: hidden; width: 10em; }

.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li, .comment-content li { list-style-position: inside; }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img { max-width: 100%; height: auto; }

@media only screen and (min-width: 64em) { .entry-content img, .comment-content img { max-width: none; }

.metadata { margin: 2em 0 0; }

.metadata.top-metadata { margin: 1em 0 2em; }

.metadata ul { list-style: none; margin: 0; padding: 0; }

.metadata ul li { color: #1e1e1e; font-size: .9em; font-weight: normal;
letter-spacing: 0; padding: 0; text-transform: none; }

.metadata-label-location, .metadata-label-mood, .metadata-label-music { display: none; }

.metadata-item-location, .metadata-item-mood, .metadata-item-music { padding: 0 0 0 1.3em; }

.tag-text { display: none; }

.tag ul { display: inline; margin: 0; padding: 0 0 0 1.3em; }

.tag ul li { color: #1e1e1e; font-size: .9em; font-weight: normal; text-transform: none;
display: inline; letter-spacing: 0; padding: 0; }

ul.entry-management-links { margin: 2em 0 0; padding: 0; }

ul.entry-management-links li { olor: #1e1e1e; display: inline; font-size: .9em; font-weight: normal;
letter-spacing: 0; padding: 0 5px 0 0; text-transform: none; }

ul.entry-interaction-links { text-align: center;
border-bottom: 1px solid #9b9181;
margin: 1em 0 0; padding: 0 0 .5em; }

ul.entry-interaction-links li { color: #1e1e1e; font-size: .9em; font-weight: normal; text-transform: uppercase;
display: inline; letter-spacing: 0; padding: 0 5px 0 0; }

/* comments */
.comment-wrapper { margin: 2em 0; padding: 0; min-width: 15em; }

.comment { color: #000000;
background-color: #e0ddd7; border-left: 20px solid #9b9181;
margin: 0 auto 2em; padding: 40px 20px; }

.comment a, .comment a:link, .comment a:visited { color: #06273A;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.comment a:hover, .comment a:active { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.comment .admin-poster { color: #000000;
background-color: #e0ddd7; }

.comment-title { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; 
margin: 0; }

.no-subject .comment .comment-title { background: none; }

.comment-posted { font-weight:bold; }

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

textarea.textbox { width: 100% !important; }

.bottomcomment, .comments-message { color: #000000;
background-color: #e0ddd7; border-left: 20px solid #9b9181;
margin: 0 auto 2em;
padding: 4em 2em; }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; }

.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0 !important; }

/* archive */
li.active { color: #8e048c; text-transform: none; text-align: center;
display: inline; margin: 0; padding: 0; }

.month { color: #000000;
background-color: #e0ddd7; border-left: 20px solid #9b9181;
margin: 0 auto 2em; padding: 4em 2em; }

.month h3 { color: #000000; font-size: 1em; font-weight: normal; text-align: right; text-transform: lowercase;
letter-spacing: 1px; margin: 0; padding: 0; }

.month th { color: #0d0c0b; text-transform: none; font-size: .9em;  font-weight: normal; text-align: center;
background-color: #9b9181;
padding: 5px; }

.month table { border: 0;
margin: auto; width: 100%; }

.month caption { display: none; }

td.day { border: .1em solid #9b9181;
padding: .5em; }

/* tags */
.page-tags .tags-container { color: #000000;
background-color: #e0ddd7; border-left: 20px solid #9b9181;
margin: 0 auto 2em; padding: 4em 2em; }

.page-tags .tags-container h2 { color: #000000; text-align: right; text-transform: none;
font-size: 1em; font-weight: normal;
letter-spacing: 1px; margin: 0; padding: 0; }

.page-tags .tags-container ul { list-style: none; margin: 1em; padding: 0; }

.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; }

/* icons*/
.icons-container { color: #000000;
background-color: #e0ddd7; border-left: 20px solid #9b9181;
margin: 0 auto 2em; padding: 4em 2em; }

.icons-container a, .icons-container a:link, .icons-container a:visited, { color: #06273A;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.icons-container a:hover, .icons-container a:active { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.icons-container h2 { color: #000000; font-size: 1em; font-weight: normal; text-transform: none; text-align: right;
letter-spacing: 1px; margin: 0; padding: 0; }

.sorting-options ul { padding-left: 0; text-align: right; }

.sorting-options ul li { display: inline; }

.icons-container .icon { margin: 1em 0; }

.icon-image { float: left; clear: left; margin-bottom: .25em; min-width: 100px; padding-right: 1em; }

.icon-info { min-height: 100px; }

.icon-info span { font-weight: bold; }

.icon-info .default { text-decoration: none; }

.icon-keywords ul { display: inline; margin: 0; padding: 0; }

.icon-keywords ul li { display: inline; padding: 0; }

.userpic { float: left; margin: 0 10px 10px 0; }

Could you please help me figure it out? There may be an excessive amount of code when dealing with navigation bar and navi-links section.

Tags:

module:navlinks

ex_awakened208

Would it be possible to merge the "previous" and "next" links with the main navigation that has the "recent entries"/"read page"/"tags", etc links in it?

The end result I am looking for is a header navigation that goes in this order:

previous | recent entries | archive | read | tags | info | next

I would prefer if the previous/next links only show up if there are actually entries before/afterward.

I hope that was clear enough! Thanks in advance.

Tags:

extempore

Hello fellow style addicts!

I recently moved in from LJ and I'm in the process of recreating my journal layout at DW. I'm using the Brittle layout and trial/error my way through the design. ;) Most things I managed to work out by myself, but there are a few points I can't seem to find a solution for. Hopefully someone will be able to point me in the right direction. Additionally, I'm not sure what tags would be appropriate for this post. I'd be relieved, if the mods could handle that. ^^;

1.
My header looks like this. What I'd like to have is instead of the journal name/page title to show a simple link menu I can freely configure, such as:

profile | circles | calendar | link a | link b

I found in this lovely community already how to get rid of the page title etc. What I don't know is how I could put links there instead, and perhaps my profile icon in a smaller size. --- Partially solved!

2.
I'd like to move "Previous 50" to the right and to change the font size. So far I only managed to find out how to change the color. I'd like to do the same on the bottom of the page. (Currently the profile module sits there as well. I disabled it for now, because my first plan had been to put it in the header, which didn't work and the entire thing would have been too big for the top of my page anyway.) --- SOLVED!

3.
Is there a way to (a) change the font size of user names independently from the font size for date/time? Also, is there a way to (b) place the user names below their icons in such a way that they behave "intelligently", i.e. have line breaks, if the name length exceeds a certain amount of letters? This is mainly interesting for communities when you have "userblabla posted in communityblabla". I found out how to change the positioning in general, but I assume the user name would have to be withing the icon layer to be confined to it and for the entry text to not overlap it, and I couldn't figure out how to do that or how to add another box below the icon in which I could put the user name. --- Part (a) solved!

Thank you in advance for any help you can offer me! (Also: please ignore the white page background, I'll be adding a background image once everything sits on its right place.)

Tags:

unicorn

Hey guys. On my journal right now I'm trying to change the color of the bar around the "top of the page" footer link - for some reason I can't get it off of the pale blue it's on now and (preferably) change it to a gray that matches the other navigation stuff.

Also, the other navigation links (recent entries, archive, reading, etc) are all left-aligned on their bar, and I can't figure out how to get them to center instead.

I'm using a tweaked version of this code, if that makes anything clearer. Thanks in advance for your help!

Tags:

alovelyburn

Apologies if my questions are ridiculous - I've only been on DW for a short time, and am not yet used to style-making here.

So, okay, I've recently imported a community that I run from LJ to DW, and while I was initially using a port of Flexible Squares, I've decided to be ambitious and try to replicate it as closely as possible on a native DW style so we can use all the cool features. For the most part it's working, but there are still some quirks I don't know how to fix, or if I can fix them. So.

Layout: Tabula Rasa, style sheet disabled.
Original layout:

scorched (

scorched to see it in its original, LJ form)
Current layout:

scorched_test

PROBLEM 1: The sidebar profile. I'd like to remove the header, center the icon and put the icon links in a horizontal list under the icon, preferably without that underline that I can't seem to get rid of. ¬_¬ [PROBLEM SOLVED]

PROBLEM 2: Change the link list/tag list on the sidebar (and the nav links in the header, for that matter) to a more blocklike display. (Visuals here: the way highlighted links look now - the way I'd like them to look. navlinks highlighted as i'd like - currently they don't highlight at all.) [PROBLEM SOLVED]

PROBLEM 3: Make the tags header match the rest of the headers. Not sure why this isn't happening now. [PROBLEM SOLVED]

PROBLEM 4: In general, I'd like to reduce the margin between the link lists (both Links and Tags) and the left side of the sidebar - can't figure out how to change that, either. [PROBLEM SOLVED]

PROBLEM 5: The icon and username. This is the bane of my life - is it possible to move the icon up to overlap with the title bar, and the username to, well, under the icon? (here is what I'm going for and here is what I currently have). [PROBLEM SOLVED] (I ended up using a combination of tricks from the comments here and altering the theme layer.)

PROBLEM 6: Also visible in the above pictures, the subject line and datetime. Nothing I do seems to move the datetime from the left to the right, and is there a way to put it ABOVE the subject line instead of under? [PROBLEM SOLVED] - kind of. I couldnt get the date to work properly above the subject so i tucked it in under. Either way, it's fine.

PROBLEM 7: Is there any way to get the sidebar to extend to the bottom of the page and the .pagetop link to the bottom, as well? as seen here, the link currently just hangs out at the bottom of the shortest column (also seen here) which is sort of awkward, and i'd prefer the sidebar continue long as seen on

scorched_ooc.

STRANGE RANDOM BONUS PROBLEM: If you go to

scorched_test you'll find that clicking a title link makes the title flash dark blue while active, as do the navlinks in the header. I CAN'T MAKE THEM STOP DOING THAT. DX I've tried various stylings on a:active for .header, .entry-title, even the general a:active but nothing seems to change it.

My current CSS, which is a bit of a frankenstein mess at the moment, my apologies.

/* BASIC */

body	{
		background-color: #444445;
		color: #606060;
		font-family:tahoma;
		font-size:12pt;
		text-align: center;
		margin: 0px 0px 0px 0px;
		}

.topnav li.page-back {display:none}

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

h3.entry-title, h3.entry-title a, h3.entry-title a:active, h3.entry-title a:visited, h3.entry-title a:hover {font-family: georgia; font-weight: lighter; font-size:24px; letter-spacing:1px;}

h2.module-header a, h2.module-header a:visited, h2.module-header a:active, h2.module-header a:hover {color: #cfd4d6; }

h2.module-header {padding: 5px; list-style: none; 	background-color: #a6adae; margin-bottom: 10px; 	margin-top: 5px; text-align: center; text-transform: uppercase; font-size: 15px!important; font-family: georgia!important; font-weight: normal; color: #cfd4d6;   }

a, a:link, a:visited {
		color: #99a1a2;
		text-decoration: none;
		}
	
	a:hover, a:active {
		color: #cfd4d6;
		}
	
	blockquote {
		background-color: #e8edf0;	
		color: #606873;
		font-family:tahoma;
		font-size:11px;
		text-align: justify;	
		margin: 3px 7px 3px 7px; 
		padding: 10px; 
border-top: 1px #99a1a2 solid;
border-bottom: 1px #99a1a2 solid;
		}
		
    	strong, b {
		font-weight: bold;
	}

em, i {
	}

code, kbd, pre, tt {
	    	font-family: monospace;
		}

#canvas {width:950px; margin:auto; BORDER-LEFT: #cfd4d6 15px solid; background-color: #99a1a2;}

/* HEADER */
#header {padding-top: 197px;
background-image: url('http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headermainpale2.jpg');
background-repeat: no-repeat;
background-position: center top;}

#title {display:none;}
#pagetitle {display:none;}

/* Main Structure */

#primary {width: 735px;	font-family:tahoma; font-size: 12px; text-align: justify; background-color: #fafaff; float: right; border-left: #cfd4d6 15px solid;
border-bottom: #cfd4d6 3px solid;}

#secondary {width: 200px; padding-top: 20px; margin-top: 0px; background-color: #99a1a2; color: #e0e3e4; font-family:tahoma; font-size:9pt; float: left; text-align: justify; background-image: url("http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headersidebar2.jpg");
background-repeat: no-repeat; }

/* Main Content */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
text-align: right;
display: none;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
font-size: 18px;
margin-right: 20px;
}

.entry-interaction-links {text-align: center;}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* ENTRIES */

.userpic {float: right; background-color: #cfd4d6!important; padding: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; z-index: 15; }

.entry-poster {float: right;}

.header {background-color: #a6adae!important; font-family: georgia; width: 100%; font-weight: lighter; margin-top:0px;}

.header a, .header a:visited, .header a:active, .header a:hover {color:#cfd4d6!important;}

.entry-title a, .entry-title a:visited, .entry-title a:hover, .entry-title a:active {font-size:24px; color:#cfd4d6!important;padding-left:20px}

.entry-content { margin-right: 130px; margin-left: 20px; padding-top:20px; padding-bottom:20px; border: 0px; bottom: 0px; color: #333333; }

.metadata {display:none;}

div.tag ul li { text-align: right; display: inline; list-style: none; font-weight: normal; margin: 5px 5px 0px 0px; }

div.tag { padding: 15px 0px 15px 20px; 	text-transform: lowercase;margin-right: 0px; }

span.tag-text { text-transform: lowercase;}

div.tag ul  { text-align: right; text-transform: lowercase; display: inline; }

li.link mem_add, li.link tell_friend {display: none;}

/* Sidebar */

#secondary {
		width: 200px;
		padding-top: 20px;
		margin-top: 0px;
		background-color: #99a1a2;
	  	color: #e0e3e4;
		font-family:tahoma;
		font-size:9pt;
		float: left;
		text-align: justify;
background-image: url("http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headersidebar2.jpg");
background-repeat: no-repeat;
		}
.module-content {margin:10px; }

.module-userprofile {height: 180px;}
.module-userprofile ul {list-style:none;}
.module-userprofile li {display: inline;}

.module-userprofile .userpic {margin: auto; border: #a6adae 5px solid; padding: 5px;}

.module-typelist a, .module-typelist a:visited { color: #f0f3f6; font-family:tahoma; font-size:9pt; }
.module-typelist a:hover, .module-typelist a:active {color: #99a1a2; text-decoration: none; background-color: #e8edf0;}
.module-typelist ul {list-style: none;}
.module-typelist li {list-style:none; display:block; 	border-bottom: 1px solid #a6adae; line-height: 20px;}

.module-tags_multilevel a, .module-tags_multilevel a:visited { color: #f0f3f6; font-family:tahoma; font-size:9pt; }
.module-tags_multilevel a:hover, .module-tags_multilevel a:active {color: #99a1a2; text-decoration: none; background-color: #e8edf0;}
.module-tags_multilevel ul {list-style: none;}
.module-tags_multilevel li {list-style:none; display:block; 	border-bottom: 1px solid #a6adae; line-height: 20px;}

.module-content ul {padding-left: 0px;	margin-left: 0px; list-style: none;
}

.module-content li {padding-left: 15px;	list-style: none; border-bottom: 1px solid #a6adae;  line-height: 20px;	margin-right: 15px; margin-left: 15px;	color: #454545;	font-family:tahoma; font-size:8pt; display: block;
}

div.module-navlinks { 
		font-size: 11px;
		position: absolute;
 		top: 0px;
 		z-index: 100px;
		margin: 0px 0px 0px 0;  
		font-weight: lighter;
		text-transform: uppercase;
		letter-spacing: 3px;
		line-height: 100%;
text-align: right;
width: 950px;
		color: #e0e3e4;
		}

div.module-navlinks ul.module-list {
 		display: inline;
		padding: 0; 
		margin: 0;  
border:0px!important;

}
		div.module-navlinks ul.module-list li { 
		display: inline; 
		margin: 0px 5px 20px 0; 
		list-style: none; 
		padding: 5px 5px 5px 5px; 
border:0px!important;
		}

.module-navlinks a, .module-navlinks a:visited {color:#f0f3f6;}

.module-navlinks a:hover; .module-navlinks a:active {background-color:#e0e3e4!important; padding: 5px;}

I do realize it's a different style altogether and not everything I'd like to do may even be possible, SO if that's the case, please let me know so I can stop banging my head against it. >.<

Sorry to hit you guys with so much at once, but any help with any of these issues at all would be so appreciated I might explode.

Tags:

myillusions

So I tried to do the color code change on the color for the nav. part of myillusions. I wanna get rid of that in the nav. part. Also how would I center the Navigation links. Is it also possible to center the comment links?
Thank you in advance

Tags:

module:navlinks

denig37

Layout: Halloween
by

dancing_serpent for ColorSide

Problem 1 : Header - I want to get rid of the journal title, subtitle and the "Recent" (or any nav title) SOLVED!
Problem 2 : Links at the bottom of entries (AKA edit entry, adit tags,...) - I want them to me white :-) SOLVED!
Problem 3 : Navi links - I want to move them under the header and centered. SOLVED!
Problem 4 : Subject of entries - is it possible to move them a few px to the right from the icon? And maybe making the font a bit bigger and in bold? SOLVED!
Problem 5 : I want to get rid of the "Previous 20/Next 20" links/bar at the top of the journal and only leaving the ones at the bottom. SOLVED!
Problem 6 : I would like to move everything (icon, subect, date, TEXT,...) a few px on BOTH sides from the border in the entries AND the module/sidebar. SOLVED!
Problem 7 : I would like to move the entries so when clicking on the "Reading/Friends" page (or any other for that matter) they would be at the same height as on the "Recent" page (AKA same distance from the header everywhere). SOLVED!

I'm totally new here and have no clue how to write CSS so if you managed to help me with these with some CSS coding or even just pointing me in the right direction and telling me what's possible and what not I would be super thankful and might possibly owe you my firstborn :-D
The DW confuses me and takes away my sleep :-( Please help! O.o

Current Mood: tired

Tags:

dhae_knight_1

I'm using Underworld for Crossroads, and the header is cooking my noodle. I would love to reduce the height of the header to... pretty much what's needed for the navigational elements, now I've figured out how to insert an image as title. I've checked the page source, but... either it's been way too long since I worked with CSS last, or the header elements are on an external style-sheet somewhere.

Can I do this at all, or do I need to make my very own style from scratch?

Also... I think I might like to move the navigation module to the left down just a smidgen. Anybody got pointers to that effect?

Current Mood: annoyed

Tags:

sharpiefan

Help!!

I've just set up a mirror community for one on LJ, and I want to move the nav links (recent entries/member posts/archive/profile) to the centre, under the header box.

Is there any way of doing that? And if so, could someone talk me through it - I'm not that confident with coding-type stuff.

Tags:

molotov

I really hope someone can help me!

I'm using the port of Flexible Squares, and I brought my old layout with me. The problem is that it uses images for navigation. On LJ, the active page shows in the nav module like this:

But on DW, the active page disappears from the nav, leaving me with this:

I feel like I'm overlooking something.

#header {
padding:5px 0;
text-align:right;
text-transform:lowercase;
z-index:100;}

#header:hover {margin: auto;}

ul.navheader {
list-style:none outside none;
margin: 20px auto 20px;
padding:0;
text-align: center;
z-index:100;
}

ul.navheader:hover {}

ul.navheader li {
display:inline;
list-style-type:none;
margin:0;}

.headerimage 
{
background-image:url();
background-repeat: no-repeat;
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#header a, div#header a:link, div#header a:visited {
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

div#header a:hover { 
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

div#header li.view { 
border:0 none;
font-size:0px;
padding:4px 6px;
color:transparent;
}

body.lj-view-recent div#header li.view {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0;
padding:22px 22px 0; }
body.lj-view-archive div#header li.view{ padding:25px 25px 0; background:transparent url(http://i54.tinypic.com/smayxx.png) no-repeat scroll 50% 0} 
body.lj-view-friends div#header li.view{ padding:22px 21px 0; background:transparent url(http://i55.tinypic.com/30lh0z7.png) no-repeat scroll 50% 0}

div#header a[href*=".dreamwidth.org/"] {
background:transparent url(http://i54.tinypic.com/14e8mix.jpg) no-repeat scroll 50% 0; padding:22px 22px 0; }

div#header a:hover[href*=".dreamwidth.org/"] {
background:transparent url(http://i55.tinypic.com/2wq7a69.png) no-repeat scroll 50% 0; padding:22px 22px 0; }

div#header a[href*="/archive"] {
background:transparent url(http://i51.tinypic.com/dzimja.jpg) no-repeat scroll 50% 0; padding:25px 25px 0; }

div#header a:hover[href*="/archive"] {
background:transparent url(http://i54.tinypic.com/smayxx.png) no-repeat scroll 50% 0; padding:25px 25px 0; }

div#header a[href*="/read"] {
background:transparent url(http://i54.tinypic.com/35nbzbn.jpg) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a:hover[href*="/read"] {
background:transparent url(http://i55.tinypic.com/30lh0z7.png) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a[href*="/profile"] {
background:transparent url(http://i53.tinypic.com/2s0h2yf.jpg) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a:hover[href*="/profile"] {
background:transparent url(http://i52.tinypic.com/2ag3hw9.png) no-repeat scroll 50% 0; padding:22px 21px 0; }

div#header a[href*="/tag"] {
display:none }
div#header a:hover[href*="/tag"] {
display:none }
div#header a[href*="/memories"] {
display:none }
div#header a:hover[href*="/memories"] {
display:none }

Any help would be much appreciated!!

Tags:

misstia

hi! i freely admit i have 'the dumbz'....i don't want to import my theme/style from LJ, i am okay with the one i found here on DW....i would like to customize the header though and i have zero clue how to do that and i tried to find some info in FAQs, etc and i might have been looking wrong???? (i totally was looking wrong!)

i am using 'purple' for my journal style....

i DID find the CSS code to remove the 'recent entries' from the header but didn't want to add that yet lest it interfere with future CSS code additions.....and i know i can get rid of the 'profile module' too once i get the header sorted out.....

i'd like to put my journal name in the center and then have links under it (within the header) for: profile, friend's page (reading page), link to my domain, archive....i think this is possible??? i did buy a premium account here (sooo impressed with DW and how they value their users! :) i just don't know how and got really confused trying to find out how to do this.....maybe i need a different style?

i do know html, i know enough CSS to fiddle with it, but can't write CSS on my own....so i hoping someone can direct me somewhere as i have searched, but obviously am not searching in the right place....i saw where i can import a LJ style/theme, but i just want to customize a DW one.....

thank you in advance!!!

ETA: Resolved!! THANK YOU!!! :-)

Tags:

scarletseraph

[ETA]: Solved!

Hullo!

I'm not so much an LJ refugee as that I keep an outpost on DW just in case. My layout over there has a lot of personal customzations - it's not one of the public themes; it's something I did the graphics and colours for myself, and not being able to reproduce it has been one of the things that's kept me from wanting to be as active on DW as I am LJ.

Well, I only just tonight found out that there's a tutorial on importing LJ styles (this one here, using the instructions for a Mixit import). While I have the layers created and compiled okay, I have run into one minor(?) problem... On LJ, I'm using Expressive as my base, which I'd gotten the impression was more-or-less the same as Mixit so I thought it might work alright. Apparantly there are more differences than I realized, because while the basics of the layout are there, there are features that have shifted around - the links specific to each entry are now in vertical colums rather than horizontal lines, as are my header links, and my sidebar is appearing at the bottom of the page (after my entires). (That's probably an obvious enough explanation, but in case it's not, this is how it looks on DW, and this it how it looks on LJ).

I don't generally mind trying to tweak things when I know what it is what I actually need to tweak, but I don't have the kind of mind that'll let me paw through code and find the problem. I'm assuming it's either an issue in the CSS somewhere (though I could be wrong) or there's an adjustment I could make to the CSS to compensate for the base code, but it's all just too much like an algebra problem for me and my dyscalculia to figure out. :/ Does anyone have suggestions for what I might be able to do to fix it, or know of a fix that's already in use - preferably one that doesn't involve having to switch to Mixit on LJ, trying to recreate the layout there, and copying it back to here? (Or is there a local style that might be suited to rigging a similar look on DW? I did glance through the themes here, but didn't see anything that seemed to be a good fit. I'm not averse to some changes, but I'd like to keep my header graphic/page background and colours/etc - and a lot of the local styles also have entry boxes that get squashed due to my monitor's resolution being on the lower end.)

[ETA]: Getting the links onto their lines seems to be more-or-less handled, now, so I'm left with:

- The sidebar not positioning properly
- Entry tags vertical-columning (though I suspect I may know how to fix this eventually, if I play around with things enough - now that i see how the link lines were fixed)

Tags:

runpunkrun

Hi folks, I'm using Modish set to two columns, but what I'd like to do is move one of my modules up to the top and have it display horizontally, which isn't an option in the wizard as far as I can see.

So my question is: Is it possible to make the navlink module horizontal? I want it directly under my header as a line of links, not the vertical stack in the sidebar it is now.

Any help is appreciated!

Tags:

majesdane

I was wondering if anyone had a fix for this ... I was helping a friend (

tiltingheartand), who wanted her DW layout to look exactly like her current one on LJ. The style she uses on LJ is "Quite Lickable," and I was able to find a coding adaption for a S2 layer style over here.

I haven't had any trouble tweaking small things here and there, but I can't seem to figure out out to hide the links for memories and tags in the sidebar. (For the record, I don't know how they're hidden on her LJ either, since I'm not very familiar with the QL style.) I tried using the two fixes suggested here, but neither of them has worked for me.

If anyone knows a way to fix this, I would be very much appreciative. :)

Layer coding:

layerinfo "type" = "layout";
layerinfo "name" = "Quite Lickable";
layerinfo "author_name" = "Martin Atkins";
layerinfo "redist_uniq" = "lickable/layout";
layerinfo "previews" = "lickable/preview1.jpg,lickable/preview2.jpg";
layerinfo "des" = "A fixed-width layout with drop shadows, various header styles and the possibility for introducing your own background images.";

## Customization Props

propgroup presentation {
    property bool opt_use_friendcolors {
        des = "Use friend colors on friends page";
        noui = 1; # The support for this isn't brilliant
    }
    set opt_use_friendcolors = false;

property bool opt_hide_userpics {
        des = "Hide userpics on recent entries and day pages";
    }
    set opt_hide_userpics = true;

property bool opt_show_user_linkele {
        des = "Show links to your memories, todo list, and add friend page in the sidebar";
    }
    set opt_show_user_linkele = true;

property use lang_fmt_date_short;
    property use lang_fmt_date_long;
    property use lang_fmt_time_short;

property use page_recent_items;
    property use page_friends_items;

property use use_shared_pic;
    property use view_entry_disabled;

# This layout has quite a hefty stylesheet, so let's
    # make it external to avoid loading it over and over.
    set external_stylesheet = true;

property int content_width {
        des = "Content area width in pixels";
    }
    set content_width = 750;

property int sidebar_width {
        des = "Sidebar width in pixels";
    }
    set sidebar_width = 230;

property bool side_borders {
        des = "Show borders at the sides of the content area";
    }
    set side_borders = true;

property string shadow_img_left {
        des = "Style of drop-shadow for the left of the page";
        values = "|None|shadow-l.png|Normal|shadow-l-small.png|Small";
    }
    set shadow_img_left = "shadow-l.png";

property string shadow_img_right {
        des = "Style of drop-shadow for the right of the page";
        values = "|None|shadow-r.png|Normal|shadow-r-small.png|Small";
    }
    set shadow_img_right = "shadow-r.png";

property string title_style {
        des = "Top heading style";
        note = "You can choose the colors to be used from the colors section.";
        values = "topglow|Top Glow|letters|Letters|explosion|Explosion|nature|Nature|camouflage|Camouflage|ramblings|Ramblings|clouds|Clouds|futuristic|Futuristic|bubbles|Circles|bubblewrap|Bubble Wrap|wires|Wires|urban|Urban|__custom|(Custom)||(None)";
    }
    set title_style = "wires";

property string{}{} title_styles {
        des = "A bunch of top heading style settings";
        noui = 1;
    }
    set title_styles = {
        "topglow" => { "type" => "tilex", "url" => "lickable/topgrad.png" },
        "letters" => { "type" => "deardiary" },
        "explosion" => { "type" => "deardiary" },
        "nature" => { "type" => "deardiary" },
        "camouflage" => { "type" => "deardiary" },
        "ramblings" => { "type" => "deardiary" },
        "clouds" => { "type" => "deardiary" },
        "futuristic" => { "type" => "deardiary" },
        "bubbles" => { "type" => "deardiary" },
        "bubblewrap" => { "type" => "deardiary" },
        "wires" => { "type" => "deardiary" },
        "urban" => { "type" => "deardiary" },
    };

property string title_style_custom_url {
        des = "Top heading custom background image";
        note = "If you selected 'Custom' as your heading style, you can enter a background image URL here.";
    }
    set title_style_custom_url = "";

property int title_style_custom_height {
        des = "Top heading custom height";
        note = "If you selected 'Custom' as your heading style, you can enter here how tall you wish the heading to be, in pixels.";
    }
    set title_style_custom_height = 75;

property bool title_notext {
        des = "Hide top heading text";
        note = "You might want to hide the system-supplied title text if you've used an image with its own text in it.";
    }
    set title_notext = false;

property bool title_separator {
        des = "Show line under title bar";
    }
    set title_separator = true;

property use linklist_support;
    property use custom_control_strip_colors;
}
propgroup colors {
    property Color clr_margins {
        des = "Page Background Color";
    }
    property Color clr_page_bg {
        des = "Main Content Background Color";
    }
    property Color clr_page_fg {
        des = "Main Content Foreground Color";
    }
    property Color clr_title_bg {
        des = "Title Background Color";
    }
    property Color clr_title_fg {
        des = "Title Text Color";
    }
    property Color clr_title_pattern {
        des = "Color of Title Background Effects";
        note = "The application of this color depends on your selection of heading style.";
    }
    property Color clr_title_separator {
        des = "Color of Line Under Title";
        note = "You must also enable the line in the Presentation section.";
    }
    property Color clr_side_borders {
        des = "Color of Side Borders";
        note = "You must also enable the borders in the Presentation section.";
    }
    property Color clr_link_normal {
        des = "Normal Link Color";
    }
    property Color clr_link_visited {
        des = "Visited Link Color";
    }
    property use control_strip_bgcolor;
    property use control_strip_fgcolor;
    property use control_strip_bordercolor;
    property use control_strip_linkcolor;

set clr_page_fg = "#000000";
    set clr_margins = "#0183fd";
    set clr_link_visited = "#0063c0";
    set clr_link_normal = "#0183fd";
    set clr_title_pattern = "#faf49a";
    set clr_side_borders = "#000000";
    set clr_page_bg = "#e3f1ff";
    set clr_title_bg = "#0063c0";
    set clr_title_fg = "#ffffff";
    set clr_title_separator = "#000000";
}
propgroup fonts {

property string{}{} font_sizes {
        des = "A bunch of font size settings";
        noui = 1;
    }
    set font_sizes = {
        "tiny" => {
            "body" => "10px",
            "pagetitle" => "25px",
            "pagesubtitle" => "14px",
            "dayhead" => "14px",
            "entryhead" => "12px",
        },
        "small" => {
            "body" => "12px",
            "pagetitle" => "25px",
            "pagesubtitle" => "14px",
            "dayhead" => "16px",
            "entryhead" => "14px",
        },
        "medium" => {
            "body" => "14px",
            "pagetitle" => "25px",
            "pagesubtitle" => "14px",
            "dayhead" => "18px",
            "entryhead" => "16px",
        },
        "large" => {
            "body" => "16px",
            "pagetitle" => "25px",
            "pagesubtitle" => "14px",
            "dayhead" => "20px",
            "entryhead" => "18px",
        },
        "huge" => {
            "body" => "18px",
            "pagetitle" => "25px",
            "pagesubtitle" => "14px",
            "dayhead" => "22px",
            "entryhead" => "20px",
        },
    };

property string font_body {
        des = "Font Family For Normal Text";
        note = "Specify a list of acceptable fonts in order of preference, most preferred first.";
    }
    set font_body = "\"Tahoma\", \"Georgia\", \"Helvetica\", \"Arial\", sans-serif";

property string font_sidebar {
        des = "Font Family For Sidebar";
        note = "Specify a list of acceptable fonts in order of preference, most preferred first.";
    }
    set font_sidebar = "\"Tahoma\", \"Georgia\", \"Helvetica\", \"Arial\", sans-serif";

property string font_title {
        des = "Font Family For Title";
        note = "Specify a list of acceptable fonts in order of preference, most preferred first.";
    }
    set font_title = "\"Tahoma\", \"Georgia\", \"Helvetica\", \"Arial\", sans-serif";

property string font_headings {
        des = "Font Family For Headings";
        note = "Specify a list of acceptable fonts in order of preference, most preferred first.";
    }
    set font_headings = "\"Tahoma\", \"Georgia\", \"Helvetica\", \"Arial\", sans-serif";

property string font_size_keyword {
        des = "Text Size";
        values = "tiny|Tiny|small|Small|medium|Medium|large|Large|huge|Huge";
    }
    set font_size_keyword = "tiny";

}
propgroup images {
    property string content_bg_img {
        des = "Content area background image URL";
        note = "Since you've chosen how big the sidebar will be in pixels, you could use this to add a sidebar background.";
    }
    set content_bg_img = "";

property string page_bg_img {
        des = "Main page background image URL";
        note = "Disable the shadows below for best results; the shadows will not automatically blend with the background.";
    }
    set page_bg_img = "";

property string page_bg_image_tile {
        des = "Main page background repeat mode";
        values = "no-repeat|Do not repeat|repeat-x|Repeat Horizontally|repeat-y|Repeat Vertically|repeat|Repeat both Horizontally and Vertically";
        note = "This won't have any effect unless you enter an image URL above.";
    }
    set page_bg_image_tile = "repeat-y";
}
propgroup text {
    property use text_view_recent;
    property use text_view_archive;
    property use text_view_friends;
    property use text_view_userinfo;

property string i18n_paraphernalia_journalinfo {
        des = "Journal Info Heading";
        note = "If you leave this blank, your configured name will be used.";
    }
    property string i18n_paraphernalia_journalinfo_blurb {
        des = "Journal Info Blurb";
        note = "You can write whatever you want in here; it'll get displayed next to your userpic.";
        rows = 10;
        cols = 25;
        string_mode = "html";
    }
    property string i18n_paraphernalia_viewsel {
        des = "View Selection Heading";
        noui = 1;
    }
    property string i18n_paraphernalia_links {
        des = "Link List Heading";
        noui = 1;
    }
    property string i18n_paraphernalia_recent_navigation {
        des = "RecentPage Navigation Heading";
        noui = 1;
    }
    property string i18n_paraphernalia_year_navigation {
        des = "YearPage Navigation Heading";
        noui = 1;
    }
    property string i18n_paraphernalia_entry_navigation {
        des = "EntryPage Navigation Heading";
        noui = 1;
    }
    property string i18n_paraphernalia_day_navigation {
        des = "DayPage Navigation Heading";
        noui = 1;
    }
    set i18n_paraphernalia_journalinfo = "";
    set i18n_paraphernalia_journalinfo_blurb = "";
    set i18n_paraphernalia_viewsel = "View";
    set i18n_paraphernalia_links = "Links";
    set i18n_paraphernalia_recent_navigation = "Navigation";
    set i18n_paraphernalia_year_navigation = "Year";
    set i18n_paraphernalia_entry_navigation = "Entry";
    set i18n_paraphernalia_day_navigation = "Navigation";

property string i18n_journalinfo_name {
        des = "Journal Name Caption";
        noui = 1;
    }
    property string i18n_journalinfo_website {
        des = "Journal Name Caption";
        noui = 1;
    }
    set i18n_journalinfo_name = "Name";
    set i18n_journalinfo_website = "Website";

property use text_post_comment;
    property use text_read_comments;
    property use text_post_comment_friends;
    property use text_read_comments_friends;
    property use text_website_default_name;
}
propgroup customcss {
    property use include_default_stylesheet;
    property use linked_stylesheet;
    property use custom_css;
}

# Navigation strip custom colors
    if ($*control_strip_bgcolor.as_string == "") {
        $*control_strip_bgcolor = $*clr_page_bg;
    }
    if ($*control_strip_fgcolor.as_string == "") {
        $*control_strip_fgcolor = $*clr_page_fg;
    }
    if ($*control_strip_bordercolor.as_string == "") {
        $*control_strip_bordercolor = $*clr_side_borders;
    }
    if ($*control_strip_linkcolor.as_string == "") {
        $*control_strip_linkcolor = $*clr_link_normal;
    }

$*theme_bgcolor = $*clr_page_bg;
    $*theme_fgcolor = $*clr_page_fg;
    $*theme_bordercolor = $*clr_side_borders;
    $*theme_linkcolor = $*clr_link_normal;
}

"""
#title {
    color: $*clr_title_fg;
    background-color: $*clr_title_bg;
    background-image: url("""+palimg_tint($url, $*clr_title_pattern, $*clr_title_bg)+""");
""";

if ($type == "tilex") {
        println "background-repeat: repeat-x;";
    }
    elseif ($type == "tiley") {
        println "background-repeat: repeat-y;";
    }
    elseif ($type == "tile") {
        println "background-repeat: repeat;";
    }
    elseif ($type == "notile") {
        println "background-repeat: no-repeat;";
    }

"""
}
""";
}

function heading_styles() "Styles for the top heading/title bar" {
    var string{} style = $*title_styles{$*title_style};

if ($style{"type"} == "deardiary") {
        heading_styles_deardiary();
    }
    elseif ($style{"type"} == "tilex" or $style{"type"} == "tiley" or $style{"type"} == "tile" or  $style{"type"} == "notile") {
        heading_styles_tile();
    }
    elseif ($*title_style == "__custom") {
        heading_styles_custom();
    }
    else {
        $*title_style_custom_url = "";
        $*title_style_custom_height = 75;
        heading_styles_custom();
    }
}

function pretty_styles() "Pretty stuff that's completely dispensible" {

var int top = ($*title_separator ? 79 : 75);
    var string{} size = $*font_sizes{$*font_size_keyword};

var int cwid = $*content_width;
    var int sbwid = $*sidebar_width;
    var int mcwid = $*content_width - $*sidebar_width - 25;
    var int shadowwid = 32;
    var int shackwid = $cwid + ($shadowwid * 2);
    if ($*side_borders) {
        $shackwid = $shackwid + 2;
    }

var Color darker_bg = $*clr_page_bg->darker(20);

var string bg_url;
    if (clean_url($*page_bg_img) != "") {
        $bg_url = $*page_bg_img;
    }
    else {
        $bg_url = palimg_tint("solid.png", $*clr_margins);
    }

"""

body {
    background: $*clr_margins """+$bg_url->css_url_value()+""";
    background-repeat: """+$*page_bg_image_tile->css_keyword(["no-repeat","repeat-x","repeat-y","repeat"])+""";
    background-position: center;
    color: $*clr_page_fg;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: $*font_body;
    width: 100%;
    height: 100%;
}
body, td, table, th, tr {
    font-size: $size{"body"};
}

#shadowhack1 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: ${shackwid}px;
    background-image: url("""+palimg_tint("lickable/$*shadow_img_left", $*clr_margins)+""");
    background-position: top left;
    background-repeat: repeat-y;
    min-height: 150%;
}

#shadowhack2 {
    margin: 0;
    background-image: url("""+palimg_tint("lickable/$*shadow_img_right", $*clr_margins)+""");
    background-position: top right;
    background-repeat: repeat-y;
    min-height: 100%;
}

#pagecontainer {
    background-color: $*clr_page_bg;
""";
if (clean_url($*content_bg_img) != "") {
    println "background-image: url($*content_bg_img);";
}
"""
    color: $*clr_page_fg;
    margin-left: ${shadowwid}px;
    margin-right: ${shadowwid}px;
""";
if ($*side_borders) {
"""
    border-left: 1px solid $*clr_side_borders;
    border-right: 1px solid $*clr_side_borders;
""";
}
"""
}

a:link {
    color: $*clr_link_normal;
}
a:visited {
    color: $*clr_link_visited;
}

#title {
    color: $*clr_title_fg;
    background-color: $*clr_title_bg;
""";
if ($*title_separator) {
"""
    border-bottom: 4px solid $*clr_title_separator;
""";
}
"""
    font-family: $*font_title;
    overflow: hidden;
}
#title h1 {
    font-size: $size{"pagetitle"};
    font-weight: bold;
    margin: 0;
    padding-top: 20px;
    padding-left: 8px;
    white-space: no-wrap;
}
#title #journal_subtitle {
    font-size: $size{"pagesubtitle"};
    font-weight: bold;
    margin: 0;
    padding-left: 8px;
    white-space: no-wrap;
    margin-bottom: 5px;
}
""";

heading_styles();

if ($*title_notext) {
"""
#title h1, #title #journal_subtitle {
    display: none;
}
""";
}

"""

#paraphernalia {
    float: right;
    width: ${sbwid}px;
    font-family: $*font_sidebar;
}
#paraphernalia h2 {
    font-size: $size{"dayhead"};
    font-weight: bold;
    text-align: left;
    margin-top: 16px;
    margin-bottom: 8px;
}
#paraphernalia .pbox {
    margin-left: 8px;
    margin-right: 8px;
    clear: both;
}
#journalinfouserpic {
""";

if ($*i18n_paraphernalia_journalinfo_blurb != "") {
"""
    float: left;
    margin-right: 6px;
    margin-bottom: 6px;
""";
}
else {
"""
    text-align: center;
""";
}

"""
}
.pboxcontent {
    margin-left: 8px;
    margin-right: 8px;
}
.pbox dt {
    font-weight: normal;
    margin-top: 4px;
}
.pbox dd {
    padding: 0;
    margin-left: 24px;
}
.pbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pbox ul ul {
    margin-left: 24px;
}
.pbox li {
    margin: 0;
    padding: 0;
}
.pbox li.current {
    font-weight: bold;
}
.pbox p {
    margin: 8px 0;
}

#main {
    margin: 0;
    min-height: 1024px;
    padding: 0 10px 0 0;
    width: ${mcwid}px;
    float: left;
}
* html #main {
    height: 1024px; /* IE-only hack */
}

.day h2 {
    font-size: $size{"dayhead"};
    font-weight: bold;
    font-family: $*font_headings;
    margin: 10px;
}

.entry {
    margin: 16px 16px 16px 10px;
}
.entryheader {
    font-size: $size{"entryhead"};
}
.entryheader .entrytimestampdate {
    display: none;
}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate {
    display: inline;
}

.comments .entry {
    margin-left: 0;
    margin-bottom: 8px;
}
.comments .entry .entryheader {
    background: $darker_bg;
}

.calendarmonth {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
    margin-bottom: 2em;
}
.calendarmonth td, .calendarmonth th {
    padding: 0.5em;
    margin: 0;
}
.calendarmonthlink {
    text-align: center;
}
.calendarmonthheader h2 {
    font-size: $size{"entryhead"};
    margin: 0;
}

.page_month #main form, .page_month #main dl {
    margin: 8px;
}

#server_sig {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    width: ${mcwid}px;
}

div.ljtags { display: inline; }

input, textarea {
    font-family: $*font_body;
    font-size: $size{"body"};
}

.journallinkbar {
    text-align: center;
}

""";

print_custom_control_strip_css();
}

function necessary_styles() "Styles which are likely to be needed whatever stylesheet is in use" {
"""
.entry {
margin-bottom: 2em;
/*clear: both;*/
}

.entry .entryheader {
font-weight: bold;
text-align: left;
}

.entry .entryheader h3 {
font-size: 1em;
margin: 0;
padding: 0;
}

.entryheader .entryicon {
float: right;
margin-right: 1em;
}

.entryheader .entryuserpic {
float: right;
margin-top: 2em;
clear: right;
display: block;
padding: 3px;
""";
if ($*opt_hide_userpics) {
"""
display: none;
}
.page_friends .entryheader .entryuserpic {
display: block;
""";
}

"""
}

.entryheader .entryposter {
display: inline;
float:left;
margin-right: 1em;
}
.entryheader .entryposter:after {
content: ": ";
}
.entryposter img, .collapsed_entry img {
height: 12px;
width: 10px;
}

.entryheader .entrytimestamp {
display: inline;
}

.entrysubject A:link, .entrysubject A:visited, .entrysubject A:hover, .entrysubject A:visited {
     color: $*clr_page_fg;
     text-decoration: none;
}

.entrylinkbarpre, .entrylinkbarpost {
display: none;
}
.page_entry .entrylinkbarpre, .page_reply .entrylinkbarpre {
display: block;
float: right;
}

.entry .entrycontent {
margin: 8px;
}

.entrymeta {
list-style: none;
padding: 0;
margin: 0 0 0.5em 0;
display: block;
}
.entrymeta .entrymetacaption {
font-weight: bold;
}
.entrymeta li {
white-space: no-wrap;
}

.entry .entryfooter {
clear: both;
margin: 0;
}

.entryfooter .entrycmdlinks {
list-style: none;
vertical-align: middle;
margin: 0; padding: 0em;
white-space: no-wrap;
text-align: right;
}
.entryfooter .entrycmdlinks:before {
content: "(";
}
.entryfooter .entrycmdlinks:after {
content: ")";
}

.entrycmdlinks li {
display: inline;
}
* html .entrycmdlinks li {
margin-left: 1em;
}
.entrycmdlinks li:before {
content: " - ";
}
.entrycmdlinks li:first-child:before {
content: "";
}

.comments {
    list-style: none;
    padding: 0;
    margin-left: 50px;
}
.comments .comments {
    margin-left: 25px;
}
.comments > li {
    margin: 0;
    padding: 0;
}
.calendardaynum { text-align: right; }
.calendardaycount { text-align: center; }
.calendarday {
width: 14%;
}
.itemrange {
    list-style: none;
    padding: 0;
    margin: 0.5em;
    text-align: center;
}
.itemrange li {
    display: inline;
    margin: 0 0.25em;
}
.itemrange li a:before, .itemrange li.current:before {
    content: "[";
}
.itemrange li a:after, .itemrange li.current:after {
    content: "]";
}
""";
}
function custom_styles() "User layers can override this to add extra CSS to the stylesheet" {}

## Everything after this point should be common to all Cascadadelic layouts

function UserLite::lay_as_string() : string {
    var Image uiimg = userinfoicon($this);
    var string dir = $.journal_type == "C" ? "community" : "users";
    return "<span class='ljuser_$.username' style='white-space:nowrap;'><a href='$*SITEROOT/userinfo.bml?user=$.username'><img src='$uiimg.url' alt='[info]' width='$uiimg.width' height='$uiimg.height' style='vertical-align:bottom;border:0;' /></a><a href='$*SITEROOT/$dir/$.username/'><b>$.username</b></a></span>";
}

function print_stylesheet() {
    necessary_styles();
    pretty_styles();
    custom_styles();
}

function Page::lay_print_heading() {
    print safe "<h1>$.global_title</h1>";
    if ($.view == "recent" and $.global_subtitle != "") {
        print safe """<div id="journal_subtitle">$.global_subtitle</div>""";
    }
    else {
        print safe """<div id="journal_subtitle">"""+$this->view_title()+"""</div>""";
    }
}
function Page::lay_print_journalinfo() {
    paraphernalia_box_open("journalinfo",
        ($*i18n_paraphernalia_journalinfo != "" ? $*i18n_paraphernalia_journalinfo : $.journal.name)
    );
    if (defined $.journal.default_pic) {
        println """<div id="journalinfouserpic">$.journal.default_pic</div>""";
    }
    if ($*opt_show_user_linkele) {
        """<div class="journallinkbar">"""; $.journal->print_linkbar(); """</div>""";
    }
    if ($*i18n_paraphernalia_journalinfo_blurb != "") {
        println "<p>$*i18n_paraphernalia_journalinfo_blurb</p>";
    }
    paraphernalia_box_close("journalinfo",$*i18n_paraphernalia_journalinfo);
}
function Page::lay_print_viewsel() {
    paraphernalia_box_open("viewsel",$*i18n_paraphernalia_viewsel);
    "<ul>\n";
    foreach var string vl ($.views_order) {
        if ($vl == $.view) {
            print "<li class=\"current\">"+lang_viewname($vl)+"</li>\n";
        } else {
            print "<li><a href=\""+ehtml($.view_url{$vl})+"\">"+lang_viewname($vl)+"</a></li>\n";
        }
    }
    "</ul>\n";
    paraphernalia_box_close("viewsel",$*i18n_paraphernalia_viewsel);
}
function Page::lay_print_userlinks() {
    if (size $.linklist <= 0 or not $*linklist_support) {
        return;
    }
    paraphernalia_box_open("userlinks",$*i18n_paraphernalia_links);
    $this->print_linklist();
    paraphernalia_box_close("userlinks",$*i18n_paraphernalia_links);
}
function Page::lay_print_viewspec() {}
function Page::lay_print_viewspec_after() {}
function Page::lay_print_custom_paraphernalia() "User layers can override this to add extra paraphernalia" {}

function Page::lay_print_paraphernalia() "User layers can override this to change what appears in the paraphernalia section" {
    $this->lay_print_journalinfo();
    $this->lay_print_viewsel();
    $this->lay_print_viewspec();
    $this->lay_print_custom_paraphernalia();
    $this->lay_print_userlinks();
    if (viewer_sees_vbox()) {
        paraphernalia_box_open("", "");
        """<div style="margin-top: 16px;">""";
        $this->print_vbox();
        "</div>";
        paraphernalia_box_close("", "");
    }
}

function lang_posting_in(UserLite poster, UserLite journal) : string "Return the string 'poster posting in journal'; I18n layers should override this." {
    return $poster->lay_as_string()+" posting in "+$journal->lay_as_string();
}

function EntryLite::lay_print_icon() {}
function EntryLite::lay_print_metadata() {}
function EntryLite::lay_print_cmdlinks() {}
function EntryLite::lay_print_poster() {
    if (defined $.poster) {
        print """<div class="entryposter">$.poster</div>""";
    }
    else {
        print safe """<div class="entryposter">$*text_poster_anonymous</div>""";
    }
}
function Entry::lay_print_poster() {
    var Page p = get_page();
    if ($p.view == "recent" and $.poster->equals($.journal)) {
        return;
    }
    if ($p.view == "friends") {
        print """<div class="entryposter">""";
        if (not $.poster->equals($.journal)) {
            print lang_posting_in($.poster, $.journal);
        }
        else {
            print $.poster->lay_as_string();
        }
        print """</div>""";
    }
    else {
        print """<div class="entryposter">"""+$.poster->lay_as_string()+"""</div>""";
    }
}

function Entry::lay_print_icon() {
    if ($.security != "") {
        """<div class="entryicon">""";
        print $.security_icon->as_string("[$.security]");
        "</div>";
    }
}
function Comment::lay_print_icon() {
    if (defined $.subject_icon) {
        """<div class="entryicon">""";
        print $.subject_icon->as_string("");
        "</div>";
    }
}

function Entry::lay_print_metadata() {
    if (size $.metadata == 0 and size $.tags < 1) {return;}
    println """<ul class="entrymeta">""";
    if ($.metadata{"groups"} != "") {
        println """<li><span class="entrymetacaption">$*text_meta_groups:</span> $.metadata{"groups"}</li>""";
    }
    if ($.metadata{"location"} != "") {
        println """<li><span class="entrymetacaption">$*text_meta_location:</span> $.metadata{"location"}</li>""";
    }
    if ($.metadata{"mood"} != "") {
        print """<li><span class="entrymetacaption">$*text_meta_mood:</span> """;
        if (defined $.mood_icon) {
            print $.mood_icon->as_string() + " ";
        }
        println """$.metadata{"mood"}</li>""";
    }
    if ($.metadata{"music"} != "") {
        println """<li><span class="entrymetacaption">$*text_meta_music:</span> $.metadata{"music"}</li>""";
    }
    if ((size $.tags) > 0) {
        println """<li><span class="entrymetacaption">Tags:</span> """+$this->get_tags_text()+"""</li>""";
    }
    println """</ul>""";
}
function Comment::lay_print_metadata() {
    if ($.metadata{"poster_ip"} != "") {
        println """<ul class="entrymeta">""";
        println """<li><b>Poster IP Address:</b> $.metadata{"poster_ip"}</li>""";
        println """</ul>""";
    }
}

function CommentInfo::print_postlink() {
    var Page p = get_page();
    if ($.maxcomments) {
        print safe "$*text_max_comments";
    } else {
        if ($p.view == "entry") {
                $p->print_reply_link({"target" => "topcomment", "linktext" => $*text_post_comment});
        } else {
        print safe "<a href=\"$.post_url\">"+($p.view == "friends" ? $*text_post_comment_friends : $*text_post_comment)+"</a>";
       }
    }
}

function Entry::lay_print_cmdlinks() {
    if ($.comments.show_readlink or $.comments.show_postlink) {
        """<ul class="entrycmdlinks">""";
        if ($.comments.show_readlink) {
            "<li>"; $.comments->print_readlink(); "</li>";
        }
        if ($.comments.show_postlink) {
            "<li>"; $.comments->print_postlink(); "</li>";
        }
        println """</ul>""";
     ### $p->print_reply_container({"target" => "topcomment"});
    }
}

function Comment::lay_print_cmdlinks() {
    println """<ul class="entrycmdlinks">""";
    if ($.reply_url != "") {
        println """<li>""";
        
        ### $this->print_reply_link({"linktext" => $*text_comment_reply});

if($.screened == true) {
            ### if comment screened - show link for unscreen
            var Link link;
            $link = $this->get_link("unscreen_to_reply");
            """<a href="$link.url" title="$link.caption">$link.caption</a>""";
        } else {
            ### showing reply link if comment not screened
            $this->print_reply_link({ "linktext" => $*text_comment_reply });
        }

"""</li>""";
    }
    if ($.parent_url != "") {
        println """<li><a href="$.parent_url">$*text_comment_parent</a></li>""";
    }
    if ($.thread_url != "") {
        println """<li><a href="$.thread_url">$*text_comment_thread</a></li>""";
        var Link expand_link = $this->get_link("expand_comments");
        if (defined $expand_link) {
            println "<li>" + $this->expand_link() + "</li>";
        }
    }
    println """</ul>""";
    $this->print_reply_container({"class" => "quickreply"});
}

function Page::lay_print_entrylite(EntryLite e) {
if($e isa Comment){
    """<div class="entry" id="$e.dom_id">""";
}else{
    """<div class="entry">""";
}
"""<div class="entryheader">
<h3 class="entrysubject">""";
    if ($.view != "entry") { 
        var Entry en = $e as Entry;
        print $en->formatted_subject({"class"=>"subj-link"});
    } else { "$e.subject"; }

"</h3>";
    $e->lay_print_poster();
"""<div class="entrytimestamp">""";
if ($e.depth > 0) { # If $e is a comment
    """<span class="entrytimestampdate">"""+$e->time_display("short", "")+"</span>";
} else {
    """<span class="entrytimestampdate">"""+$e.time->date_format("short")+"""</span>
    <span class="entrytimestamptime">"""+$e.time->time_format()+"""</span>""";
}
"""</div>""";

$e->lay_print_icon();
"""<div class="entrylinkbarpre">"""; $e->print_linkbar(); """</div>
""";
    if (defined $e.userpic) {
        """<div class="entryuserpic">$e.userpic</div>""";
    }
"""</div>

<div class="entrycontent">""";
$e->print_text();
"""</div>

"""; $e->lay_print_metadata(); """
<div class="entrylinkbarpost">"""; $e->print_linkbar(); """</div>
"""; $e->lay_print_cmdlinks();

if($e isa Entry){
   $this->print_reply_container({"target" => "topcomment"});
}

"""

</div>
</div>""";
}
function Page::print_entry(Entry e) {
    $this->lay_print_entrylite($e);
}
function EntryPage::print_comment(Comment c) {
    if ($c.full) {
        $this->lay_print_entrylite($c);
    }
    else {
        var string subject = ($c.subject ? $c.subject : "<i>(no subject)</i>");
        """<div class="collapsed_entry" id="$c.dom_id"><a href="$c.permalink_url">$subject</a> - $c.poster""";
        var Link expand_link = $c->get_link("expand_comments");
        if ($c.thread_url != "" and defined $expand_link) {
            " " + $c->expand_link();
        }
        """</div>""";
    }
}

function Page::lay_print_viewspec_head() {}
function FriendsPage::lay_print_viewspec_head() {
    if (not $*opt_use_friendcolors) { return; }
    println """<style type="text/css">""";
    start_css();
    foreach var string f ($.friends) {
        println ".ljuser_$f { background: $.friends{$f}.bgcolor none; color: $.friends{$f}.fgcolor; padding: 0 0.25em;}";
    }
    end_css();
    println """</style>""";
}

function Page::print() {
   """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   """;
    $this->print_head();
    $this->print_stylesheets();
    $this->lay_print_viewspec_head();
    println safe """<title>"""+$this->title()+"""</title>""";
"""
</head>

<body class="page_$.view">
""";

$this->print_control_strip();

"""
<div id="shadowhack1">
<div id="shadowhack2">

<div id="title">
"""; $this->lay_print_heading(); """
</div>
""";

if (viewer_sees_hbox_top()) {
    """<div style="text-align: center; margin-top: 2px;">""";
    $this->print_hbox_top();
    "</div>";
}

"""
<div id="paraphernalia">
"""; $this->lay_print_paraphernalia(); """
</div>

<div id="main">
"""; $this->print_body(); """
</div>

"""; $this->lay_print_viewspec_after(); """

<div id="server_sig">"""; server_sig(); """</div>""";

if (viewer_sees_hbox_bottom()) {
    """<div style="text-align: center;">""";
    $this->print_hbox_bottom();
    "</div>";
}

"""</div>

</div>
</div>

</body>
</html>""";

}

## Some general page stuff

function Page::print_linklist() {
    if (size $.linklist <= 0) {
        return;
    }

var bool section_open = false;

println "<ul>";
    foreach var UserLink l ($.linklist) {
        if ($l.title) {
            if ($l.is_heading) {
                if ($section_open) {
                    println "</ul></li>";
                }
                println """<li><span style="font-weight: bold;">$l.title</span>\n<ul>""";
                $section_open = true;
            } else {
                println """<li><a href="$l.url">$l.title</a></li>""";
            }
        } else {
            println """<li> </li>""";
        }
    }
    if ($section_open) {
        println "</ul></li>";
    }
    println "</ul>";
}

## RecentPage Stuff
function lang_skipped_back(RecentNav nav) : string
"Return short text saying how many entries have been skipped back. i18n layers should override this."
{
    return "Skipped Back $nav.skip";
}

function lang_adjacent_skip(RecentNav nav, bool next) : string
"Return either 'Previous N' or 'Next N' depending on the value of the 'next' parameter"
{
    if ($next) {
        return "Next $nav.forward_count";
    }
    else {
        return "Previous $nav.backward_count";
    }
}

function RecentPage::lay_print_viewspec() {
    if ($.nav.backward_url != "" or $.nav.forward_url != "") {
        paraphernalia_box_open("recentnav",$*i18n_paraphernalia_recent_navigation);
        if ($.nav.skip > 0) {
            println "<p>"+lang_skipped_back($.nav)+"</p>";
        }
        println """<ul>""";
        if ($.nav.backward_url) {
            println """<li><a href="$.nav.backward_url">"""+lang_adjacent_skip($.nav,false)+"""</a></li>""";
        }
        if ($.nav.forward_url) {
            println """<li><a href="$.nav.forward_url">"""+lang_adjacent_skip($.nav,true)+"""</a></li>""";
        }
        println "</ul>";
        paraphernalia_box_close("recentnav",$*i18n_paraphernalia_recent_navigation);
    }
}

function RecentPage::print_body() {
    foreach var Entry e ($.entries) {
        if ($e.new_day) {
            """<div class="day" id="day"""+$e.time->date_format("%%yyyy%%%%mm%%%%dd%%")+"\">\n";
            println "<h2>"+$e.time->date_format("long")+"</h2>";
        }
        # Print the entry
        $this->print_entry($e);
        if ($e->viewer_sees_ebox()) {
            """<div style="text-align:center">""";
            $e->print_ebox();
            "</div>";
        }
        if ($e.end_day) {
            "</div>";
        }
    }
}

## YearPage Stuff
function YearPage::lay_print_viewspec() {
    paraphernalia_box_open("yearnav",$*i18n_paraphernalia_year_navigation);
    $this->print_year_links();
    paraphernalia_box_close("yearnav",$*i18n_paraphernalia_year_navigation);
}
function YearPage::print_body {
    println """<div id="calendarmonthcontainer">""";
    foreach var YearMonth m ($.months) {
        $this->print_month($m);
    }
    println "</div>";
}
function YearPage::print_year_links() {
    """<ul class="viewspecnavbar">\n""";
    foreach var YearYear y ($.years) {
        if ($y.displayed) {
            """<li class="current">$y.year</li>\n""";
        } else {
            """<li><a href="$y.url">$y.year</a></li>\n""";
        }
    }
    """</ul>\n""";
}
function YearPage::print_month(YearMonth m) {
    if (not $m.has_entries) { return; }
    """<table class="calendarmonth">\n
       <tr><th colspan="7" class="calendarmonthheader">""";
    print "<h2>"+$m->month_format()+"</h2>\n";
    """</th></tr><tr>\n""";
    foreach var int d (weekdays()) {
        "<th>"+$*lang_dayname_short[$d]+"</th>\n";
    }
    "</tr>\n";
    foreach var YearWeek w ($m.weeks) {
        $w->print();
    }
    print safe """<tr><td colspan="7" class="calendarmonthlink">
        <a href="$m.url">$*text_view_month</a></td></tr>\n""";
    "</table>";
}
function YearWeek::print() {
   """<tr valign="top" style="height: 3em;">\n""";
   if ($.pre_empty > 0) {
      """<td class="emptyday" colspan="$.pre_empty"> </td>\n""";
   }
   foreach var YearDay d ($.days) {
       """<td class="calendarday">\n""";
       """<div class="calendardaynum">$d.day</div>\n""";
       if ($d.num_entries > 0) {
           """<div class="calendardaycount"><a href="$d.url">$d.num_entries</a></div>\n""";
       }
       """</td>\n""";
   }
   if ($.post_empty > 0) {
      """<td colspan="$.post_empty"> </td>\n""";
   }
   "</tr>";
}

# EntryPage and ReplyPage stuff
function EntryPage::lay_print_pager() {
    if ($.comment_pages.all_subitems_displayed) { return; }
    print "<ul class=\"itemrange\">";
    foreach var int i (1 .. $.comment_pages.total) {
        if ($i == $.comment_pages.current) {
            print "<li class=\"current\">$i</li>";
        }
        else {
            print "<li><a href=\""+$.comment_pages->url_of($i)+"\">$i</a></li>";
        }
    }
    print "</ul>";
}
function EntryPage::print_body() {
    $this->lay_print_entrylite($.entry);
    if ($.entry->viewer_sees_ebox()) {
        """<div style="text-align:center">""";
        $.entry->print_ebox();
        "</div>";
    }
    $this->lay_print_pager();
    $this->print_comments($.comments);
    $this->lay_print_pager();
}
function ReplyPage::print_body() {
    $this->lay_print_entrylite($.replyto);
    if ($.entry->viewer_sees_ebox()) {
        """<div style="text-align:center">""";
        $.entry->print_ebox();
        "</div>";
    }
    """<div id="commentform">""";
    $.form->print();
    """</div>""";
}

function EntryPage::print_comments (Comment[] cs) {
    if (size $cs == 0) { return; }
    """<ul class="comments">\n""";
    foreach var Comment c ($cs) {
        var int indent = ($c.depth - 1) * 25;
        print "<li>";
        $this->print_comment($c);
        $this->print_comments($c.replies);
        println "</li>";
    }
    """</ul>""";
}

# DayPage stuff

function DayPage::lay_print_viewspec() {
    paraphernalia_box_open("daynav",$*i18n_paraphernalia_day_navigation);
    println """<ul>""";
    if ($.prev_url) {
        println """<li><a href="$.prev_url">"""+$.prev_date->date_format()+"""</a></li>""";
    }
    if ($.next_url) {
        println """<li><a href="$.next_url">"""+$.next_date->date_format()+"""</a></li>""";
    }
    println "</ul>";
    paraphernalia_box_close("daynav",$*i18n_paraphernalia_day_navigation);
}
function DayPage::print_body() {
    "<div class=\"day\" id=\""+$.date->date_format("%%yyyy%%%%mm%%%%dd%%")+"\">\n<h2>";
    print $.date->date_format("long");
    "</h2>\n";
    if ($.has_entries) {

foreach var Entry e ($.entries) {
            $this->print_entry($e);
            if ($e->viewer_sees_ebox()) {
                """<div style="margin-bottom: 10px; text-align: center;">""";
                $e->print_ebox();
                "</div>";
            }
        }

"</div>";
    } else {
        """<div class="entry"><div class="entryheader"> </div>\n""";
        """<div class="entrycontent"><p>$*text_noentries_day</p></div>\n""";
        """<div class="entryfooter"> </div></div></div>\n""";
    }
    
}

# Heading styles
    var string{} style = $*title_styles{$*title_style};
    var string type = $style{"type"};
    var string url = $style{"url"};
    var string heading_bg = "";
    var string heading = "";
    if ($type == "deardiary") {
        $heading_bg = palimg_tint("deardiary/titleimages/${*title_style}.png", $*clr_title_bg, $*clr_title_pattern);
        $heading = "color: $*clr_title_fg; background-color: $*clr_title_bg; background-image: url($heading_bg); background-repeat: no-repeat; background-position: top right; height: 75px;";
    }
    elseif ($type == "tilex" or $type == "tiley" or $type == "tile" or $type == "notile") {
        var string bg_repeat = "";
        if ($type == "tilex") {
            $bg_repeat = "background-repeat: repeat-x;";
        } elseif ($type == "tiley") {
            $bg_repeat = "background-repeat: repeat-y;";
        } elseif ($type == "tile") {
            $bg_repeat = "background-repeat: repeat;";
        } elseif ($type == "notile") {
            $bg_repeat = "background-repeat: no-repeat;";
        }

$url = ($url == "" ? "lickable/${*title_style}.png" : $url);
        $heading_bg = palimg_tint($url, $*clr_title_pattern, $*clr_title_bg);
        $heading = "color: $*clr_title_fg; background-color: $*clr_title_bg; background-image: url($heading_bg); $bg_repeat";
    }

"""
    <div style="margin-top: 0; margin-bottom: 0; width: ${shackwid}px; background-image: url($shadow_left); background-position: top left; background-repeat: repeat-y;">
        <div style="margin: 0; background-image: url($shadow_right); background-position: top right; background-repeat: repeat-y;">
            <div style="background-color: $*clr_page_bg; color: $*clr_page_fg; margin-left: ${shadowwid}px; margin-right: ${shadowwid}px; $side_borders">
                <div style='color: $*clr_title_fg; background-color: $*clr_title_bg; $title_separator font-family: $*font_title; overflow: hidden; $heading'>
                    <h1 style="color: $*clr_title_fg; font-size: $pagetitle_size; font-weight: bold; margin: 0; padding-top: 20px; padding-left: 8px; white-space: no-wrap;">Nunc tincidunt sollicitudin orci</h1>
                </div>

<div style="margin: 0; padding: 0 10px 0 0;">
                    <h2 style='color: $*clr_page_fg; font-size: $dayhead_size; font-weight: bold; font-family: $*font_headings; margin: 10px;'>November 25th, 2006</h2>
                    <div style="margin: 16px 16px 16px 10px;">
                        <div style="font-size: $entryhead_size; font-weight: bold; text-align: left;">
                            <h3 style="color: $*clr_page_fg; font-style: normal; font-size: 1em; margin: 0; padding: 0;">Lorem ipsum dolor sit amet</h3>
                            <div style="display: inline;">04:58 pm</div>
                        </div>

<div style="font-size: $body_size; margin: 8px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt sollicitudin orci. Vivamus sollicitudin arcu non mi lobortis lacinia. Sed quis orci. Vestibulum in risus sit amet lectus gravida pellentesque. Curabitur faucibus risus eu pede hendrerit eleifend. Nunc vitae odio. Praesent turpis velit, venenatis vitae, accumsan quis, aliquam scelerisque, diam. Nulla fringilla dapibus nulla. Sed in sapien sit amet odio eleifend venenatis. Nunc neque ipsum, convallis id, volutpat eget, bibendum placerat, magna. Integer commodo, nunc eu faucibus tincidunt, est lectus sodales purus, pulvinar pretium purus diam sollicitudin justo. Nulla facilisi. Vivamus eleifend. Fusce sodales dui sit amet dolor.</div>

<div style="margin: 0;">
                            <div style="font-size: $body_size; list-style: none; vertical-align: middle; margin: 0; padding: 0em; white-space: no-wrap; text-align: right;">
                                (<a style="color: $*clr_link_normal;" href="#">3 comments</a> - <a style="color: $*clr_link_normal;" href="#">Leave a comment</a>)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    """;
}

Child layer coding:

## Important note: Hand-edited changes to this layer have a high risk of 
## being erased the next time you use the wizard. Setting properties is 
## usually safe, but if you put entire functions, they *will* be overwritten.

layerinfo "type" = "user";
layerinfo "name" = "Auto-generated Customizations";
set clr_link_normal = "#000044";
set clr_link_visited = "#000044";
set clr_margins = "#000000";
set clr_page_bg = "#bbbbbb";
set clr_title_bg = "#ffffff";
set content_width = 800;
set font_size_keyword = "small";
set include_default_stylesheet = true;
set linklist_support = false;
set opt_hide_userpics = false;
set opt_show_user_linkele = false;
set shadow_img_left = "";
set shadow_img_right = "";
set side_borders = false;
set text_post_comment = "give it away";
set text_post_comment_friends = "give it away";
set text_read_comments = "1 liar// # liars";
set text_read_comments_friends = "1 liar// # liars";
set text_view_archive = "my wretched pride";
set text_view_friends = "or in the quarries";
set text_view_recent = "papers & books";
set text_view_userinfo = "and run";
set title_notext = true;
set title_separator = false;
set title_style = "__custom";
set title_style_custom_height = 300;
set title_style_custom_url = "http://img836.imageshack.us/img836/4072/00019zdc.png";

Tags:

icarly

I'm trying to use THIS layout from LJ. But if you look at my journal,

icarly you can see it's not exactly the same. I'm not sure how to get rid of the TAGS and MEMORIES links at the top, can someone help?

Tags:

tenacitas

I'm brand new to DW, I used to be around LJ a lot, but after their latest attempt at trying to "fix" things that did not need to be fixed, I felt like it was the very last drop and decided to jump ship-- As I'm sure many more will, after all, why are we paying people to only make our life more difficult with their "updates", right?

But here is the thing: I don't know anything (and I truly mean anything) about CSS or HTML.

Yes, I was able to find a tutorial made by a very, very kind soul, explaining how to pass the Flexible Squares layout over here-- Something that I have accomplished! Same with the custom CSS I used to have, back then.

Problem is, for some reason, in the navigation bar at the header, besides the usual "Recent Posts", "Friends", "Archive" and "Profile" that we can change the texts for, I now also have a "Tags" and "Memories" on the bar.

I thought I could possibly figure out how to make them disappear on my own, but, well, turns out I can't.

The case in question is not on this account, which I will be "prettifying", later today, but if someone could give me some lights as to how to make those two options disappear from the navigation bar (or, at least, how to change the text for them) I would appreciate tons!

Thanks a lot in advance!

Tags:

valiha

Hi all, I just tried to edit some of the navlinks text in customize journal style (http://www.dreamwidth.org/customize/options?group=text), but navigation, entry and options aren't clickable, and neither is expand all. What might be the reason for this?

Current Mood: confused

Tags:

feathertail

Okay ... I can style all the navmenu items using .module-navlinks ul li a, but I'm trying to only style one of them. Like, say, the last one on the right on

becomeyourfursona, with the custom1 class, that was added using a custom layer.

I've tried .module-navlinks .custom1 ul li a and various other permutations, including just straight .custom1 a, but none of it works. (It doesn't work on the other, non-custom menu items, either.) Firebug doesn't even show the rules as having been overridden; they just aren't there.

Is this is something I need S2 for -- and if so, where I can find out how to do CSS using S2? Because I remember earlier I tried changing the names of the menu items, and it only worked for "Recent Entries" and didn't work for "Reading." I suspect that menu items that have been modded in some way using a custom layer can't be customized further using the front-end.

Tags:

module:navlinks

Profile

Dreamwidth style system discussion

April 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Syndicate

Page Summary

misbegotten - Fluid Measure: Nav Module
bcboomerangs - Navigation Links in Gold Leaf
6thirty - How to get rid of the underline of navigation links, as well as the size of the bar and font
ex_awakened208 - Putting previous and next links with the other navigation links.
extempore - Header custom menu, User Name size and position
unicorn - (no subject)
alovelyburn - Trying to replicate an LJ layout!
myillusions - Questions for Modular
denig37 - New at DW and CSS and needing help *puppy eyes*
dhae_knight_1 - Reducing header height?
sharpiefan - Moving the nav links in Basic Boxes
molotov - Showing the active page in the nav module in Flexible Squares
misstia - lj refugee having 'the dumbz'....
scarletseraph - Reproducing layout / Links & sidebar in wrong place?
runpunkrun - horizontal navlinks in Modish? [solved]
majesdane - Hiding Memories/Tags links using a Quite Lickable layer style. [solved]
icarly - (no subject)
tenacitas - Hey everyone!
valiha - Cannot edit text in customize journal style
feathertail - How to style custom menu items using CSS?

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated May. 28th, 2025 03:14 am

Dreamwidth style system discussion

Entries tagged with module:navlinks

Fluid Measure: Nav Module

Navigation Links in Gold Leaf

How to get rid of the underline of navigation links, as well as the size of the bar and font

Putting previous and next links with the other navigation links.

Header custom menu, User Name size and position

(no subject)

Trying to replicate an LJ layout!

Questions for Modular

New at DW and CSS and needing help puppy eyes

Reducing header height?

Moving the nav links in Basic Boxes

Showing the active page in the nav module in Flexible Squares

lj refugee having 'the dumbz'....

Reproducing layout / Links & sidebar in wrong place?

horizontal navlinks in Modish? [solved]

Hiding Memories/Tags links using a Quite Lickable layer style. [solved]

(no subject)

Hey everyone!

Cannot edit text in customize journal style

How to style custom menu items using CSS?

Profile

April 2025

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags