...

View Full Version : Please Help Me Remove These Dark Gray Blotches.



mrniceguy
08-05-2012, 04:35 AM
I have a plugin installed (http://wordpress.org/extend/plugins/smooth-slider/) on my site (http://www.get2theleague.com), which creates a slideshow.

For some reason, when the plugin is activated, a dark gray border surrounds the image; above, to the right, and below it.

When this plugin isn't activated, the entire sidebar is light gray, as it should be, so I know this is caused by the plugin somehow.

I opened Firebug, so I think I identified the general area where the issue may be, however I have no idea on what specifically needs to be done to get rid of this issue.

Here is a screenshot of the issue (http://tinypic.com/view.php?pic=auh4wz&s=6), along with a glimpse of the section of code Firebug took me to when I selected the plugin.

stevenmw
08-05-2012, 06:15 AM
Can you please post your code?

I looked through your CSS via firebug, but I've got no idea which div affects the popular posts area. It looks like you've got a padding, or fixed width assigned.

mrniceguy
08-05-2012, 01:57 PM
Can you please post your code?

I looked through your CSS via firebug, but I've got no idea which div affects the popular posts area. It looks like you've got a padding, or fixed width assigned.

What file would you like to see the code from?

In case you wanted to see the master.css, here it is:


/*-------------------------------------------------------------

Theme Name: SilveRay

Description: WP Theme

Author: jempolsemut@yahoo.com

---------------------------------------------------------------*/



body {

margin: 0;

padding: 0 20px ;

color: #000;

font-size: small;

font-family: Verdana, Arial, sans-serif;

line-height: 1.5em;

background: #E8E8E8;

}



/* links */



a:link {

color: #006a8d;

text-decoration: none;

}

a:hover {

color: #000;

text-decoration: none;

}

a:visited {

color: #000;

text-decoration: none;

}

/* basic elements */



p {

padding: 0 0 10px;

margin: 0;

}

form {

margin: 0;

padding: 0;

}

img {

border: none 0;

}



/* basic phrase element styles */



blockquote {

margin: 0 20px 0 5px;

padding: 10px 0 10px 45px;

line-height: 1.5em;

color: #777;

background: url(images/bquote.gif) no-repeat;

}

code {

color: #666;

font-family: Monaco, monospace;

font-size: 120%;

text-align: left;

}

code strong {

color: #630;

}

abbr, acronym {

font-style: normal;

border-bottom: 1px dotted #ccc;

cursor: help;

}

a abbr {

border: none;

}

em {

font-style: italic;

}

strong {

font-weight: bold;

}

del {

text-decoration: line-through;

color: #666;

}

ins {

text-decoration: none;

font-style: italic;

}

address {

margin: 0;

padding: 0;

font-style: normal;

}

h1, h2, h3, h4, h5, h6 { font-family: Georgia, Verdana, Arial, sans-serif;}



/* layout

---------------------------------------------------------- */



#wrap {

min-width: 950px;

max-width: 1050px;

margin: 0 auto;

background: #e7e7e7 ;



}

#content {

margin: 50px 0;

background: url(images/bg_sb_left.gif) repeat-y 0 0 #E8E8E8;


}

#content-inner {

padding: 0 10px;

background: url(images/bg_sb_right.gif) repeat-y 100% 0;

}

#maincol {

width: auto;

margin: 0 230px 0 0;

background: #fff url(images/bg_maincol.gif) repeat-x 0 0;

border-left: 1px solid #fff;

border-right: 1px solid #fff;
}

.col-inner {

padding: 0 10px;

}

#leftcol {

position:relative;

float: left;

width: 220px;

}

#rightcol {

float: right;

width: 230px;


}

.sidebar {

margin: 0;

padding: 0;

font-size: 95%;

}



/* header

---------------------------------------------------------- */



#header {
background: url("images/get2theleaguebanner.jpg") center top;
margin: 0 10px;
width: 1030px;
height: 140px;
}

#clock{

float:right;

padding: 10px 20px 0 0;

color:#717171;

font-family:verdana;

font-size:12px;

font-weight:bold;

}

#image_header{

position: absolute;

right:10px;

top:0;

}

