style_system | Entries tagged with page:navigation

So I'm trying to add the Previous/Next links to my Navlinks Module using a code that was previously posted here, but I'm having issues with the Previous link showing up regardless of whether or not there's previous entries (I'm testing on this journal with public entries for reference).

The code I'm using in my theme layer is this:

# code by ninetydegrees/foxfirefey
function print_module_navlinks() {
 
  var Page p = get_page();
  var string prev_link;
  var string next_link;
  
  if ( $p isa EntryPage ) {
      var EntryPage ep = get_page() as EntryPage;
      var Entry e = $ep.entry;
      var Link prev = $e->get_link("nav_prev");
      $prev_link = """<a href="$prev.url">$prev.caption</a>""";
      var Link next = $e->get_link("nav_next");
      $next_link = """<a href="$next.url">$next.caption</a>""";
  } elseif ( $p isa DayPage ) {
      var DayPage dp = get_page() as DayPage;
      $prev_link = """<a href="$dp.prev_url">$*text_day_prev</a>""";
      $next_link = """<a href="$dp.next_url">$*text_day_next</a>""";
  } elseif ( $p isa RecentPage ) {
      var RecentPage rp = get_page() as RecentPage;
      if ( $rp.nav.backward_count > 0 ) { 
          $prev_link = """<a href="$rp.nav.backward_url">""" + get_plural_phrase( $rp.nav.backward_count, "text_skiplinks_back" ) + "</a>"; 
      }
      if ( $rp.nav.forward_count > 0 ) { 
          $next_link = """<a href="$rp.nav.forward_url">""" + get_plural_phrase( $rp.nav.forward_count, "text_skiplinks_forward" ) + "</a>"; 
      }
  } elseif ( $p isa MonthPage ) {
      var MonthPage mp = get_page() as MonthPage;
  	if ($mp.prev_url != "") { $prev_link = "<a href='$mp.prev_url'>Previous</a>"; }
  	if ($mp.next_url != "") { $next_link = "<a href='$mp.next_url'>Next</a>"; }
  }

var string[] navlinks_order = [];
  var string{} navlinks_urls = {};
  var string{} navlinks_text = {};
 
  $navlinks_order =
    [
        "entries",
        "archive",
        "read",
        "profile",
    ];
 
 $navlinks_urls =
    {   "profile" => "$p.base_url/profile",
        "entries" => "$p.base_url",  
        "archive" => "$p.base_url/archive",
        "read" => "$p.base_url/read",

};
 
 $navlinks_text =
    {   "profile" => "Profile",
        "archive" => "Archive",        
        "read" => "Read",        
        "entries" => "Recent",      
        
    };

open_module("navlinks", "", "");
    var string[] links = [];
    
    if ( $prev_link ) {
        $links[size $links] = $prev_link;
    }    
    
    foreach var string k ($navlinks_order) {
        if ($navlinks_urls{$k} != "") {
            var string css = """ class="$k" """;
            if ($p.view == $k) { $css = """ class="current $k" """; }
            $links[size $links] = """<a href="$navlinks_urls{$k}"$css>$navlinks_text{$k}</a>""";
        }
    }
    
    if ( $next_link ) {
        $links[size $links] = $next_link;
    }
     
    
    print_module_list($links);
    close_module();
}

Tags:

the_wildlings

hello kind code-mages,

we are using the dark forest style for transmogrified. we have 2 questions.

1) is it possible to make the navigation strip display in custom colours, on a style where that is not an option on the customisation page (such as our current one)? both of the default colour gradients hurt our eyes.

2) is there a way to customise the colours of the text input box & dropdown menu box in the navigation strip (for the sitewide search function)? despite our accessibility settings, they are defaulting to a glaring white background with black text, which is painful for us.

we read through the ~color, page:navigation & navigation strip tags, and did not find these answers. could any generous wizards help us?

thankyou very much in advance.

Tags:

makiyakinabe

Here is an example of what my journal looks like.

I don't know when or how it happened, but the colored boxes (backgrounds?) that my navigation links were in have disappeared. I'm using the theme 'Fruit Salad by renoir for Leftovers' and I can still see what the colors of the boxes ought to be when I go to the theme customization, but no matter how much I click on 'Save Changes' the boxes are still gone when I go back to my journal.

How can I fix this?

(Thanks in advance!)

Tags:

page:navigation

tropicsbear

