Jump to content

Sidebar.php inheriting css from multiple style sheets

s_ff_da_b_ff

By s_ff_da_b_ff
in CSS Help

 Share

Recommended Posts

s_ff_da_b_ff Member

s_ff_da_b_ff

Posted
Posted

Hi. I am making a WordPress site and I am having trouble with my sidebar.php

 

I have a side bar where 80% of the content is inherited through a stylesheet called Stylesheet.css.  The last part of the sidebar I want to be a tabber. This tabber  I am trying to get in is inheriting domtab.css.

 

So as you can imagine it looks like this

 

<div sidebar>

 

<div>

Stylesheet.css content

</div>

 

<div>

domtab.css content

</div>

 

</div>

 

Now the problem is, the tabber is inheriting attributes from the Stylesheet.css file and I don't want that.

 

Here is the site and some images to help..

http://www.theselectedfew.com/

 

OK in this first image you see how the tabber is portrayed in the sidebar.php ... this is not how its supposed to look

http://img6.imageshack.us/i/tabber.png/

 

 

this is the tabber in a isolated .html file on my local computer...this is how its supposed to look...

http://img519.imageshack.us/i/tabber2.png/

 

 

 

Basically, I want to know why my tabber looks so much different (and also not working properly)

 

Here is the code to domtab.css:

 

	*{
		margin:0;
		padding:0;
		list-style:none;
		border:none;
	}
	body{
		font-family:Verdana,Arial,Sans-Serif;
		font-size:40%;
		background:#fff;
		color:#000;
	}

	div.domtab{
		padding:0 3em;
		width:20%;
		font-size:90%;

	}
	ul.domtabs{
		float:left;
		width:100%;
		margin:2em 0 0 0;	
          		
	}
	ul.domtabs li.domtabs{
		float:left;
		padding:0 .5em 0 0;
	}
	ul.domtabs a:link,
	ul.domtabs a:visited,
	ul.domtabs a:active,
	ul.domtabs a:hover{
		width:8em;
		padding:.2em 1em;
		display:block;
		background:#fff;
		color:#000;
		height:3em;
		font-weight:bold;
		text-decoration:none;
		border-top: 1px solid #000;
	}
	html>body ul.domtabs a:link,
	html>body ul.domtabs a:visited,
	html>body ul.domtabs a:active,
	html>body ul.domtabs a:hover{
		height:auto;
		min-height:3em;
	    
	}
	ul.domtabs a:hover{
		background:#ccc ;
	}
	div.domtab div{
		clear:both;
		width:auto;
		background:#fff;
		color:#000;
		padding:1em 3em;
		border: 1px solid #000;
	}
	ul.domtabs li.active a:link,
	ul.domtabs li.active a:visited,
	ul.domtabs li.active a:active,
	ul.domtabs li.active a:hover{
		background:#ccc;
		color:#000;
		border-top: 1px solid #000;
	}
	#domtabprintview{
		float:right;
		padding-right:1em;
		text-align:right;
	}
	#domtabprintview a:link,
	#domtabprintview a:visited,
	#domtabprintview a:active,
	#domtabprintview a:hover{
		color:#fff;
	}
	p.domtabs{
		margin:0 0 .5em 0;
		line-height:1.3em;
	}
	h2.domtabs{
		font-size:1.3em;
		color:#cfc;
		text-transform:uppercase;
		font-family:"Trebuchet MS",Arial,Sans-Serif;
		padding:0 0 .7em .2em;
	}
	h1.domtabs{
		font-size:2em;
		text-align:center;
		font-weight:normal;
		text-transform:uppercase;
		font-family:"Trebuchet MS",Arial,Sans-Serif;
		padding:.5em 0;
		background:#000;
		border-bottom:1px solid #000;
	}
	pre.domtabs{
		font-size:1.2em;
		padding:1em;
	}
	div.domtab div a:link,
	div.domtab div a:visited,
	div.domtab div a:active
	{
		color:#fff;
		display:block;
		padding:1em .5em;
		font-weight:bold;
		font-size:1.3em;
	}
	div.domtab div h2.domtabs a,
	div.domtab div h2.domtabs a:hover,
	div.domtab div h2.domtabs a:active
	{
		color:#000;
		display:inline;
		padding:0;
		font-weight:normal;
		font-size:1em;
	}

/* other scheme! */
#other{
font-size:.8em;
margin-left:.3em;
width:60em;
margin-bottom:3em;
float:left;
}
div#other.domtab div{
clear:both;
width:54em;
background:#669;
color:#fff;
padding:1em 3em;
}

#other ul.domtabs a:hover{
background:#669;
}
div#other ul.domtabs li.active a:link,
div#other ul.domtabs li.active a:visited,
div#other ul.domtabs li.active a:active,
div#other ul.domtabs li.active a:hover{
background:#669;
color:#fff;
}
#other div{
float:left;
}
ul.prevnext{
float:left;
width:100%;
}
ul.prevnext li{
float:left;
width:49%;
}
ul.prevnext li.next{
float:right;
text-align:right;
}

 

 

 

Here is the code to sidebar.php:

<script type="text/javascript" src="http://www.theselectedfew.com/wp-content/uploads/2009/12/domtab.js"></script>
<script type="text/javascript">
	document.write('<style type="text/css">');    
	document.write('div.domtab div{display:none;}<');
	document.write('/s'+'tyle>');    
    </script>
</head>
<div id="sidebar">
        <ul>
		<?php 	/* Widgetized sidebar, if you have the plugin installed. */
				if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

	<li><h2>Search</h2>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?></div><div class="clear"></li>

	<?php wp_list_categories('show_count=&title_li=<h2>Categories</h2>'); ?>

	<li><h2>Latest Posts</h2>
			<ul>
			<?php query_posts('showposts=4'); ?>
			<?php while (have_posts()) : the_post(); ?>
			<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
			</li>
			<?php endwhile; ?>
			</ul>
		</li>

	<li><h2>Recent Comments</h2>
		<ul id="recent_comments">
			<?php
			global $wpdb;
			$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID,
			SUBSTRING(comment_content,1,80) AS com_excerpt
			FROM $wpdb->comments
			LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
			$wpdb->posts.ID)
			WHERE comment_approved = '1' AND comment_type = '' AND
			post_password = ''
			ORDER BY comment_date DESC
			LIMIT 4";
			$comments = $wpdb->get_results($sql);
			$output = $pre_HTML;
			foreach ($comments as $comment) {
			$output .= "\n<li><a href=\"" . get_permalink($comment->ID) .
			"#comment-" . $comment->comment_ID . "\" title=\"on " .
			$comment->post_title . "\">" .strip_tags($comment->com_excerpt).
			"...</a>";
			}
			$output .= $post_HTML;
			echo $output;?>
		</ul> <!-- END -->
		</li>

		<?php endif; ?>
<div style="padding-top: 20px;"><a href="http://thesidetracked.com/" target="_blank"><img src="http://www.thesidetracked.com/beta/wp-content/uploads/2009/12/tsttsfad.png" border="0" alt="TST"></a>
</div>
</ul>

<div class="domtab">
<ul class="domtabs">
	<li class="domtabs"><a href="#what">LATEST</a></li>
	<li class="domtabs"><a href="#how">CATEGORIES</a></li>
	<li class="domtabs"><a href="#pr">COMMENTS</a></li>
	<li class="domtabs"><a href="#style">ARCHIVES</a></li>
</ul>
<div>
	<h2 class="domtabs"><a name="what" id="what">LATEST</a></h2>
	<p></p>
</div>
<div>
	<h2 class="domtabs"><a name="how" id="how">CATEGORIES</a></h2>

</div>
<div>
	<h2 class="domtabs"><a name="pr" id="pr">COMMENTS</a></h2>
	<p></p>
</div>
<div>
	<h2 class="domtabs"><a name="style" id="style">ARCHIVES</a></h2>
	<p></p>
</div>
</div>

        </div>

 

and lastly, here is the code to Stylesheet.css:

 

/*
------------------------------------------------------------------------
Theme Name:Equilibrium
Theme URI:http://madebyon.com
Description:Magazine style WordPress theme. Visit <a href="http://equilibrium.madebyon.com"title="Equilibrium">http://equilibrium.madebyon.com</a> for more infomation.
Version:1.4
Author:Tudinh Duong
Author URI:http://madebyon.com
------------------------------------------------------------------------
*/
/*
-----------------------------------------
RESET
----------------------------------------- 
*/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul, li{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}

