|
CSS - Css Help In Twenty Eleven Wp Theme
I am trying to edit the style sheet in twenty eleven in WP to get the menu to do something specific.
I am at the very beginning so there is no content, and the actual style isn't even set - I'm just trying to get my head around things. The site is <a href="http://middevontyres.co.uk/test/">here</a>. Ok at the moment on the active page, the menu has the image with the black and white checking on it - this I was able to work out pretty easily and the styling is: <code>#access .current_page_item > a { background-image: url(images/active2.png); background-repeat: no-repeat; font-weight: bold; color: #FF0000; }</code> The problem I have, is in the sub-menu I want the active page to be an image with only 1 column of checks, (active3.png). The existing style sheet uses the above current page item right down the menu. I tried to create a new section: <code>#access .current_page_item > ul a { background-image: url(images/active3.png); background-repeat: no-repeat; font-weight: bold; color: #CC33CC; }</code> (The colours are irrelevant it is just my way of tracking which code applies where. Anyway this style isn't being picked up. I suspect I'm not understanding the structure properly. Your advice would be appreciated. Similar TutorialsI have a pretty awesome looking wordpress theme. I was wondering if someone could guide me through making a small change to it though! Firstly, here is the page now: theangrywalrus.com/blog What I would like to do, is take the black bar at the top and stretch it so it goes under the title of my site, and ends near where the 'content' starts. Then I'd like to move the gradient bg image down so it starts under where the black bar ends. So far, using the firefox web dev plugin, I've only been able to get the black bar/gradient working in one part of the page, where the content is. How can I get it to be how I want it? Could someone show me how to get this done please? I'd really appreciate some help. My style sheet is he theangrywalrus.com/blog/wp-content/themes/simpla/style.css Hey Guys, I hope this is in the right forum. I've purchased a wordpress theme and it contains a video background using JWPlayer. Part of the JWPlayer functionality is that it allows play/pause control when hovering over the video and a "hover hand" replaces the regular cursor. I'd like the cursor to stay the same at all times, and remove the ability to play/pause the video. So it's essentially just a regular looking background that's a video. I've done some searching online and it appears this is possible by placing a transparent div frame over the entire page with a cooresponding z index. Seems easy enough, but I'm not very familiar with CSS and the more I look online for the best way to go about this, the more confused and lost I'm getting. Can anybody shed some light on the best way to go about this? Certainly it must be quite straightforward? I'm trying to edit a free Wordpress theme called "Imprezz 1.3" so that the date of each post is displayed about 20 pixels more to the left. Here's a picture of what I'm going for: i.imgur.com/l2EyM.png I've tried to mess with positioning and z-index in the stylesheet for .postTime, .postDay & .postEra without much success (I get the div to move but the part that's supposed to be 'sticking out' of the page doesn't show). Any help would be much appreciated! Thx I dunno if this is the right spot but I am stuck. Here is my issue http://fifafanatics.com/league/index.php?option=com_joomleague&func=showRanking&p=1 is my site. as you can see the theme the content in the right is too close to the left. I want to "center". If you click on the forum you will see the real issue. I need that forum to stretch out. I feel like these are stuck in a container but I don't even know where to look. Let me post some code. this is the .css file. theres a html file as well if needed I can post that. Code: body {
overflow-x : hidden;
overflow: -moz-scrollbars-vertical;
}
.body {
color: #000000;
margin: 0 0 0 0;
padding: 0px;
font-size: 11px;
font-family: "Trebuchet MS";
background: #575757;
}
.all {
width:970px;
margin:0 auto;
padding:0;
background: url(../images/bg_page.gif) repeat-y;
}
#logo {
background: transparent url(../images/bg.jpg) no-repeat top center;
margin:0 auto;
width: 100%;
padding:0;
height:119px;
text-align:left;
vertical-align:middle;
}
#logo a {
margin:20px 0 0 75px;
line-height:80px;
font-family:"Trebuchet MS";
font-size:23px;
color:#FFFFFF;
}
.topmaincol {
width:100%;
height:30px;
}
/* --- nav --- */
.div {
}
#menu{
position:relative;
height:58px;
color:#E0E0E0;
background: url(../images/topmenu_bg.jpg) repeat-x;
width:966px;
font-size:13px;
}
#menu .menuc {
margin: 0px auto;
width: 966px;
font-family:"Trebuchet MS";
}
#topnavi{
position:relative;
height:58px;
font-size:12px;
font-weight: normal;
font-family:"Trebuchet MS";
background: url(../images/topmenu_bg.jpg) repeat-x top left;
padding:0 0 0 5px;
}
#topnavi ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#topnavi ul li{
display:block;
float:left;
margin:0 1px;
}
#topnavi ul li a{
display:block;
float:left;
color: #FFFFFF;
text-decoration:none;
padding:0 0 0 11px;
height:52px;
}
#topnavi ul li a span{
font-size:12px;
padding:17px 11px 0 0;
height:52px;
float:left;
}
#topnavi ul li a:hover{
font-size:12px;
color: #000000;
}
#topnavi ul li a:hover span{
font-size:12px;
display:block;
width:auto;
cursor:pointer;
}
#topnavi ul li a.current,#topnavi ul li a.current:hover{
color: #FFFFFF;
background: url(../images/topmenu_left.jpg) no-repeat top left;
line-height:350%;
}
#topnavi ul li a.current span{
display:block;
padding:0 10px 0 0;
width:auto;
background: url(../images/topmenu_right.jpg) no-repeat top right;
height:52px;
}
/* --- end nav --- */
/* /////////////////////////////////////////////////////////////////////////// */
form {display:inline;}
hr {
color : #999999;
height : 1px;
width : 100%;
}
.back_button {
color : #999999;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
font-weight : normal;
padding-bottom : 3px;
margin-right : 4px;
float : right;
line-height : 20px;
}
.button {
font-size : 11px;
color : #333333;
border : 1px solid #999999;
margin : 3px;
background-color : #EDEDED;
padding : 1px;
cursor : pointer;
}
.inputbox {
color : #000000;
background : #ffffff;
border : 1px solid #cccccc;
margin : 3px;
}
table,td,div {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
margin:0;
}
p {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
}
strong {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
}
i {
color : #000000;
font-family : Verdana, Helvetica, sans-serif;
font-size : 10px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
font-style: normal;
}
em {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
font-style: normal;
}
/* /////////////////////////////////////////////////////////////////////////// */
.leftcol {width:200px;padding:10px 5px 10px 10px;}
.maincol {width:525px;padding:10px 5px 10px 5px;}
.rightcol {width:200px;padding:10px 10px 10px 10px;}
.pollstableborder td{ text-align:left}
#container {
width:970px;
height:100%;
margin: 0px auto;
padding:0;
text-align: left;
}
/* -------------------------------------------------------------------------------------------------------------- */
table.moduletable {
margin : 0 0 20px 0;
width : 100%;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 10px;
}
table.moduletable th {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
text-align : left;
height : 34px;
color : #FFFFFF;
padding : 8px 0 0 13px;
text-indent : 10px;
line-height : 15px;
background : #fff url(../images/moduletable_th_bg.jpg) no-repeat left top;
}
table.moduletable td {
padding-top: 2px;
}
table.moduletable td table{
width : 100%;
}
.sectiontableheader {
font-size : 10px;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-weight : normal;
text-transform : uppercase;
letter-spacing : 1px;
color : #333333;
background : #ffffff;
padding : 1px;
}
.sectiontableentry1 {
vertical-align : top;
padding : 3px;
background : #D9D9D9;
border-bottom : 1px solid #ffffff;
line-height : 25px;
}
.sectiontableentry2 {
vertical-align : top;
padding : 3px;
border-bottom : 1px solid #ffffff;
background : #EEEEEE;
line-height : 25px;
}
a.mainlevel {
display : block;
width : auto;
margin : 1px 0;
padding : 0;
font-size : 12px;
background : none;
text-indent : 10px;
width : 200px;
}
a.mainlevel:link, a.mainlevel:visited {
display : block;
font-size : 11px;
background : transparent url(../images/mainlevel.gif) repeat-x right bottom;
font-weight : normal;
padding : 4px 0 4px 0;
color : #000000;
text-indent : 11px;
}
a.mainlevel:hover {
background : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
font-size : 11px;
font-weight : normal;
color : #D01C0D;
text-decoration : none;
text-indent : 11px;
}
#active_menu {
color : #D01C0D;
background : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
}
a#active_menu:hover {
color : #333333;
}
a:link, a:visited {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
a:hover {
font-size : 11px;
color : #D01C0D;
text-decoration : none;
font-weight : bold;
}
a.category:link, a.category:visited {
font-size : 11px;
font-weight : bold;
}
a.readon:link, a.readon:visited {
color : #999999;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
background : url(../images/readon.gif) no-repeat;
white-space : normal;
font-weight : bold;
padding : 1px 0 3px 18px;
float : right;
line-height : 10px;
text-decoration : underline;
}
a.readon:hover {
color : #D01C0D;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
background : url(../images/readon.gif) no-repeat;
white-space : normal;
font-weight : bold;
padding : 1px 0 3px 18px;
line-height : 10px;
text-decoration : underline;
}
ul {
margin : 2px;
padding-left : 10px;
list-style : none;
}
li {
line-height : 15px;
padding-left : 10px;
padding-top : 0;
}
table.contenttoc {
border : 1px solid #dcdcdc;
background : #F1F1F1;
padding : 5px;
margin-left : 2px;
margin-bottom : 2px;
}
.pagenavcounter {
font-size : 10px;
color : #4da338;
}
.pagenavbar {
border-top : 1px solid #999999;
padding : 2px;
}
.pagenav {
font-weight : bold;
}
a.pagenav:link, a.pagenav:visited {
font-size : 11px;
color : #999999;
text-decoration : none;
}
a.pagenav:hover {
font-size : 11px;
color : #3333ff;
text-decoration : none;
}
.date {
font-size : 10px;
font-weight : bold;
color : #707070;
padding-right : 12px;
}
.small {
font-size : 10px;
color : #333333;
}
.smalldark {
font-size : 10px;
color : #333333;
}
.createdate, .modifydate {
float : right;
font-size : 10px;
color : #666666;
font-weight : bold;
}
.content_vote {
font-size : 10px;
height : 22px;
padding-top : 2px;
padding-bottom : 2px;
}
.content_rating {
font-size : 10px;
color : #999999;
}
.pway {
margin:0 auto;
text-align:left;
width:970px;
height:18px;
padding:5px 0 0 0 ;
background:#575757;
}
.pathway {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #D01C0D;
padding-left : 12px;
}
a.pathway:link, a.pathway:visited {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
color : #FFFFFF;
font-size : 11px;
padding-left : 0;
}
a.pathway:hover {
color:#efefef;
font-size : 11px;
padding-left : 0;
}
table.content{
width : 100%;
padding : 0;
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 10px;
}
table.contentpane {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}
table.contentpaneopen {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}
.poll {
color : #333333;
line-height : 12px;
font-weight: normal;
}
.pollstableborder{
border-color : #999999;
}
.contentheading,.componentheading {
width : 90%;
font-size : 12px;
font-weight : bold;
line-height : 16px;
text-transform : uppercase;
text-align : left;
text-indent : 0;
color : #D01C0D;
padding : 1px;
margin : 3px 0px;
}
.ontab {
border-left : 1px solid #666666;
text-align : center;
font-weight : bold;
color : #333333;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.offtab {
border-left : 1px solid #666666;
text-align : center;
color : #999999;
font-weight : normal;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.tabpadding {
border-left : 1px solid #666666;
}
.col {
vertical-align : top;
background : #ffffff;
padding-top: 5px;
}
.contentdescription {
width : auto !important;
margin : 0;
padding : 0;
padding-top : 5px;
text-align : left;
}
td.top1{
margin: 0;
padding: 0;
height: 28px !important;
height: 28px;
padding-top: 2px !important;
padding-top: 3px;
background : url(../images/shadow.jpg) #f1f1f1 repeat-x top;
}
table.top2{
background : #ffffff;
}
.searchbox {
margin : 0;
padding : 0;
margin-top : 13px;
margin-left : 10px;
width : 130px;
font-size : 11px;
color : #707070;
border : 1px solid #cccccc;
padding : 2px !important;
padding : 1px;
background : none;
}
.sublevel {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
margin-top : 10px;
}
a.sublevel:link, a.sublevel:visited {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
padding : 5px 1px 3px 5px;
text-decoration : none;
}
a.sublevel:hover {
color : #D01C0D;
text-decoration : none;
}
a.sublevel#active_menu {
background : transparent;
color : #ff6600;
border : 0;
}
a.toclink:link, a.toclink:visited {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
padding : 5px 1px 3px 5px;
text-decoration : none;
}
a.toclink:hover {
color : #D01C0D;
text-decoration : none;
}
td.logoheader {
margin: 0;
padding: 0;
background : url(../images/header.jpg) no-repeat bottom;
height : 65px;
width : 770px;
}
td.topnav {
margin : 0px;
padding: 0px;
background : url(../images/bg_top.jpg) repeat-x top left;
height : 42px;
width : 770px;
}
td.bgline {
margin : 0;
padding: 0;
background : url(../images/s.gif) repeat-y;
width : 7px;
}
#mainlevel-nav {
font-size : 11px;
list-style : none;
padding : 0;
margin : 0;
margin-left : 1px;
}
#mainlevel-nav li {
float : right;
display : block;
list-style : none;
background-image : none;
padding-left : 2px;
padding-right : 2px;
margin : 0;
width : auto !important;
font-size : 11px;
line-height : 28px;
white-space : nowrap;
border-left : 1px solid #cccccc;
}
#mainlevel-nav li a {
padding-left : 10px;
padding-right : 10px;
font-size : 11px;
color : #000033;
text-decoration : none;
}
#mainlevel-nav li a:hover {
font-size : 11px;
color : #999999;
}
.blog_more {
margin : 10px 0 7px 7px;
}
.buttonheading {
padding : 0 2px;
}
.mosimage {
border : 1px solid #dedede;
margin : 5px;
padding-top: 3px;
background:#FFFFFF;
}
.mosimage_caption {
margin-top: 3px;
padding : 2px;
color : #000066;
font-size : 10px;
background: #f1f1f1;
}
/* -------------------------- */
.footer_bg {
width:970px;
background:#575757 url(../images/footer_bg.jpg) no-repeat left top;
color:#FFFFFF;
padding:6px 0px 0 0;
height:43px;
text-align: center;
margin:0px;
}
.footer {
color:#fff;
padding:0;
margin:0 0 10px 0;
}
.footer div, .footer div a, .footer div a:visited{
color:#fff;
}
I want to redo my tumblr blog but it requires css and i kinda suck at CSS. I was reading something on the net about it but after awhile, all the information started to get kind of hazy. If you guys could just tell me where i need to start off and what i need to do, i would greatly appreciate it. Thanks I'm new to this site and I'm hope someone is kind enough to help with this CSS issue. I'm running a blog on the wordpress platform usig Coraline theme, I tweaked the CSS style sheet to add a background and opacity for the content container. The problem is with margins inside the content container, when I add padding larger than 0PX mybsidebars move to bottom of the site. I've tried a lot of changes but nothing seems to work. I've attached part of the content container code below and thanks in advance. container { clear: both; margin: 0 auto; opacity: 0.978; } #content-container { background:#E5E5E5; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #main-sidebars { max-width: 450px; width: 45.5%; } #feature { width: 100%; float: left; } #primary, #secondary { overflow: visible; } #footer { clear: both; width: 100%; } Above is the code for the options I'm using for the site. The sites name is hhrapinfo dot com. Hey Guys I am new to CCS. I started a blog about 2 weeks ago and I am using a domain/host with WordPress installed. I have a premium theme. I am very happy with the theme but I do not like the color/type/size of the contents font. I went into theme editor > stylesheet and began looking for something that would tell me where the code for the content would be. I changed the first few colors, refreshed the page and nothing changed. I did this about 20 times.... and I still can't find the code for the font! Please Help! Original Style Sheet Code: Code: body { background:#083550 url(images/bg_main.jpg) repeat-x top; font:12px Arial, Helvetica, sans-serif; padding:0; margin:0; color:#101010;}
html { padding:0; margin:0;}
a { text-decoration:none; color:#292929; border:0;}
a:hover { text-decoration:underline; color:#292929; border:0;}
a:focus { outline:none;}
.clr { clear:both;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
img { padding:0; margin:0; border:none; text-align:center;}
hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height :1px;}
hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height :1px;}
form { padding:0; margin:0;}
input { font-family:'Verdana'; color:#282b31; font-size:11px;}
textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}
select { font-family:'Verdana'; color:#282b31; font-size:11px;}
/* Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#bgcontainer { margin:0; padding:0; background:url(images/bg_top.jpg) no-repeat top;}
.bgRasize { width:1024px; margin:0 auto; padding:0;}
/**/ * html .Header { height:197px;} /* */
.Header { width:1024px; margin:0; padding:0; height:197px;}
/* Menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Menu { padding:0; margin:0; height:50px; width:1024px; float: left;}
.Menu ul { list-style:none; margin:0; padding:0; height:50px;}
.Menu ul li { padding:17px 0 0 0; margin:0; float:left; line-height:14px;}
.Menu ul li a { padding:5px 15px 5px 20px; margin:0; outline:0; background:none; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#50bed2; text-transform:uppercase;}
.Menu ul li a:hover { font:normal 12px Georgia, "Times New Roman", Times, serif; color:#d9d9d9; text-decoration: underline;}
.Logo { width:1024px; height:147px; margin:0; padding:0;}
.LogoText h1 {letter-spacing:-2px; padding:15px 0 5px 0; margin:0; font:normal 36px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:center; text-transform:uppercase;}
.LogoText a { color:#ffffff; text-decoration:none;}
.LogoText a:visited { color:#ffffff; text-decoration:none;}
.LogoText a:hover { color:#ffffff; text-decoration:none;}
.Desc { color:#92dffd; line-height:12px; font:normal 14px Georgia, "Times New Roman", Times, serif; padding:0; margin:0; text-align:center; text-transform:uppercase;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Syn { width:325px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/rss.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.Syn ul { margin:0; padding:5px 0 0 50px;}
.Syn li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.Syn li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.Syn li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.Syn li a:visited { color:#1e8baa;}
.Syn li a:hover { color:#1e8baa;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.twit { width:300px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/twitter.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.twit ul { margin:0; padding:5px 0 0 50px;}
.twit li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.twit li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.twit li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.twit li a:visited { color:#1e8baa;}
.twit li a:hover { color:#1e8baa;}
/* Search ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/**/ * html .Search {} /**/
.Search { width:300px; padding:0; margin:0 0 0 10px; float:left; height:51px; border-right:1px solid #fff;}
.Search form { padding:10px 5px 0 5px;}
.Search h2 { padding:5px 20px; color:#979797; font:bold 18px Tahoma, Arial; margin:0; background:url(images/bg_searth_h2.gif) left no-repeat;}
.Search input { color:#ffffff;}
.Search input.keyword {border:1px solid #b4b4b4; width:190px; color:#b4b4b4; padding:6px 10px; height:15px; float:left;}
.Search input.search { border:none; background: url(images/search.gif) top no-repeat; height:30px; width:30px; padding:0; margin:0 5px; float:left;}
/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.CON { width:1024px; padding:0; margin:0; background:#fff;}
/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SC { width:570px; padding:20px; margin:0; float:left; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#888888;}
.SC p { padding:5px; margin:5px 0;}
/* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.pagetitle { color:#848484; font:normal 26px Georgia, "Times New Roman", Times, serif;}
.Post {padding:10px; margin:0 0 10px 0; border:1px solid #ededed; background:#f6f6f6;}
.PostHead { padding:0; margin:0;}
.PostHead h2 {color:#2e2e2e; font:bold 20px Arial, Helvetica, sans-serif; margin:0; padding:10px 0;}
.PostHead h2 a { color:#2e2e2e; text-decoration: none;}
.PostHead h2 a:visited { color:#2e2e2e; text-decoration:none;}
.PostHead h2 a:hover { color:#2e2e2e; text-decoration: none;}
/**/ * html .PostTime {} /**/
.PostTime { padding:5px 0 5px 10px; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff; margin:0; background:url(images/bg_post_time.gif) top repeat-x;}
.PostTime strong { font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff;}
.PostTime .day { font-size:11px;}
.PostTime .month { font-size:11px;}
.PostTime .year { font-size:11px;}
.PostTime a { font:bold 11px Georgia, "Times New Roman", Times, serif; color:#fff; text-decoration:underline;}
.PostContent a { color:#989898; text-decoration:underline;}
.PostContent a:hover { color:#989898; text-decoration:none;}
.PostContent img { margin:0; padding:0;}
.PostContent ol { padding:10px 0 10px 25px; margin:0;}
.PostContent ol li { padding:2px 0 2px 0; font-size:12px; line-height:15px; color:#989898;}
.PostContent ul { padding:5px 0; margin:0; float:left; width:45%;}
.PostContent ul li { padding:2px 0 2px 15px; list-style-type:none; font-size:11px; line-height:15px; color:#989898;}
.PostContent blockquote { padding:10px; margin:0; color:#989898; background:#000;}
.PostContent blockquote p { font-size:12px; padding:0; margin:0; line-height:15px;}
.PostContent blockquote li { padding:2px 0 2px 15px; list-style-type:none; font-size:12px; line-height:15px;}
.PostContent blockquote a { color:#989898;}
.PostContent blockquote a:visited { color:#989898;}
.PostContent blockquote a:hover { color:#989898; text-decoration:underline;}
.PostContent strong { color:#373737; font:normal 12px Arial, Helvetica, sans-serif; text-transform:uppercase;}
/**/ * html .PostContent p img {} /* */
.PostContent p img { max-width:350px;}
.PostContent img { margin:0 10px 10px 0; float:left; background:#0d0e09; padding:3px; border:1px solid #a3a3a3;}
.PostCom { padding:10px; font:normal 11px Arial, Helvetica, sans-serif; color:#797979; margin:0; background:url(images/bg_com.gif) left no-repeat;}
.PostCom ul { padding:0 10px; margin:0;}
.PostCom li { padding:5px 0; margin:0; list-style-type: none; color:#797979; font: normal 11px Arial, Helvetica, sans-serif; display: inline;}
.PostCom li a { font-weight:normal; text-decoration:none; color:#797979;}
.PostCom li a:hover { font-weight:normal; text-decoration: underline; color:#797979;}
.PostCom .Com {}
.PostCom .Tags { padding-left:10px;}
/* Note ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Note { padding:0; margin:0;}
.Note li { padding:3px 0 3px 15px; margin:0; list-style-type:none; font-size:12px;}
/* TrackbackList ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.TrackList { background:#848484; padding:15px; margin-top:20px; position:relative;}
.TrackListTop { background:#848484; position:absolute; top:0; left:0; width:455px; height:10px;}
.TrackList h3 { font-size:14px; font-weight:bold; margin:0 0 5px 0; padding:0 0 5px 0; color:#333366; letter-spacing:-1px; border-bottom:dashed 1px #beb4c1;}
.TrackList ul { padding:0; margin:0;}
.TrackList li { padding:0 0 0 10px; margin:0; list-style-type:none; font-size:11px;}
.TrackList li a { color:#cc3366;}
/* Navigation - PlugIn +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Nav { font-size:11px; padding:10px 0; color:#848484; font-family:'Verdana';}
.Nav a { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px;}
.Nav a:visited { padding:1px 6px 1px 4px; border-right:solid 1px #666;}
.Nav a:hover { padding:1px 6px 1px 4px; border-right:solid 1px #666; text-decoration:none;}
.Nav span { padding:1px 6px 1px 4px; color:#666; border-right:solid 1px #666;}
.Nav .on { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px; color:#003366;}
/* Comments ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Comments { margin:20px 0 0 0; position:relative;}
.Comments h3 { font-size:16px; letter-spacing:-1px; margin:0 0 5px 0; padding:10px 0; color:#848484; border-bottom:solid 2px #660000;}
/* Comments List ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.List ol { padding:0; margin:0;}
.List li { position:relative; padding:5px 0; margin:10px 0; list-style-type:none;}
/**/ * html .List .LGrav { right:30px;} /* */
.List .LGrav { position:absolute; right:0; top:10px;}
.List .LGrav img { border:solid 1px #ccc; padding:2px; background:#fff;}
.List .LUsr { margin:0; padding:0; font-size:11px; line-height:12px; color:#999;}
.List .LUsr a { color:#999; text-decoration:none;}
.List .LUsr strong { font:bold 16px "Trebuchet MS", sans-serif; letter-spacing:-1px; color:#666;}
.List .LUsr strong a { color:#cc0000; text-decoration:none;}
.List .LCon { margin:10px 0 0 0 ; padding:0; font-size:12px; line-height:16px; border-top:solid 1px #ccc;}
.List .LCon p { margin:0; padding:5px 0 ; font-size:12px; line-height:16px;}
.List .Author { background:#fff;}
/* Comments Form ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Form .Email {}
.Form { padding:0 0 10px 0 ; position:relative; margin:0; font-family:'Verdana';}
.Form form { margin:0; padding:0;}
.Form a { text-decoration:underline;}
.Form p { padding:0 0 2px 0 ; margin:0; color:#666;}
.Form p small strong { font-weight:bold; color:#FF3300;}
.Form p small { font-size:11px; display:block; padding:6px 0 ; color:#000;}
.Form .TextField { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px 6px 6px 30px; font-size:12px; display:block;}
.Form .TextArea { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px; font-size:12px;}
/* Side Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR { width:394px; padding:20px 20px 20px 0; margin:0; float:right;}
/* Banners ADs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.banner {padding:10px; margin:0; border:1px solid #ededed; background:#f6f6f6;}
.banner h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.banner ul { margin:0; padding:0 0 0 10px; list-style:none;}
.banner li { margin:0; padding:5px 10px; float:left;}
.banner li img { }
/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR {padding:0; margin:10px 0;}
.SRR div.categories, .SRR div.archives, .SRR div.meta { width:50%; float:left; margin:0; padding:0;}
.SRR h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.SRR ul { padding:5px 15px; margin:0; list-style:none;}
.SRR li {padding: 5px 0 5px 20px; font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; border-bottom:1px solid #ededed; background:url(images/categories_li.gif) left no-repeat;}
.SRR a { font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; text-transform:uppercase;}
.SRR a:hover { text-decoration:underline; color:#10547e;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget { padding:10px; margin:10px 0; border:1px solid #ededed; background:#f6f6f6;}
.widget h2 { text-transform:uppercase; text-decoration:underline; border-bottom:1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 10px;}
.widget ul { padding:10px; margin:0;}
.widget li { margin:0; padding:5px 10px 4px 20px; list-style-type:none; border-bottom:1px solid #ededed; color:#999999; background:url(images/categories_li.gif) left no-repeat;}
.widget li a { margin:0; padding:0; border:0; background:none; color:#10547e; text-decoration:underline;}
.widget li a:hover { text-decoration:none;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget_flickr { border:0; background:none;}
.widget_flickr h2 { }
.widget_flickr ul { margin:0; padding:0 0 10px 5px; text-align:center;}
.widget_flickr li { margin:0; padding:0 5px 0 0; list-style-type:none; display:inline; background:none;}
.widget_flickr li a img { background:#000; padding:0; margin:0 5px 5px 0; width:65px;}
.widget_flickr li a:hover img { padding:0;}
/* Footer ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.FBG { margin:0; padding:0; }
.Footer { padding:10px 0; margin:0; text-align:center; background:none;}
.Footer p { color:#56b1d5; padding:0; margin:0; font:normal 11px Arial, Helvetica, sans-serif;}
.Footer a { color:#56b1d5; text-decoration:underline;}
Hello, I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom. The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance. The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section. Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down? Example of errors: Quote: 318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px 824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px 825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px 826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px 1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it 1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140% 1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160% 1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120% 1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none The thing is, I'm rather confused as to where to pinpoint the gap. In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots. I would post a link to what I'm talking about but I'm too new to the forum. Thanks in advance! I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. |
|||||||