h1 {

margin: 0;

padding: 40px 0 15px 15px;

font-family: georgia, 'Lucida Grande', Verdana, Arial, Sans-Serif;

font-weight: bold;

font-size: 3em;

}

h1 a:link, h1 a:visited, h1 a:hover {

color: #7f8388;

text-decoration: none;

}

.description {

padding: 0 0 12px 15px;

color: #191919;

}



/*logo (edit here if you want to put logo)

---------------------------------------------------------- */
#logo {

padding: 0;

}

#logo span, #logo a {

display: block;

width: 0;

height: 0;

padding: 0;

}

#logo img {

border: none;

}




/* top navigation

---------------------------------------------------------- */

#nav {

margin: 0 ;

padding: 0;

font-size: 90%;

border-bottom: 5px solid #f2f2f2;

}

#nav ul {
list-style: none outside none;
margin: 75px auto;
max-width: 1200px;
min-width: 780px;
padding: 0;
}

#nav li {

float:left;

background:url(images/bg_nav.gif) no-repeat right top;

}

#nav li a {

float: left;

height: 24px;

padding: 6px 16px 0 ;

color: #7d7d7d;

text-align: right;

font-weight: bold;

background: url(images/bg_nav_l.gif) no-repeat ;

}

#nav li a:hover, #nav li.current_page_item a {

font-weight: bold;

color: #000;

}


/* content

---------------------------------------------------------- */


h2.pagetitle {

margin: 0 0 20px 0;

padding: 15px 0 5px 5px;

color: #7f8388;

font-size: 130%;

font-family: 'arial', Verdana, san-serif;

text-align: center;

border-bottom: 1px dotted #aaa;

}

.post {

float: left;

width: 100%;

padding: 0 0 10px 0;

}

.post h3 {

margin: 0;

padding: 10px 0 7px 0;

color: #000;

font-family: Georgia, Verdana, Arial, sans-serif;

font-size: 150%;

font-weight: bold;

}

.post h2 {

font-size: 150%;

color: #7f8388;

margin: 0;

padding: 10px 0 0;

}

.post-title {

margin: 0;

padding: 0;

border-bottom: 1px dotted #aaa;

}

.post-meta {

position: relative;

margin: 0;

padding: 2px 0 35px 0;

border-top: 1px dashed #aaa;

}

.entry-meta{

background: #f7f7f7;

padding: 5px;

border: 1px solid #d6d6d6;

margin-top: 30px;

}

.post-cat {

float: left;

margin-right: 100px;

padding-left: 15px;

background: url(images/icon_cat.gif) no-repeat 0 4px;

}

.post-comments {

right: 0;

top: 0;

position: absolute;

padding-left: 17px;

background: url(images/icon_com.gif) no-repeat 0 4px;

}


.tags {

float:left;

padding-left: 15px;

background: url(images/icon_tag.gif) no-repeat 0 5px;

margin-right: 100px;

}

.entry {

float: left;

width: 100%;

margin: 0;

padding: 15px 0 0;

}

.entry img {

margin: 5px 0;

padding: 4px;

background: #e9e9e9;

max-width: 98%;

}

/* page link */


.page-link {

margin: 15px 0;

font: 90% verdana, geneva, sans-serif;

color:#006a8d;

}

.page-link a:link,.page-link a:visited {

background: #f0f0f0;

border: 1px solid #ddd;

color: #5e5e5e;

padding: 0.2em;

}

.page-link a:hover {

color: #fff;

background: #006a8d;

border: 1px solid #ddd;

}



/* content list style */



#maincol ul, #maincol ol, #maincol dl {

margin: 0 0 10px 0;

padding: 0;

}

#maincol ul, #maincol ol {

margin-left: 10px;

}

#maincol ol {

padding-left: 20px;

}

#maincol ul ol li {

padding-left: 0;

background: none;

}

#maincol ul {

list-style: none;

}

#maincol ul li {

padding: 0 0 5px 15px;

background: url(images/icon_bullet.gif) no-repeat left 6px;

}

#maincol dl dt {

font-weight: bold;

}

#maincol dl dd {

margin: 0 0 15px 0;

padding: 0;

}