I'm using a customized layout for Tabula Rasa where the navigation links have been replaced by icons in a sidebar. The icons aren't displaying anymore and I haven't been able to get them to show up because my CSS knowledge is super basic orz

Here's the specific bit of the code that deals with the navigation links:

Thanks in advance!

Tags:

page:navigation

momijizukamori

We had a code push last night! With that push comes a handful of style-related updates.

1) Navigation menu LIs are now directly targetable! No more extra spacing or having to muck around with nth-child syntax - they now have the class 'list-item-'.

2) Librarian's Dream will now use header images correctly instead of covering them up with background fill.

3) Custom styles that don't use the default stylesheet will now get the <meta name="viewport" content="width=device-width, initial-scale=1.0"/> tag as well - this may cause older layouts that weren't designed for mobile to look a little wonky on it. You can turn this off in your account settings by checking 'Turn off mobile view for this device'.

4) The Advanced Layers section now has a new editor that actually has the features people expect in a code editor in 2019 instead of being a glorified textarea.

Tags:

lynnenne

I have 7 menu items displayed in my "Navigation" menu but I only want the following 4:

My journal's home page (user.dreamwidth.org)
Archive
Reading page
Profile

The menu items I want to remove are Network, Tags and Memories. Is there a way to do this without hiding the whole Nav menu?

(Ideally, I would also like to hide the "Navigation" heading at the top of the menu, or at least change the text to something else.)

Thank you!

Tags:

deanshot1

I'm using style Heads Up, I was originally using my imported LiveJournal one but I wanted them to look different.

I was wondering if there is anyway to move the Navigation link from the top of my journal to the bottom. It appears on both the top and the bottom once I go back through my journal entries but I only want to have them on the bottom not the top.

I have no idea how to do CSS, the only thing I did know was how to put in my own header image.

Any help will be greatly appreciated.

Problem solved in comments.

Current Mood: confused

Tags:

page:navigation

6thirty

Hi everyone!

I made another layout for a community I recently created. The problem I have is not bieng able to relocate the previous and next links to where I want them to go. It doesn't help that the previous and next links overlap by 1px over the navigation/menu bar. I have no idea how to move them.

Here is the entire layout's css:

/* 
base style: blanket
layout name: windshield
6thirty.dreamwidth.org
*/
body { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 12pt; text-align: left; line-height: normal;
background: #010101 url('http://i.imgur.com/ZWtaVob.png') repeat; background-position: left bottom; background-attachment: fixed;
margin: 0; padding: 0; }

a, a:link, a:visited  {  color: #A3D0C8; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in; 
-o-transition: color 1s ease-in; }

a:hover, a:active:hover { color: #76B0A1; }

q { font-style: italic; }

b {}

strong {}

i {}

em {}

blockquote { color: #010101; font-family: Helvetica, Tahoma, sans-serif; font-size: 8pt; 
border-left: 6px solid #768fa3; border-right: 6px solid #768fa3; border-radius: 25px;
float: center; margin: 20px 20px 20px 20px; padding: 10px; width: 75%;
-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms; 
text-shadow: rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }

blockquote:hover { border-color: #dbe3ee; font-style: italic; 
padding-left:50px; }

input, textarea { color: #888888; line-height: 0px;
background-color: #ffffff; border: solid 1px #eeeeee;
padding: 5px; }

img { opacity: 0.1; }

img:hover { opacity: 1; }

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

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

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

/* contextual pop-up */
.contextualpopup { color: #010101; 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: #010101; text-align: left; font-family: Helvetica, Tahoma, sans-serif; text-decoration: none;
background-color: #ffffff; background-image: none; 
opacity: 0.1; position: fixed; }

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

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

#lj_controlstrip_statustext { color: #010101; }

#lj_controlstrip a, #lj_controlstrip a:link, #lj_controlstrip a:visited  { color: #76B0A1; }

#lj_controlstrip a:hover, #lj_controlstrip a:active:hover { color: #A3D0C8; }

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

#lj_controlstrip_login td { border-bottom: 0; }

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

/* header, footer */
#header { background-color: #ffffff;
margin: 0 auto 2em; display: none; }

#header>.inner { border-left: 20px solid #f2ebd7;
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; display: none; }

.navigation { text-align: left; text-transform: uppercase; }

li.page-back, li.page-forward { font-size: 10pt; 
background: #ffffff;
display: block; margin: 0; padding: 25px; float: right; opacity: 0.1; }

