5 replies [Last post]
snocutt
snocutt's picture
Offline
newbie
ma
Last seen: 4 years 33 weeks ago
ma
Timezone: GMT-4
Joined: 2010-03-31
Posts: 3
Points: 4

This is all to change the color of one menu link in a weebly site.
I want to change the last item, which is the word QUOTE to a unique color when not hovered over or at.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>
%%TITLE%%</title>
 
</head>
<body>
<div id="container">
 
 
  <div id="header_img" class="weebly_header">
    <div>&nbsp;</div>
  </div>
 
<ul id="nav">
  %%MENUITEMSTART%%<li><a href="%%MENUITEMLINK%%">%%MENUITEMTITLE%%</a></li>%%MENUITEMEND%% 
  %%MENUITEMACTIVESTART%%<li><a class="current" href="%%MENUITEMACTIVELINK%%">%%MENUITEMACTIVETITLE%%</a></li>%%MENUITEMACTIVEEND%% 
  </ul>
 
 
  <div id="content_box">
  %%CONTENT%%
  </div>
 
  <div id="footer">
  <p class="center"><span id='weeblyFooter'></span>
 
    <a href="http://www.tensul.com/contact.html">CONTACT</a>
    <p>   </p>
    <a href="http://designs.tensul.com/">TENSUL designs</a>
 
    </p>
  </div>
 
<div style='height: 1px; overflow: hidden; clear: both;'></div>
 
</div>
 
  <div style='display:none;'>%%MENU%%</div>
  <!--<div style='padding: 20px; width:50%; text-align:center;'>%%WEEBLYFOOTER%%</div>-->
</body>
</html>

/*
Theme Name:        PressCut Theme
Theme URI:         <a href="http://www.isulongseophil.com/themes/
Description:" rel="nofollow">http://www.isulongseophil.com/themes/
Description:</a>      A fresh, clean, XHTML and CSS validated theme for WordPress by <a href="http://www.isulongseophil.com">Gio</a> based on <a href="http://cutline.tubetorial.com">Cutline Theme</a> originally designed and coded by <a href="http://pearsonified.com">Chris Pearson</a>.
Version:        1.0
Author:          Gio
Author URI:        <a href="http://www.isulongseophil.com" rel="nofollow">http://www.isulongseophil.com</a>
*/
 