/* comments area */



h4#comments {

margin: 0 0 15px;

padding: 20px 0 0;

clear: both;

font-size: 120%;

font-family: arial, Times, san-serif;

}

h4#respond {

margin: 0;

padding: 10px 0 0;

font-size: 120%;

font-family: arial, Times, san-serif;

}

.commentlist {

margin: 10px 0;

padding-left: 20px;

}

.commentlist li{

padding: 10px;

}

.commentlist .alt {

background: #f4f4f4;

}

.commentlist cite {

font-weight: bold;

font-style: normal;

font-size: 120%;

}

.commentlist small {

margin-bottom: 5px;

display: block;

font-size: 87%;

}

#commentform {

font: 110% Arial, Helvetica, sans-serif;

}

#commentform p {

padding: 6px 0;

margin: 0;

}

#commentform label {

padding-left: 5px;

color: #000;

font-size: 87%;

}

#commentform input {

width: 200px;

background: #fafafa;

border: 1px solid #e2e2e2;

padding: 3px;

margin-top: 3px;

color: #000;

}

#commentform textarea {

width: 95%;

height: 120px;

margin-top: 3px;

padding: 2px;

background: #fafafa;

border: 1px solid #e2e2e2;

color: #000;

}

#commentform textarea:focus, #commentform input[type="text"]:focus {

background: #fff;

}

#commentform #submit {

width: 144px;

height: 28px;

margin-bottom: 10px;

color: #191919;

font: bold 12px Arial, Helvetica, sans-serif;

background: #fafafa url(images/btn_submit.gif) no-repeat;

border: none;

}


/* alignments */



.center {

text-align: center;

}

img.center, img[align="center"] {

display: block;

margin-left: auto;

margin-right: auto;

}

.alignleft {

float: left;

}

img.alignleft, img[align="left"] {

float: left;

margin: 5px 8px 5px 0;

}

.alignright {

float: right;

}

img.alignright, img[align="right"] {

float: right;

margin: 2px 0 5px 8px;

}



/* navigation */



.navigation {

float: left;

width: 100%;

margin-bottom: 10px;

font-size: 95%;

padding: 10px 0 50px 0;

}

.navigation a:link, .navigation a:active {

color: #505050;

}

.navigation a:hover, .navigation a:visited {

color: #006a8d;

}

.navigation .alignleft {

width: 45%;

text-align: left;

}

.navigation .alignright {

width: 45%;

text-align: right;

}



/* sidebar

---------------------------------------------------------- */



h2.sidebartitle {

margin: 0;

padding: 5px 10px 5px;

color: #4b4e43;

font-size: 130%;

font-family: georgia, Verdana, san-serif;

font-weight: bold;

background: #fff url(images/bg_bar.gif) repeat-x 0 0;

border-bottom: 3px solid #7f8388;


}

#rss_icon {

position: absolute;

top:1px;

right: 5px;

}

/* sidebar list level 1 */



.sidebar ul {

margin: 0;

padding: 0;

}

.sidebar ul li {

margin: 0 0 20px;

padding: 0;

list-style: none;

position: relative;

}


.sidebar li.advertisement a:link, .sidebar li.advertisement a:visited {

padding: 10px;

margin:0;

}




/* sidebar list level 2 */



.sidebar ul li ul {

margin: 0;

padding: 0;

border-bottom: 1px solid #f6f6f6;

}

.sidebar ul li ul li {

margin: 0;

padding: 0;

background: #d2d2d2;

}

.sidebar ul li ul li a:link, .sidebar ul li ul li a:visited {

padding: 5px 0px 5px 24px;

color: #4b4e43;

display: block;

background: #e7e7e7 ;

border-bottom: 1px solid #d2d2d2;

border-top: 1px solid #f6f6f6;

}

.sidebar ul li ul li a:hover, .sidebar ul li ul li a:active {

color: #006a8d;

background: #f1f1f1;

}


/* tags */


#tag_cloud a {

padding: 5px ;

font-family: verdana,georgia,arial;

font-weight:bold;
}


#tags {

background: #f4f4f4;

margin: 0;

padding: 15px;


}

#tags a {

font-family: verdana, georgia, arial;

padding: 15px 5px;

font-weight:bold;

}

#tags a:hover, #tags a:visited {

color: #000;
}



/* sidebar list level 3 */



.sidebar ul li ul li ul li a:link, .sidebar ul li ul li ul li a:visited {

padding-left: 40px;

}

.sidebar ul li ul li ul li a:hover, .sidebar ul li ul li ul li a:active {

padding-left: 40px;

}


/* recent post & comments */



.sidebar ul li#recent-comments a {

padding: 0;

display: inline;

background: none;

border: none;

}

.sidebar ul li#recent-comments ul li {

padding: 2px 5px 2px 10px;

display: block;

line-height: 1.5em;

background: #e7e7e7;

color: #006a8d;

border-bottom: 1px solid #d2d2d2;

border-top: 1px solid #f6f6f6;

}

.sidebar ul li#recent-comments ul li a:link {

color: #4b4e43;

}

.sidebar ul li#recent-comments ul li a:hover {

color: #006a8d;

}


/* widget list child */


.sidebar ul.children {

margin: 0;

padding: 2px 0;

}

.sidebar ul.children li {

padding-left: 12px;

background: url(images/icon_bullet_sbchild.gif) no-repeat 0 8px;

}



/* calendar widget */



#calendar_wrap {

color:#7f8388;

padding: 5px 10px;

}

#wp-calendar caption {

margin-bottom: 5px;

color: #7f8388;

}

#wp-calendar td a {

color: #7f8388;

}

#wp-calendar td#today {

background: #7f8388;

color: #fff;

}

#leftcol #wp-calendar td {

margin: 0;

padding: 0 3px;

}

#rightcol #wp-calendar td {

margin: 0;

padding: 0 9px;

}

#wp-calendar thead {

background: #7f8388;

color: #fff;

}

/* text widget */



.textwidget {

padding: 0 10px;

}


/* search form */



#searchform {

margin:0px 10px 0 0;

padding: 0;

position:absolute;

top: 0;

right: 30px;

background: url(images/searchform-bg.gif) no-repeat right bottom;

height: 37px;

width: 280px;

}

#searchform #s{

background: #fff url(images/search_loop.gif) no-repeat 98% 50%;

height: 15px;

width: 217px;

margin: 6px 3px 0 30px;

padding: 3px 7px 2px 8px;

color: #bcbcbc;

border:none;

}

#searchform input {

width: 14px;

height: 12px;

font: bold 12px Arial, Helvetica, sans-serif;

color: #ffffff;

vertical-align: middle;

border: none;

margin: 6px 0 0 0;

}



/* extra
---------------------------------------------------------- */



h2.extratitle {

margin: 5px 0;

padding: 30px 0 0 15px;

color: #fff;

font: normal 18px Georgia, "Times New Roman", Times, serif;

letter-spacing: -2px;
}

h2.rpost {

text-indent:-10000px;

background: url(images/recent-post.gif) no-repeat 0 5px;

margin: 0 0 10px 10px;


}

h2.rcom {

text-indent:-10000px;

background: url(images/recent-comment.gif) no-repeat 0 5px;

margin: 0 0 10px 10px;

}

h2.about{

text-indent:-10000px;

background: url(images/about.gif) no-repeat 0 5px;

margin: 0 0 10px 10px;

}


#extra {

margin:0;

padding: 35px 10px 5px 30px;

color: #fff;

font-size: 90%;

background: #787777 url(images/bg_extra.gif) repeat-x 0 0;

border-top: 1px solid #a1a1a1;

}

#extra ul {

margin: 0;

padding: 0 0 20px 0;

list-style: none;

}
#extra ul li.extra {

float: left;

position: relative;

}

#extra ul li.one {

width: 190px;

margin: 0 50px 0 20px;

}
#extra ul li.two {

width: 285px;

margin-right: 20px;

}


#extra ul li ul li {

margin: 0;

padding: 0 0 5px 15px;

background: url(images/icon_bullet_extra.gif) no-repeat 0 7px;

border: none;

}

#extra ul li a:link {

color: #fff;

}

#extra ul li a:hover, #extra ul li a:visited {

color: #cfcfcf;

}

#extra ul li ul.list-recentpost a:link {

color: #fff;
}

#extra ul li ul.list-recentpost a:hover, #extra ul li ul.list-recentpost a:visited {

color: #cfcfcf;
}

.feedlink_post { /* rss button */

position: absolute;

right: 50px;

top: 0;

border: none;

}
.feedlink_comment { /* rss button */

position: absolute;

right: 0;

top: 0;

border: none;

}

/* footer

---------------------------------------------------------- */



#footer {

margin: 0;

padding: 0;

font-size: 90%;

background: #706f6e url(images/bg_footer_divider.gif) repeat-x;

}





#footer p {

margin: 0;

padding: 20px;

color:#fff;

}

#valid {

float: right;

padding:30px 20px 0 10px;

}



/* self-clearing floats */



#nav ul:after,

#maincol:after,

.navigation:after,

#extra ul:after,

.post-meta:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.sldr_title {text-align:center;}

AndrewGSW
08-05-2012, 02:11 PM
The browser can't load these resources


http://www.get2theleague.com/wp-content/themes/silveray/images/bg_sb_left.gif

http://www.get2theleague.com/wp-content/themes/silveray/images/bg_sb_right.gif

I assume they are images needed for the _sb_ sidebar.

mrniceguy
08-05-2012, 03:12 PM
The browser can't load these resources


http://www.get2theleague.com/wp-content/themes/silveray/images/bg_sb_left.gif

http://www.get2theleague.com/wp-content/themes/silveray/images/bg_sb_right.gif

I assume they are images needed for the _sb_ sidebar.

How are you able to tell that the browser can't load those specific resources?

Since these "blotches" show up in Firefox, Chrome, and IE (at least for me, they do), is there some way around this issue?

I've searched for hours and hours for other plugins that do something similar to this one, and I had to resort to using this one, so if there's some way to resolve this issue, it would be awesome.

Thanks for your time.

AndrewGSW
08-05-2012, 03:24 PM
I just press F12 in Chrome - this works in most browsers.

You can also right-click and 'Inspect Element'.

Added: With Firefox you should install, and explore, Firebug.

AndrewGSW
08-05-2012, 03:29 PM
In Firefox you can obtain the amazing 3D view attached :eek: :cool:

tempz
08-05-2012, 03:37 PM
Add



background: none;

mrniceguy
08-05-2012, 04:05 PM
In Firefox you can obtain the amazing 3D view attached :eek: :cool:

Wow! That's sweet. I've never heard of that before.

So give me your opinion; do I have any chance of cleaning up these issues, or no?

Is there any way to get the browsers to recognize those two resources?

AndrewGSW
08-05-2012, 04:51 PM
So give me your opinion; do I have any chance of cleaning up these issues, or no?

Is there any way to get the browsers to recognize those two resources?

How would the browser recognise them? They don't exist in the location specified :p

You could try and find these images and copy them to the location (where the browser is expecting them to be..). Or search your css files to find where they are mentioned, and either delete them or replace with a background colour.

There seems to be about 6 different shades of grey around your slider. I would try and replace them all with the same colour - the colour that surrounds your mate Alvin!

There seems to be a number of layers around your slider. Once I'd corrected the colour (as above) I would investigate simplifying it a litttle - it looks broken currently.

AndrewGSW
08-05-2012, 05:00 PM
If you delete your slider title and put the text "Popular Posts" in the (currently empty) h2-element that appears before the slider it starts to look a bit neater.

tempz
08-05-2012, 05:51 PM
You want to remove the gray background from the slider?

find:


smooth_slideri jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal

Add:


background:none;

mrniceguy
08-05-2012, 09:45 PM
There seems to be about 6 different shades of grey around your slider. I would try and replace them all with the same colour - the colour that surrounds your mate Alvin!

There seems to be a number of layers around your slider. Once I'd corrected the colour (as above) I would investigate simplifying it a litttle - it looks broken currently.

That's what's weird... The issue appears to be with the slider somehow. When the slider plugin isn't activated, that section of the sidebar doesn't show all of those issues.

I currently have the background, and borders for the slider and the thumbnails set to #E8E8E8, which is the color of the sidebars.