li.page-back:hover, li.page-forward:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

li.page-back { display: block; width: 355px; left: 25px; }

li.page-forward { display: block;width: 355px; right: 25px; }

li.page-separator { display: none; }

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

.navigation li { display: inline; }

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

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

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

/* navigation */
.module-navlinks { color: #000000;
background-color: #ffffff;
bottom: 0; margin: 0 auto; padding: .75em; position: fixed; width: 100%; z-index: 100; opacity: 0.1; }

.module-navlinks:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.module-navlinks a, .module-navlinks a:link, .module-navlinks a:visited { color: #76B0A1; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in;
-o-transition: color 1s ease-in; }

.module-navlinks a:hover, .module-navlinks a:active { color: #A3D0C8 }

.module-navlinks ul.module-list { letter-spacing: -0.5px; text-transform: none;
display: inline; 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; }

/* modules */
#secondary { color: #888888;
background-color: #ffffff;
margin: 0 auto; padding: 0; z-index: 0; display: none; }

#secondary>.inner { border-left: 20px solid #f2ebd7;
padding: 4em 2em; }

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

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

#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  { text-decoration: none; }

#secondary a:hover, #secondary a:active {  }

.module-tags_cloud { border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
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 { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.entry:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

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

.entry a, .entry a:link, .entry a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.entry a:hover, .entry a:active { color: #A3D0C8 }

.entry img { opacity: 0.1; }

.entry img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

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

h3.entry-title { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 20pt; font-weight: normal; letter-spacing: -0px; text-transform: uppercase;
margin: 0; padding: 0; }

h3.entry-title a, h3.entry-title a:link, h3.entry-title a:visited { color: #76B0A1; }

h3.entry-title a:hover, h3.entry-title a:active { color: #A3D0C8; }

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

.datetime { color: #010101; font-size: 9pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.datetime a, .datetime a:link, .datetime a:visited { color: #76B0A1; }

.datetime a:hover, .datetime a:active { color: #A3D0C8; }

.entry .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.entry .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.poster a, .poster a:link, .poster a:visited { color: #76B0A1; }

.poster a:hover, .poster a:active { color: #A3D0C8; }

.page-recent .entry-poster { display: none !important; }

.page-entry .entry-poster { display: none !important; }

/* 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: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
padding: 0; }

.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: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0; }

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

ul.entry-management-links li { color: #c8c8c8; font-size: .9em; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0 5px 0 0; }

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

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

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

.comment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 0 150px 0; padding: 25px; opacity: 0.1; }

.comment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment a, .comment a:link, .comment a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.comment a:hover, .comment a:active { color: #A3D0C8 }

.comment .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.poster-ip { font-size: 9pt; }

.comment .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment img { opacity: 0.1; }

.comment img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

.comment .poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.comment .admin-poster { color: #010101;
background-color: #ffffff; }

.comment-title { font-size: 20px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; text-trasform: uppercase;
margin: 0; }

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

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

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

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

.bottomcomment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 auto 2em; padding: 25px; opacity: 0.1; }

.bottomcomment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.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; opacity: 0.1; }

/* archive */
li.active { color: ##010101; text-align: center; text-transform: uppercase;
display: none; }

.month { color: #888888;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.month:hover { opacity: 1; }

.month h3 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
margin: 0; padding: 0;}

.month th { color: #ffffff;  font-size: 8pt; font-weight: normal; text-align: center; text-transform: uppercase;
background-color: #76B0A1;
padding: 5px; }

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

.month caption { display: none; }

td.day { border: .1em solid #76B0A1;
padding: .5em; }

.month td.day-has-entries { color: #010101; background: #ffffff; font-weight: normal; text-align: left; }

.month td.day-has-entries p { font-size: 1.14em; font-weight: b; text-align: left; }

.month td.day-has-entries p a, .month td.day-has-entries p a:link, .month td.day-has-entries p a:visited { color: #76B0A1; }

.month td.day-has-entries p a:hover, .month td.day-has-entries p a:active { color: #A3D0C8; }

.month dl, .month dt, .month dd { margin: 0; padding: 0; }

/* tags */
.page-tags .tags-container { color: #010101; text-align: left; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.page-tags .tags-container:hover { opacity: 1; }

.page-tags .tags-container a, .page-tags .tags-container a:link, .page-tags .tags-container a:visited { color: #76B0A1; }

.page-tags .tags-container a:hover, .page-tags .tags-container a:active { color: #A3D0C8; }

.page-tags .tags-container h2 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
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: ##010101;
background-color: #ffffff; border-left: 20px solid #f2ebd7;
margin: 0 auto 2em; padding: 4em 2em; }

.icons-container a, .icons-container a:link, .icons-container a:visited  { color: ; }

.icons-container a:hover, .icons-container a:active { color: ; }

.icons-container h2 { color: #099aaf; font-size: 1em; font-weight: normal; letter-spacing: 1px; text-align: right; text-transform: lowercase;
margin: 0; padding: 0; }
    
.sorting-options ul { text-align: right;
padding-left: 0; }

.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: underline; }

.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; }

Tags:

oyceter

Does anyone know if it's possible to change anything in the print_navigation function? The source code says it's fixed.

Basically, I wanted to change the Previous/Next navigation links to add an anchor link to skip to the bottom of the page (i.e. like "Bottom | Previous 20 | Next 20") and to change the look of the navigation links for the year page to make the

[<<<]

and

[>>>]

into

<<

and

>>

. I can probably add another element before or after the navigation links, but it would look nicer if the links were editable...

Tags:

page:navigation

meinterrupted

When they did the newest code push, I kind of fell in love with the Lefty theme. It's clean and gorgeous, and I just adore it. But I also have a thing for gradiations and rainbows in layouts, so now I'm thinking. I know the code I need to do to make the changes, I just don't know where I need to put it and if I need to make a whole new style to do it.

Basically, what I need to do is create 5 or 6 new class ids for the LI that make up the top navigation (which are currently "module-list-item"--I was planning on going for the creatively named "module-list-item-2" etc.) and then change the background color on those classes. That would allow me to have a lovely rainbow or multiple shades of the same colors or whatnot.

So... do I need to make a whole new style/layer? I'm a premium paid account, so that itself isn't the issue. I used to be pretty fluent in S2, but it's been, uh, several years, and in between the code changes and my brain writing over that information with mostly useless trivia, I'm stuck.

ETA: ( Code for multiple colors under cut )

ETA2: Thanks to

syntheid and

ninetydegrees, I have sort-of figured out the customs CSS for this layout. My next question is closely related. Is there a way to link the color of the page header background to the color of the current page's link? E.g. on "recent" it would be green, "archive" yellow, "reading" red, etc.?

Current Mood: confused

Tags:

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:

alyndra

Hi, I've finally started messing around a bit with customizing my journal style, and I was wondering how I can remove the footer. I never use the link to Top of Page and it takes up a lot of space. I looked around this community but didn't see an answer, any help would be appreciated!

ETA: Solved. Thanks,

branchandroot!

Tags:

misstia

I have received help here before to customize my page (thank you!!) but i have one more request. at the very bottom of my page there's a dark bar (footer?) that has a link to 'top of page', try as i might when going through my customize options, i cannot find where that is....i would LIKE it to be a link for the next 20 entries---navigation....there's no bottom navigation at all....

i have seen posts here requesting navigation at the bottom, but the custom CSS includes removing it from the top...i don't have it on the top, and i have custom CSS on the top of my page and i don't want to mess that up.....

i obviously have a severe case of dumbz here, but i'd rather ask before messing with the custom CSS someone graciously made for me!

ETA: SOLVED!!! :-)

Tags:

page:navigation

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:

nenena

Hello! I checked the archive and tags here and couldn't find this question being asked before, so here goes:

I'm using a slightly modified version of this beautiful layout by

boo. Unfortunately, I'm not too fond of the "Next | Previous" navigation bar appearing at both the top and the bottom of my reading page. Is there a way to modify the CSS so that the "Next | Previous" bar appears ONLY at the bottom of the page?

ETA: Solved! Thank you!!

Tags:

marahmarie

A few weeks ago foxfirefey gave me wonderful code that produces a link back to the top of the page (Transmogrified normally lacks this link). I love it and have gently coaxed it to do everything I want except stop moving around. It has a mind of its own so depending on what resolution you use, it will hop, skip and jump all over the place.

I've been unable to conjure any CSS and/or HTML that will keep it in place.

The only resolution it currently behaves at is 1440 x 900 - my native res - because I beat it down hard until it did. But when you change screen res, it waltzes off wherever the heck it feels like it.

Examples at three resolutions:

Can anyone tell me how to make it behave? I've tried floats, absolute positioning, margins, padding, text-align:center - it's all failed to tame it.

Tags:

page:navigation

marahmarie

Many Dreamwidth s2/Core2 styles have the "back to top" link at the bottom of the Recent Entries view, but Transmogrified doesn't. I had the same problem on LJ, when I used the Bloggish layout with a custom style sheet and theme layer, but I couldn't solve it, not even by modifying s2 Mixit's code to fix the problem, because Bloggish lacked a "back to top" link in the HTML to hook the s2 to.

So my question is kind of two-fold:

Is there any way to get all the proper HTML (including the necessary but missing HTML links and the requisite s2 to make it all work) into Transmogrified, and if so, how?

Because my other problem is I cannot figure out how DW's s2 differs from LJ's version of it. So I would need someone to work out the code for me but hopefully someone who could also explain how s2 differs on DW from LJ's version (or at least point me in the right direction, if there's something I can read on that to make it more clear).

Because the way I figure it, if I can't read (that is, understand) the s2 on DW, I'll never be able to modify or write it. And I want to be able to do both.

Current Mood: confused

Tags:

jana

I'm working on a Transmogrified layout and I have a few questions:

[1] How do I add an image as a journal/community title, instead of plain text? The title image should also link to the journal/community in question, just like the plain text title does.

[2] I'd like to place the search module above the journal/community title. How do I do this?

[3] How's the (theme layer) code for the .page-back and .page-forward link in Transmogrified? I don't like the '<<' and '>>' very much which is why I want to remove them. [Edit: I just realized that it is done with css, so you can consider the problem solved.]

As always, help and advice is very much appreciated.

Tags:

mmeg

Is there a way to add the "previous 5" (or 10 or whatever) link to the navigation bar at the top of my recent entries, reading and network pages? I'm using Mixit, which I believe is a Core1 LJ style.

ETA: Also I figured out how to reverse the order of the entries on my reading page (for values of figured out which equal bugging the Support people), but it didn't reverse the order of my Page Summary. I wonder if there's a way to do that. (I care about this much less than the first question.)

Tags:

anguisel

I'm new to DW and need some help. I'm fooling around with Modular right now on my journal and have hit a snag. I want to shorten the journal header, previous 5 and the top of page footer to the left so it's even with what I've done so far. What coding would effect these? At first I though header and whatnot but nothing so far has worked.

Tags:

Profile

Dreamwidth style system discussion

February 2026

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

Syndicate

Page Summary

wishfulfilled - Navlinks Issue With Custom Override
the_wildlings - customising navigation strip colours in transmogrified
makiyakinabe - Navigation links help please?
tropicsbear - Missing navigation icons
momijizukamori - Style-related Code Updates
lynnenne - Help with Navigation Menu
deanshot1 - Help needed, Problem solved
6thirty - I want to know how to fix the previous 10 and next 10 links
oyceter - Changing navigation links in style
meinterrupted - Lefty customization (rainbow/gradiation)
ex_awakened208 - Putting previous and next links with the other navigation links.
alyndra - (no subject)
misstia - bottom navigation where the 'top of page' link is.....
denig37 - New at DW and CSS and needing help *puppy eyes*
nenena - Previous/Next links at both top and bottom of page?
marahmarie - Hi, style_systemers, a question about link positioning...
marahmarie - Add "back to top" link to Transmogrified with s2 custom theme layer?
jana - [Solved] Adding a title image and a couple of other things
mmeg - Previous entries link
anguisel - Modular help - Header and others

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated Feb. 16th, 2026 10:14 am

Dreamwidth style system discussion

Entries tagged with page:navigation

Navlinks Issue With Custom Override

customising navigation strip colours in transmogrified

Navigation links help please?

Missing navigation icons

Style-related Code Updates

Help with Navigation Menu

Help needed, Problem solved

I want to know how to fix the previous 10 and next 10 links

Changing navigation links in style

Lefty customization (rainbow/gradiation)

Putting previous and next links with the other navigation links.

(no subject)

bottom navigation where the 'top of page' link is.....

New at DW and CSS and needing help puppy eyes

Previous/Next links at both top and bottom of page?

Hi, style_systemers, a question about link positioning...

Examples at three resolutions:

Add "back to top" link to Transmogrified with s2 custom theme layer?

[Solved] Adding a title image and a couple of other things

Previous entries link

Modular help - Header and others

Profile

February 2026

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags