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

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.

Flat | Top-Level Comments Only

the underline problem: text-decoration:none!important; should solve it.

to change the size of the navbar, find .module and add width:XXX;. you may need to adjust the size of the entries too or they may overlap with the navbar.

you can change the font sizes in .module-content.

i hope this helps! :)

Edited 2016-09-04 20:04 (UTC)

Thank you so much! Just one question, why do I have to use !important in order to override the previous code? This is the first time I ever had to use !important. Is there any other way to fix it without !important?

you can fix the problem without !important, but it means you have to look for the exact bit of code that's causing the problem.

in your case, there is an instruction in the css somewhere that gives all the links in the body an underline. one way of fixing that is finding that particular bit of code and changing it, but if there's more than one instance of it, it's going to take some time.

another way is by adding a {text-decoration:none;} at the bottom of your css. instructions added last usually override previous instructions.

the third way is using !important. what !important does is it makes the instruction override all other instructions throughout the page. that means that if someone makes a post and adds a custom style in the html of the post, !important can override that too.

i'm not sure how well i explained it. if you're still confused about !important, here are some articles which will probably explain it way better than me:
- http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
- https://css-tricks.com/when-using-important-is-the-right-choice/
- http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

Thank you so much for explaining it to me! It was so helpful!

glad i could help! :)

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

no subject

Thank You!

Re: Thank You!

Re: Thank You!

Re: Thank You!