strong{font-weight:bold}
em{font-style:italic}
a img{border:none}

h1, h2, h3, h5, h5, h6{font-weight:bold}

/*
-----------------------------------------
LAYOUT
----------------------------------------- 
*/
.aligncenter{display:block; margin:0 auto}
.alignleft{float:left}
.alignright{float:right}
.floatLeft{float:left}
.floatRight{float:right}
.clear{clear:both}

/*
-----------------------------------------
STRUCTURE
----------------------------------------- 
*/
html, body{height:100%}

body{font-size:62.5%; font-family:Arial,Helvetica,sans-serif; color:#222; margin:0 auto -80px; text-align:center}

#page-wrap{width:960px; min-height:100%; height:auto !important; height:100%; margin:0 auto -80px; padding-left:10px; padding-right:10px; text-align:left; border: 5px solid #212121; padding-bottom: 10px;}

.content{width:680px; float:left}

/*
-----------------------------------------
TYPOGRAPHY
----------------------------------------- 
*/
p{color:#222; font-size:1.2em; line-height:1.5; margin-top:1.5em; margin-bottom:1.5em; text-align:justify}

p a, p a:visited{border-bottom:1px solid #c9c9c9; color:#0B96D0; text-decoration:none}

p a:hover{border-bottom:1px solid #c9c9c9; color:#000; text-decoration:none}

h1, strong{font-size:1.4em; font-weight:bold}

.post h2{text-transform:none; padding-bottom:0; border-bottom:0; margin-top:0; margin-bottom:0}

h4, h2{font-size:1.8em; color:#222; text-transform:uppercase; padding-bottom:4px; border-bottom:4px solid #c9c9c9; margin-top:28px; margin-bottom:28px; font-weight:bold}

h3{border-bottom:4px solid #C9C9C9; color:#222; font-size:2.2em; font-weight:bold; margin-top:23.3px; padding-bottom:4px}

h3 a{text-decoration:none; color:#222}

.post ul li, 
.post ol li{font-size:1.2em; list-style-type:square; margin:5px 0 5px 15px}

#reply{border-bottom:4px solid #C9C9C9; color:#222; font-size:1.8em; margin-top:28px; margin-bottom:16px; padding-bottom:4px}

/*
-----------------------------------------
TOP
----------------------------------------- 
*/
#top{margin-top: 10px; padding-bottom:50px}

h1.logo a{float:left; font-size:2.6em; font-weight:bold; color:#000; text-transform:uppercase; text-decoration:none; margin-top: 5px}

#nav{float:right; margin-top:1.2em}

#nav ul{list-style-type:none; width:100%}

#nav li{display:block; display:inline}

#nav a:link, 
#nav a:visited{padding:5px; display:block; color:#353434; margin-right:10px; float:left; text-decoration:none; font-size:1.2em; font-weight:bold; text-transform:uppercase}

#nav a:hover{color:#ccc; background:#fff}

ul#nav li.current_page_item a:link, 
ul#nav li.current_page_item a:visited, 
ul#nav li.current_page_item a:hover, 
ul#nav li.current_page_item a:active{color:#333; text-decoration:none; background:#ccc}

/*
-----------------------------------------
FEATURED
----------------------------------------- 
*/
.front-post{width:303px; margin-right:25px; float:left}

.front-post-last{width:303px; float:left}

.featured-content{position:relative; width:303px}

.featured-content p{margin-top:1em}

.featured-post{position:relative; width:303px; height:231px; margin-bottom:1.2em}

.featured-title h2{margin:8px 10px 7px; line-height:1.4em; font-size:1.1em; text-transform:none; padding-bottom:0; border-bottom:0}

.featured-title h2 a{font-size:1.2em; display:block; color:#0B96D0; text-decoration:none; border-bottom:0}

.featured-title h2 a:hover{color:#fff}

.featured-title{background:#000; display:block; z-index:101; width:100%; bottom:0; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; position:absolute; z-index:2}

.featured-image{position:absolute; z-index:1}

.featured-content h2{margin-top:15px}
.featured-content h2 a{color:#0b96d0; text-decoration:none}
.featured-content h2 a:hover{color:#000}

/*
-----------------------------------------
SIDEBAR
----------------------------------------- 
*/
#sidebar{float:right; width:260px; padding-left:20px; overflow:hidden}

#sidebar li a{display:block; width:260px; margin:0; padding:4px 2px; list-style:none; border-bottom:1px solid #c9c9c9; font-size:1.2em; list-style-type:none; text-decoration:none; color:#222; text-transform: uppercase; font-weight: bold}

#sidebar a{color:#e6e6e6; text-decoration:none}

#sidebar a:hover{color:#fff; background-color:#282828}

#sidebar h2{font-size:1.8em; color:#222; text-align:right; text-transform:uppercase; border-bottom:4px solid #c9c9c9; margin-top:28px; margin-bottom:0}


/*
-----------------------------------------
LATEST
----------------------------------------- 
*/
#front-bottom{margin-top:36px}

#latest-wrap{float:left; width:680px}

.latest-post-wrap{float:left; width:162px; margin-right:8px}

.latest-post{position:relative; width:162px; height:118px}

.latest-image{position:absolute; z-index:1}

.latest-title h2{margin:8px 10px 7px; line-height:1.4em; font-size:1em; text-transform:none; padding-bottom:0; border-bottom:0}

.latest-title h2 a{display:block; color:#0B96D0; text-decoration:none}

.latest-title h2 a:hover{color:#fff}

.latest-title{background:#000; display:block; z-index:101; width:100%; bottom:0; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; position:absolute; z-index:2}

.latest-content{position:relative; width:162px; height:200px; margin-bottom:20px}

.latest-content h2{margin-top:15px}
.latest-content h2 a{color:#0b96d0; text-decoration:none}
.latest-content h2 a:hover{color:#000}

.latest-content p{color:#222; font-size:1.2em; line-height:1.5; margin-top:8px; margin-bottom:1.5em; text-align:left}

/*
-----------------------------------------
FOOTER
----------------------------------------- 
*/
#push{height:80px}

#footer{padding-top:10px; border-top:1px solid #ccc; width:960px; margin:150px auto 0; height:80px; color:#333}

#footer p{font-size:1.2em; color:#4d4d4d; line-height:1.5em; margin-bottom:0; margin-top:0.6em}

#footer p a{border-bottom:1px solid #c9c9c9; color:#4d4d4d; text-decoration:none}

#footer p a:hover{border-bottom:1px solid #c9c9c9; color:#0b96d0; text-decoration:none}

/*
-----------------------------------------
POSTMETA
----------------------------------------- 
*/
.postMeta{font-size:1.2em; margin-bottom:18px; margin-top:8px; padding-bottom:24px; border-bottom:1px solid #c9c9c9}

.postMeta-featured{margin-top:8px; font-size:1.2em; width:303px}

.postMeta-front{margin-top:8px; font-size:1.2em}

.postMeta-post{font-size:1.2em; margin-bottom:18px; margin-top:8px; border-bottom:1px solid #c9c9c9; padding-bottom:10px}

.postMeta span.date, 
.postMeta-post span.date, 
.postMeta-featured span.date, 
.postMeta-front span.date{color:#8a8a8a; float:left}

.postMeta span.comments a, 
.postMeta span.date a, 
.postMeta-post span.comments a, 
.postMeta-post span.date a, 
.postMeta-featured span.comments a, 
.postMeta-featured span.date a, 
.postMeta-front span.comments a, 
.postMeta-front span.date a{float:left; color:#8a8a8a; text-decoration:none}

.postMeta span.comments, 
.postMeta-featured span.comments, 
.postMeta-post span.comments, 
.postMeta-front span.comments{float:right; background:#FFF url(images/comment.gif) no-repeat left center; padding-left:15px; margin-left:2px}

/*
-----------------------------------------
POSTS
----------------------------------------- 
*/
.post-category{color:#8a8a8a; float:left; margin-bottom:8px}

.post-tags{color:#8a8a8a; float:right}

.post-category p, 
.post-tags p{color:#8A8A8A; font-size:1em; line-height:1.5em; margin-bottom:0em; margin-top:0em; text-align:none}
.post img{margin:0.5em 1em;}
.post blockquote p{margin:0 2.6em; font-style:italic}

/*
-----------------------------------------
COMMENTS
----------------------------------------- 
*/
.comment-heading{margin-bottom:26px; text-transform:none; border:none}

.commentwrap{border-top:3px solid #C9C9C9; padding-bottom:15px; padding-top:15px}

.commentpost{float:right; width:510px}

.commentpost p{margin-top:0}

.commentmetadata{float:left; width:20%; color:#2F2B23; line-height:1.5em; padding-right:20px; color:#999; font-size:1.1em}

.commentmetadata li{list-style-type:none; padding:.3em; margin:0 .5em 0 0}

.commentmetadata li a{border-bottom:1px solid #c9c9c9; color:#0B96D0; text-decoration:none}

.warning{padding:10px; background:#282828; border:1px solid #323232; ; margin-bottom:10px}

#comments label input{border:1px solid #E5E5E5; padding:5px 4px; margin-bottom:10px; width:160px}

#comments label span{line-height:27px}

#comments label{font-family:"Lucida Sans Unicode"; font-size:1.1em}

#comment_author{margin:20px 20px 20px 0px; padding:0px; width:150px; float:left}

#comments-content{display:block; border-bottom:1px solid #C9C9C9; margin:10px 0px 10px 0px; padding:0px}

#comments textarea{margin-top:10px; padding:4px 0px; width:100%; border:1px solid #E5E5E5}

/* other scheme! */
#other{
font-size:.8em;
margin-left:.3em;
width:60em;
margin-bottom:3em;
float:left;
}
div#other.domtab div{
clear:both;
width:54em;
background:#669;
color:#fff;
padding:1em 3em;
}

#other ul.domtabs a:hover{
background:#669;
}
div#other ul.domtabs li.active a:link,
div#other ul.domtabs li.active a:visited,
div#other ul.domtabs li.active a:active,
div#other ul.domtabs li.active a:hover{
background:#669;
color:#fff;
}
#other div{
float:left;
}
ul.prevnext{
float:left;
width:100%;
}
ul.prevnext li{
float:left;
width:49%;
}
ul.prevnext li.next{
float:right;
text-align:right;
}








.button{border:1px solid #E5E5E5; font-size:1.1em; font-weight:bold; height:25px; margin-top:10px; margin-bottom:10px; padding:0 8px; text-transform:uppercase}

.children {margin-left: 50px}

.children div {border:none}

.children .commentwrap {border-top: 1px solid #C9C9C9;}

.children .commentmetadata {padding-right:0px}

.children .commentpost {text-align:left; float:right; width:78%}


/*
-----------------------------------------
SEARCH
----------------------------------------- 
*/
#searchform{float:left; margin-top:1em; height:2.3em}

#searchsubmit{border:1px solid #E5E5E5; font-size:1.1em; font-weight:bold; height:2.1em; padding:2px 8px; text-transform:uppercase; float:right; background-color:#F0F0F0}

#s{float:left; width:204px; margin-right:6px; padding-top:4px; padding-bottom:4px; padding-left:2px; padding-right:2px; border:1px solid #E5E5E5; font-size:1.1em}

/*
----------------------------------------
Other
----------------------------------------
*/

::selection			{ background:#ccc; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#ccc; color:#000; /* Firefox */ }

 

 

 

 

 

 

If you have read this far please help, Have tried alot of things and nothing seems to work. Please let me know if I did not explain clear or if you need any other information. Thanks

 

 

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Stylesheets apply to a whole page. You cannot prevent a part of your page from using the styles from a stylesheet, but what you can do is override the CSS selectors that you don't want.

 

Wrap the element you want to have separate styles into a div with an ID. For example, you could have <div id="tabber">

 

Then, lets say you have a css selector in the main stylesheet that you don't want, like this:

 

.tab
{
  float:left;
}

 

But in your tabber, you don't want elements that are .tab to be floated left. In this case, you can do this:

 

#tabber .tab
{
  float:none;
}

 

Since the second selector has a higher specificity (google it) than the original selector, it will take precedence.

Link to comment
Share on other sites
s_ff_da_b_ff Member

s_ff_da_b_ff

Posted
  • Author
Posted

That makes sense. However, if you look at my code I thought I was already doing that.

 

for example I have

ul.domtabs a:hover
       {
         background:#ccc ;
       }
   

 

Isnt that telling any URL's within the <ul> tag in the domtabs div to be a certain color when hovered? Even though it is taking my other style and making the hover on my tabber black / listed improperly.

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.