.img_ { border: #CCCCCC ; }
 
body { color: #333; background: url() repeat-y scroll  50% 0; font: 62.5% Georgia, "Times New Roman", Times, serif; text-align: center; }
 
* { padding: 0; margin: 0; }
/*---:[ global elements ]:---*/
 
a { color: #909090; background-color: #ffffff; text-decoration: underline; }
 
  a:visited { color: #A0A0A0; background-color: #ffffff; text-decoration: underline;}
 
  a:hover { color: #8DC919; background-color: #ffffff; text-decoration: underline; }
 
  a img { border: none; }
 
blockquote { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #555; background-color: #ffffff; margin: 0 30px 1.5em 30px; padding: 0 0 0 10px; border-left: 1px solid #aaa; }
 
abbr, acronym { border-bottom: 1px dotted #333; text-transform: uppercase; cursor: help; }
 
code { color: #090; background-color: #ffffff; font-family: Monaco, "Courier New", Courier, monospace; }
 
pre { width: 500px; margin: 0 0 1.5em 0; overflow: auto; font-size: 1.3em; float: left; clear: both; }
 
* html pre { font-size: 1.0em; }
 
p.center { text-align: center !important; }
 
p.bottom { margin: 0 !important; }
 
p.unstyled { font-size: 1.4em; }
 
.flickr_blue { color: #00ae4; background-color: #ffffff; text-transform: lowercase; }
 
.flickr_pink { color: #ff2a96; background-color: #ffffff; text-transform: lowercase; }
/*---:[ headlines ]:---*/
 
h1, h2, h3 { font-weight: bold; font-family: Helvetica, Arial, sans-serif; }
 
h1 { font-size: 36px; letter-spacing: -0.03em; }
 
* html h1 { letter-spacing: -0.1em; }
 
  #masthead h1 { padding: 0.4em 0; border-top: 0px solid #ccc; text-align: center; clear: both; }
 
  h1 a { color: #3888B4; background-color: #ffffff; text-decoration: none; }
  h1 a:visited { color: #3888B4; background-color: #ffffff; text-decoration: none; }
  h1 a:hover { color: #8DC919; background-color: #ffffff; text-decoration: none; }
 
h2 { font-size: 20px; margin: 10px 0; color: #8DC919; background-color: #ffffff; }
 
  h2 a { text-decoration: none; color: #8DC919; background-color: #ffffff; }
 
  h2 a:visited { text-decoration: none; color: #8DC919; background-color: #ffffff; }
 
  h2 a:hover { text-decoration: none; color: #3888B4; background-color: #ffffff; }
 
  .posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }
 
  .pages h2, h2.page_header { margin: 0 0 0.5em 0; padding: 0 0 0.6em 0; background: url('hr_title_sep.gif') 0 100% no-repeat; }
 
  h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #000 !important; background: url('hr_dot_black.gif') 0 100% repeat-x !important; }
 
h3 { font-size: 1.0em; text-transform: uppercase; }
 
  .entry h3 { margin: 2.5em 0 0.5em 0; }
 
  .entry h3.top { margin: 1.5em 0 0.5em 0 !important; }
 
  h3.comments_headers { font-size: 1.4em; }
 
h4 { font: 1.1em Georgia, "Times New Roman", Times, serif; color: #B0B0B0; background-color: #ffffff; }
 
  h4 a, h4 a:visited { color: #333; background-color: #ffffff; text-decoration: none; }
 
  h4 a:hover { color: #8DC919; background-color: #ffffff; text-decoration: underline; }
 
  .posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0; background: url('hr_title_sep.gif') 0 100% no-repeat; }
 
  .pages h4 { font-size: 1.2em; line-height: 1.6em; margin: 0 0 4.0em 0; padding: 0.4em 0 0 0; background: url('hr_tag_sep.gif') no-repeat; clear: both; }
 
 
 
/*---:[ core layout elements ]:---*/
 
#container { width: 770px; margin: 0 auto; padding-top: 0px;}
 
  #content_box { width: 770px; text-align: left; float: left; clear: both; }
 
    #content { width: 500px; padding: 0 10px 0 0; float: left; }
 
    * html #content { overflow: hidden; }
 
    #sidebar { width: 230px; float: left; }
 
    * html #sidebar { overflow: hidden; }
 
  #footer { width: 770px; margin-top: 20px; padding: 1.0em 0; border-top: 2px solid #ccc; font: 12px  Helvetica, Arial, sans-serif;  float: left; clear: both; }
 
 
 
/*---:[Header styles ]:---*/
 
#masthead { width: 770px; }
 
  /* #masthead a { display: block; width: 770px; height: 100px; } */ /* uncomment this line if you use a graphic in the header - make sure the height of your header graphic is equal to the height declared in this line of code! */
 
#header_img {
  background: #fff url(%%HEADERIMG%%) no-repeat 0 0;
  height: 90px;
  width: 770px;
}
 
#nav_h ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  } 
 
#nav_h ul li {
  margin-left: 0;
  padding-right: 0;
  list-style: none;
  display: inline;
  }
 
#nav_h ul li.first {
  margin-left: 0;
  border-left: none;
  list-style: none;
  display: inline;
  }
 
ul#nav { list-style: none; width: 750px; padding: 0 10px; background: url(); border-bottom: 0px solid #000; float: left; clear: both; }
 
  ul#nav li { padding: 0.85em 40px 0.7em 0; font: bold 1.4em Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; }
 
    ul#nav li a, ul#nav li a:visited { color: #838383; background-color: #ffffff; text-decoration: none; }
 
    ul#nav li a:hover { color: #8DC919; background-color: #ffffff; text-decoration: none; }
      /* original current 8DC919*/
 
    ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover { color: #000000; background-color: #ffffff; text-decoration: none; }
 
  ul#nav li.rss { padding: 0.85em 0 0.7em 0; float: right; }
 
    ul#nav li.rss a { padding: 0 18px 0 0; background: url('icon_rss.gif') 100% 50% no-repeat; }
 
#header_img { margin: 0 0 0em 0; border-bottom: 0px solid #000; float: left; clear: both; }
 
  #header_img img { display: block; } /* this is really just an IE 6 and 7 hack in disguise */
/*---:[ content styles ]:---*/
#content_box { font-size: 14px; line-height: 1.65em; }
 
#content_box p { font-size: 14px; line-height: 1.65em; }
 
  .entry blockquote { font-size: 1.0em; }
 
    .entry blockquote.right { width: 200px; font-style: normal !important; font-size: 1.3em !important; margin: 0.3em 0 0.3em 15px !important; padding: 0.3em 0 !important; border: 3px double #aaa; text-align: center; float: right; }
 
    .entry blockquote.left { width: 200px; font-style: normal !important; font-size: 1.3em !important; margin: 0.3em 15px 0.3em 0 !important; padding: 0.3em 0 !important; border: 3px double #aaa; text-align: center; float: left; }
 
      .entry blockquote.right p, .entry blockquote.left p { margin: 0 !important; line-height: 1.5em !important; }
 
  .entry p { margin: 0 0 1.5em 0; }
 
  .entry ul, .entry ol { margin: 0 0 1.5em 40px; }
 
  .entry ul { list-style-type: square; }
 
    .entry li { margin: 0 0 0.5em 0; }
 
      .entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol { margin: 0.5em 0 0.5em 30px; }
 
  .entry dl { margin: 0 0 1.5em 0; }
 
    .entry dt { font-weight: bold; margin: 0 0 0.5em 0; }
 
    .entry dd { margin: 0 0 1.5em 20px; }
 
  .entry .ad { margin: 0 0 0.5em 15px; float: right; clear: right; }
 
    .entry .ad_left { margin: 0 15px 0.5em 0; float: left; clear: left; }
 
  .entry img { }
 
    .entry img.left { padding: 3px; margin: 0.5em 15px 0.5em 0; border: 3px double #bbb; float: left; clear: left; }
 
    .entry img.right { padding: 3px; margin: 0.5em 0 0.5em 15px; border: 3px double #bbb; float: right; clear: right; }
 
    .entry img.center { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb; float: none; clear: both; }
 
    .entry img.off { padding: 0 !important; border: none !important; }
 
    .entry img.stack { clear: none !important; }
 
.tagged { margin: 0 0 4.0em 0; padding: 0.4em 0 0 0; background: url('hr_tag_sep.gif') no-repeat; font-size: 1.1em; line-height: 1.6em; color: #888; background-color: #ffffff; clear: both; }
 
  .tagged a, .tagged a:visited { padding: 3px; color: #B0B0B0; background-color: #ffffff; text-decoration: none; }
 
  .tagged a:hover { color: #fff; background-color:#0066FF; text-decoration: none; }
 
  .add_comment { display: block; padding: 0 0 0 20px; font-weight: bold; float: right; }
 
    .add_comment a, .add_comment a:visited { padding: 0; color: #B0B0B0; background-color: #ffffff; text-decoration: none; }
 
    .add_comment a:hover { color: #df0000; background-color: #ffffff; text-decoration: underline; }
 
.navigation { width: 500px; margin: 0 0 3.0em 0; font-size: 1.4em; float: left; }
 
* html .navigation { margin: 0 0 2.5em 0; }
 
  .previous { padding: 0 20px 0 0; float: left; }
 
  .next { float: right; }
 
.clear { width: 500px; height: 1px; clear: both; }
/*---:[ monetize styles ]:---*/
 
ul.sidebar_list { list-style: none; }
 
  ul.sidebar_list li.monetize { width: 230px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; }
 
    li.monetize h2 { font-weight: bold; font-size: 1.1em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('hr_dot_black.gif') 0 100% repeat-x; }
 
    li.monetize p { margin: 0 0 1.5em 0; padding: 0 10px; }
 
    li.monetize ul { list-style: none; margin: 0; }
 
    li.monetize ol { margin: 0 0 0.5em 20px; }
 
      li.monetize li { margin: 0 0 0.7em 0; text-align:center; }
 
 
 
 
 
 
/*---:[ sidebar styles ]:---*/
 
ul.sidebar_list { list-style: none; }
 
  ul.sidebar_list li.widget { width: 230px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; }
 
    li.widget h2 { font-weight: bold; font-size: 1.1em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('hr_dot_black.gif') 0 100% repeat-x; }
 
    li.widget p { margin: 0 0 1.5em 0; padding: 0 10px; }
 
    li.widget ul { list-style: none; padding: 0; margin: 0; }
 
    li.widget ol { margin: 0 0 0.5em 20px; }
 
      li.widget li { background-image: url('arrow_right.gif'); background-repeat: no-repeat;  background-position: .13em .1em;  padding-left: 2em; margin: 0 0 0.7em 0; }
 
        li.widget li a, li.widget li a:visited { text-decoration: none; }
 
        li.widget li a:hover { text-decoration: underline; }
 
        li.widget li .recent_date { padding: 0 0 0 8px; font-weight: bold; color: #888; background-color: #ffffff; }
 
    li.widget ul.flickr_stream { list-style: none; margin: 0; padding: 0 10px; }
 
      li.widget ul.flickr_stream li { margin: 0; padding: 0 5px 5px 0; display: inline; }
 
        li.widget ul.flickr_stream li a img { padding: 3px; }
 
        /*--- li.widget ul.flickr_stream li a:hover img { background-color: #ff2a96; } --*/
 
      /*---< FlickrRSS styles for the widget only >---*/
 
      li.widget_flickrrss { }
 
        li.widget_flickrrss a img { margin: 0 5px 5px 0; padding: 3px; }
 
        /*--- li.widget_flickrrss a:hover img { background: #ff2a96; } --*/
 
    /*---< Calendar widget styles >---*/
 
    #calendar_wrap { font-size: 1.3em; }
 
  /*---< This collection of lines is only here to make widget link categories work. I realize that it's ridiculous, and believe me when I say that I hate it more than you do. >---*/
 
  ul.sidebar_list li#linkcat-1, ul.sidebar_list li#linkcat-2, ul.sidebar_list li#linkcat-3, ul.sidebar_list li#linkcat-4, ul.sidebar_list li#linkcat-5, ul.sidebar_list li#linkcat-6, ul.sidebar_list li#linkcat-7, ul.sidebar_list li#linkcat-8, ul.sidebar_list li#linkcat-9 { width: 230px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; }
 
    ul.sidebar_list li#linkcat-1 h2, ul.sidebar_list li#linkcat-2 h2, ul.sidebar_list li#linkcat-3 h2, ul.sidebar_list li#linkcat-4 h2, ul.sidebar_list li#linkcat-5 h2, ul.sidebar_list li#linkcat-6 h2, ul.sidebar_list li#linkcat-7 h2, ul.sidebar_list li#linkcat-8 h2, ul.sidebar_list li#linkcat-9 h2 { font-weight: bold; font-size: 1.1em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('hr_dot_black.gif') 0 100% repeat-x; }
 
    ul.sidebar_list li#linkcat-1 ul, ul.sidebar_list li#linkcat-2 ul, ul.sidebar_list li#linkcat-3 ul, ul.sidebar_list li#linkcat-4 ul, ul.sidebar_list li#linkcat-5 ul, ul.sidebar_list li#linkcat-6 ul, ul.sidebar_list li#linkcat-7 ul, ul.sidebar_list li#linkcat-8 ul, ul.sidebar_list li#linkcat-9 ul { list-style: none; padding: 0; margin: 0; }
 
      ul.sidebar_list li#linkcat-1 li, ul.sidebar_list li#linkcat-2 li, ul.sidebar_list li#linkcat-3 li, ul.sidebar_list li#linkcat-4 li, ul.sidebar_list li#linkcat-5 li, ul.sidebar_list li#linkcat-6 li, ul.sidebar_list li#linkcat-7 li, ul.sidebar_list li#linkcat-8 li, ul.sidebar_list li#linkcat-9 li  { background-image: url('arrow_right.gif'); background-repeat: no-repeat;  background-position: .13em .1em;  padding-left: 2em; margin: 0 0 0.7em 0; }
 
        ul.sidebar_list li#linkcat-1 li a, ul.sidebar_list li#linkcat-2 li a, ul.sidebar_list li#linkcat-3 li a, ul.sidebar_list li#linkcat-4 li a, ul.sidebar_list li#linkcat-5 li a, ul.sidebar_list li#linkcat-6 li a, ul.sidebar_list li#linkcat-7 li a, ul.sidebar_list li#linkcat-8 li a, ul.sidebar_list li#linkcat-9 li a { text-decoration: none; }
 
        ul.sidebar_list li#linkcat-1 li a:hover, ul.sidebar_list li#linkcat-2 li a:hover, ul.sidebar_list li#linkcat-3 li a:hover, ul.sidebar_list li#linkcat-4 li a:hover, ul.sidebar_list li#linkcat-5 li a:hover, ul.sidebar_list li#linkcat-6 li a:hover, ul.sidebar_list li#linkcat-7 li a:hover, ul.sidebar_list li#linkcat-8 li a:hover, ul.sidebar_list li#linkcat-9 li a:hover { text-decoration: underline; }
 
 
 
/*---:[ footer styles ]:---*/
 
#footer a, #footer a:visited, #footer a:hover { color: #333; background-color:#FFFFFF; text-decoration: none; border-bottom: dotted 0px #666666; }
/*---:[ comment styles ]:---*/
 
#comments { width: 500px; float: left; clear: both; }
 
  ul#comment_list { list-style: none; margin: 0 0 4.0em 0; border-top: 1px solid #bbb; float: left; }
 
    ul#comment_list li.comment { width: 500px; padding: 2.1em 0 0 0; border-bottom: 1px dotted #bbb; float: left; }
 
    ul#comment_list li.trackback { width: 470px; padding: 2.1em 15px 0 15px; background: url('trackback_bg.gif'); }
 
      .comment_meta { margin: 0 0 1.5em 0; }
 
        .comment_meta strong { font-size: 1.6em; }
 
        .comment_time { font: normal 1.1em Verdana, Helvetica, Arial, sans-serif; color: #888; background-color:#FFFFFF; }
 
          .comment_time a, .comment_time a:visited, .comment_time a:hover { color: #888; background-color:#FFFFFF; text-decoration: none; }
 
      .comment .entry { padding: 0 15px; }
 
 
 
/*---:[ comment form styles ]:---*/
 
#comment_form { width: 500px; padding: 1.0em 0; float: left; }
 
  #comment_form p { padding: 0.6em 0; }
 
    #comment_form label { padding: 0 0 0 10px; font-size: 1.2em; }
 
    #comment_form .text_input { width: 191px; padding: 3px; color: #444; background-color:#FFFFFF; font: normal 1.4em Georgia, "Times New Roman", Times, serif; border-top: 2px solid #999; border-left: 2px solid #999; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; }
 
    #comment_form .text_area { width: 321px !important; }
 
      #comment_form .text_input:focus { border-top: 2px solid #666; border-left: 2px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
 
    #comment_form .form_submit { padding: 0.4em 4px; background: url('submit_bg.gif'); border: 3px double #666; font: bold 1.4em Georgia, "Times New Roman", Times, serif; cursor: pointer; }
 
    #comment_form p.subscribe-to-comments { font-size: 1.4em; }
 
      #comment_form p.subscribe-to-comments label { font-size: 1.0em; }
 
 
 
/*---:[ search form styles ]:---*/
 
#search_form { }
 
  #search_form .search_input { width: 221px; padding: 3px; color: #090; background-color:#FFFFFF; font: normal 1.0em Georgia, "Times New Roman", Times, serif; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
 
  li.widget .search_input { font-size: 1.1em !important; }
 
    #search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you got a link to the

Have you got a link to the page?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

snocutt
snocutt's picture
Offline
newbie
ma
Last seen: 4 years 33 weeks ago
ma
Timezone: GMT-4
Joined: 2010-03-31
Posts: 3
Points: 4

I posted all the code that

I posted all the code that weebly gave me. The link is

t e n s u l.com

I'd like to have control of the link color and roll over color.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 days 6 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Style the unique ID Look

Style the unique ID Puzzled

Look at your source, no not the file contents, but what is delivered to the browser. Each of those LI items generates a unique ID so style using descendent selectors and that unique ID to override whatever previous styles were written. This of course is only good if that last element doesn't change, if you wanted to target the last element regardless of whether it may change then the best solution is to use scripting to identify and tag that last item in a list.

What's with the stylesheet claiming to be a Wordpress theme?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

snocutt
snocutt's picture
Offline
newbie
ma
Last seen: 4 years 33 weeks ago
ma
Timezone: GMT-4
Joined: 2010-03-31
Posts: 3
Points: 4

Thank you for the response, I

Thank you for the response,
I think I get what you're saying with targeting the last link in the menu.

Is this possible by altering just the available html and css posted above?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 days 6 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

You should not need to go

Puzzled You should not need to go anywhere near markup that's the point of CSS and class/ID tokens

Your elements are identified so you can target CSS properties via rulesets very specifically. So you want to check what the id is that is generated on the li element you want to style and create a new ruleset to feed it new properties, it will look something like this:

#theParentElement? ul li#uniqueID a:hover {property: value;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me