creating a CSS exception

[sorefish]

Hey folks, realise this is probably beneath the general level of conversation in here, but I have no technical training.

I'm working on a WP site called worseforwear.com, helping out a friend. In the right sidebar, I want to create a CSS exception for the list-style: square part of the main site's sidebar CSS.

In the Featured section, I want the plugin to display the featured post title in line horizontally to the right of the image, and centred against the depth of the image.

I need to create a CSS exception for the list-style so that it doesn't have the square bullet like the rest of the column.

I'm not sure whether to change the CSS in the main part of the site or the CSS in the plugin itself.

Would really appreciate a hand and happy to stick the code in if anyone wants to take a look.

Many thanks,

T

[scrappedcola]

You will need to apply a float:left and also a width to the text to place it to the right of the image. You will also need to either remove the padding from the image or give the column that the image is in more room. You will also need to remove h4 from the rule that clear's both float's from it (in style.css approx line 32; not certain why you would want to clear the floats from h1,h2,h3,h4,h5,h6 because of the level of specificity you won't really be able to set float on those elements latter).

.widget_featured-posts img.alignleft {
  /* padding:2em; Remove this or modify */
}
.widget_featured-posts .featured-title {
  float:left;
  padding-left:5px;
  width:47%;
}

To remove the square bullet you will need to give the ul that the image is in an id to target and define a css rule to remove it.

<ul class="xoxo">
   <li class="widget-container widget_featured-posts" id="widget_featured-posts-3" style="list-style-type: none;">
      <ul id=featuredPostWrapper class="clearfix">

#main .widget-area ul ul#featuredPostWrapper{
   list-style-type:none;
}

Part of the problem will be though is that I don't think there is sufficient space for the featured text to appear to the right of the image.

[sorefish]

Wow -thank you so much for the really full reply. I'm going to have to take a closer look at this when I get home tonight and report back on progress. Really appreciate the guidance.

T

[sorefish]

Ok, so I've had a fiddle around with this. I'm afraid I think it might be beyond me. The problem is, I'm not sure where to put in the pieces of code in the backend of wordpress.

In my main stylesheet "style.css" I've pasted the first part you gave me, so it looks like this:

/* =Widget Areas
-------------------------------------------------------------- */

.widget-area ul {
	list-style: none;
	margin-left: 0;
}
.widget-area ul ul {
	list-style: square;
	margin-left: 1.3em;
}
.widget_featured-posts-3 ul ul {
	list-style: none;
	margin-left: 3em;
.widget_featured-posts img.alignleft {
  /* padding:2em; Remove this or modify */
}
.widget_featured-posts .featured-title {
  float:left;
  padding-left:5px;
  width:47%;
}
}
.widget_search #s { /* This keeps the search inputs in line */
	width: 60%;
}
.widget_search label {
	display:none;
}
.widget-container {
	margin: 0 0 18px 0;
}
.widget-title {
	color: #222;
	font-weight: bold;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
}
.widget-area .entry-meta {
	font-size: 11px;
}
#wp_tag_cloud div {
	line-height: 1.6em;
}
#wp-calendar {
	width:100%;
}
#wp-calendar caption {
	font-weight: bold;
	color: #222;
	text-align: left;
	font-size:14px;
	padding-bottom: 4px;
}
#wp-calendar thead {
	font-size:11px;
}
#wp-calendar thead th {
}
#wp-calendar tbody {
	color: #aaa;
}
#wp-calendar tbody td {
	padding: 3px 0 2px;
	background: #f5f5f5;
	border:1px solid #fff;
	text-align: center;
}
#wp-calendar tbody .pad {
	background: none;
}
#wp-calendar tfoot #next {
	text-align: right;
}
.widget_rss a.rsswidget {
	color: #000;
}
.widget_rss a.rsswidget:hover {
	color: #FF4B33;
}
.widget_rss .widget-title img {
	height: 11px;
	width: 11px;
}

/* Main sidebars */
#main .widget-area ul {
	margin-left: 0;
	padding: 0 20px 0 0;
}
#main .widget-area ul ul {
	border: none;
	margin-left: 1.3em;
	padding: 0;
}
#primary {
}
#secondary {
}

In the css stylesheet for the widget itself I've put in the same code, so it now reads:

.widget_featured-posts {background:url('images/titlesidebarRu.gif') no-repeat top left;padding:40px 0 0 0;font-size:100%;line-height:30px;}
.widget_featured-posts li {line-height:20px;margin:0!important;padding:0em 0!important;font-size:90%;height:auto!important;height:80px;min-height:80px; border-bottom:1px solid #8A8989;}
.widget_featured-posts li:last-child {border:none;}
.widget_featured-posts img {border:2px solid #c7c6c6;float:left;margin:0 0 0 10;display:inline;}
.widget_featured-posts img.alignleft {
}
.widget_featured-posts .featured-title {
  float:left;
  padding-left:5px;
  width:47%;
}
.widget_featured-posts img.alignleft {padding:0em;}
.widget_featured-posts .featured-title {}
.widget_featured-posts li a {color:#000!important;}
.widget_featured-posts li:hover {background:#c6c5c5;}
.widget_featured-posts li:hover img {border:2px solid #ffffff;}
h4.featured-title{margin:0;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

The thing is, I don't think I know which are the right places to put these in, and I'm definitely not sure where to put in your

<ul class="xoxo">

piece or the last piece you gave me starting #main etc.

I'm afraid, as I said, I'm really non-technical so I only have a very limited knowledge of how CSS works and which bits go where.

If this is going to take you ages to explain I don't want to waste your time - I should probably find a plugin with a front-end editor I can use!