mrniceguy
08-05-2012, 09:56 PM
You want to remove the gray background from the slider?

find:


smooth_slideri jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal

Add:


background:none;

Thanks for the suggestion. Problem is, I can't find that code in any of my .php files. I'm using Wordpress, by the way. Any idea where I'd find that? I was under the impression that Firebug would tell me which file specific code is in, but either it doesn't, or I don't know where to look for that information.

Any suggestions?

mrniceguy
08-05-2012, 10:11 PM
You want to remove the gray background from the slider?

find:


smooth_slideri jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal

Add:


background:none;


Even though I can't find the actual code where this is from within Wordpress, I decided to add this from within Firebug. I did, but it didn't remove the dark gray stuff.

Did I add your suggestion to the wrong place?

Here's a screenshot (http://tinypic.com/r/2ugkpxe/6)of what I did.

mrniceguy
08-05-2012, 10:14 PM
I figured it out.

It seems the dark border was coming from the master.css file on line 1025. The .sidebar ul li ul li style defined a background of #d2d2d2 which is darker than my sidebar background of #e8e8e8.

I really appreciate you guys taking time out of your day to try to help me.

mrniceguy
08-05-2012, 10:16 PM
If you delete your slider title and put the text "Popular Posts" in the (currently empty) h2-element that appears before the slider it starts to look a bit neater.

Where would that be? I don't see that in the master.css file.

AndrewGSW
08-05-2012, 10:31 PM
Where would that be? I don't see that in the master.css file.

?? It won't be in the .css file, it's in the main html content. Search for "Popular".

Actually, as indicated by tempz, it might be better to remove all these grey borders and leave them as the default transparent - so that the background colour of the sidebar shows through. But, hey, if it ain't broke!

tempz
08-06-2012, 12:10 AM
You add it to the style not the class XD

Find the file where you imported the slider into your website, if you cannot find it.

Create a style under the class add background...

Also check in the JavaScript it might style the slider using JS.

mrniceguy
08-06-2012, 01:00 AM
?? It won't be in the .css file, it's in the main html content. Search for "Popular".

Actually, as indicated by tempz, it might be better to remove all these grey borders and leave them as the default transparent - so that the background colour of the sidebar shows through. But, hey, if it ain't broke!

Yes sir, I'm taking notes, but for right now, I just wanna get this thing looking right. But thanks!

mrniceguy
08-06-2012, 01:12 AM
You add it to the style not the class XD

Find the file where you imported the slider into your website, if you cannot find it.

Create a style under the class add background...

Also check in the JavaScript it might style the slider using JS.

So I should add it to the style.css file, then?

I didn't import the slider into the site, it's a plugin, so I just clicked a few buttons to install and activate it.

Here's the directory (http://tinypic.com/r/r0p8uf/6)I saw when I navigated deep under the root directory under my website via ftp, the js directory.

Is that the one you're talking about?

If so, is this (http://tinypic.com/r/20aq4d4/6)the file you say I should add that to?

mrniceguy
08-06-2012, 07:19 PM
You add it to the style not the class XD

Find the file where you imported the slider into your website, if you cannot find it.

Create a style under the class add background...

Also check in the JavaScript it might style the slider using JS.

Tempz,

I got your private message, however I'm unable to respond for some reason.

Can you please send me an email so I can email you the information you need?

alvin@get2theleague.com

Thanks!

mrniceguy
08-07-2012, 03:02 AM
?? It won't be in the .css file, it's in the main html content. Search for "Popular".

Any idea where/how I'd find that html content? In the wordpress editor, all I see are a bunch of .css and .php files.

The only other html content I can think of, is what I see when I look at the code that's generated for each individual post on my blog.

Coding Start
08-07-2012, 05:59 AM
Do you have been try to change script code inside of the plugin? You can change some script code until you get the best result.

AndrewGSW
08-07-2012, 12:39 PM
Any idea where/how I'd find that html content? In the wordpress editor, all I see are a bunch of .css and .php files.

The only other html content I can think of, is what I see when I look at the code that's generated for each individual post on my blog.

PHP constructs HTML. But I don't use WordPress so can't help you with this.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum