is there a CSS method to get rid of the white box behind the Google ad on my Wordpress site here
Is it possible to get rid of the white box behind the Google ad only and not the other widgets within the sidebar. If this is not possible, is there a way the box could be shrunken with css?
I assumed if I went to the widgets section of the style.css file I could resolve the issue there, but I tried editing this snippet of code but I couldn't find anything that could resolve this issue.this is probably the wrong location where the issue could be found which is why I provided the full script here.
I hope my issue makes sense as this is my first stack overflow question
Full CSS file here
The script below is the section I tried editing one time
/*
* 09: Widgets
*/
.widget {
margin: 0 0 20px;
padding: 15px 20px;
color: #757575;
background-color: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.06);
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
word-wrap: break-word;
}
.widget-title {
color: #353535;
font-size: 1.154em;
margin: 0 0 10px 0;
line-height: 1.3;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 0.5em 0;
list-style-type: none;
}
.widget p:last-child {
margin-bottom: 0;
}
.widget_archive li a:before,
.widget_links li a:before,
.widget_categories li a:before,
.widget_meta li a:before,
.widget_recent_entries li a:before,
.widget_recent_comments li .comment-author-link:before {
font-family: "icons-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
width: 14px;
text-align: left;
display: inline-block;
vertical-align: -15%;
}
.widget_archive li a:before,
.widget_links li a:before,
.widget_categories li a:before,
.widget_meta li a:before,
.widget_recent_entries li a:before {
content: "\66";
}
.widget_recent_comments li .comment-author-link:before {
content: "\4a";
padding-right: 0.25em;
}
.widget select {
max-width: 100%;
}
.widget_media_image img {
display: block;
}
Try background-color: transparent;
#custom_html-4 {
background-color: transparent;
}
for temporary solution by css you can use. if you need to hide only white background from yellow box
div#custom_html-4{
background:none;
box-shadow:none;
}
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I'm using a CSS navbar that has drop down menus. I had a problem with scaling on my site, but some helpful users here helped me fix it. The solution they gave me was to change the position attribute to absolute.
This works fine for text boxes and images, but changing the navbar code to absolute breaks it and makes some of the buttons go to a second line.
Is there a way to stop this from happening and also stop the navbar from bugging out when the page is resized? Sorry if this is hard to understand. This is my navbar CSS, the HTML is just a list:
Jsfiddle: http://jsfiddle.net/qN8sm/embedded/result/
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 150;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
What you could try is set min-width:(amount of pixels)px. This sets the minimum width for an element, but if unless you set a max-width, it can upscale.
I am using jmenu.js and setting child menu elements to have transparency. Problem is that the child elements with transparency show the parent's (i.e. main menu bar) background. What I want is have transparency on the child menus which show through to the page background. The CSS is:
.jMenu {
display: table;
margin: 0 0 0 50px;
padding: 0;
}
/* First level */
.jMenu li {
display: table-cell;
background: url('../images/tile_gray.png');
margin: 0;
}
.jMenu li a {
padding: 10px;
padding-right:55px;
display: block;
background-color: transparent;
color: white;
text-transform: uppercase;
margin-top:2px;
cursor: pointer;
font-size: 14px;
font-family: Myriad Pro, Lucida Sans, Segoe UI, Calibri, sans serif;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
/* Lower levels */
.jMenu li ul {
display: none;
position: absolute;
z-index:9999;
padding: 0;
margin: 0;
}
.jMenu li ul li {
background-color: #fff;
display: block;
padding: 0;
}
.jMenu li ul li.arrow {
background: url('../images/tile_pink.png');
padding: 0;
border-bottom: none;
padding-bottom: 5px;
margin-top: 10px;
}
.jMenu li ul li a {
font-size: 13px;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
text-transform: none;
padding: 7px;
display: block;
border-top: 1px solid transparent;
text-decoration: none;
}
.tran {
background: rgba(120, 120, 120, .2);
}
.jMenu li ul li a.isParent {
background: url('../images/tile_darker.png');
}
.jMenu li ul li a:hover {
background: url('../images/tile_green.png');
}
UPDATED
I changed the css to have the background transparent not on the anchor but on the li:
.jMenu li ul li {
background-color: #fff;
display: block;
background: rgba(0, 0, 0, .4);
padding: 0;
}
It looks like you have a background image on all .jMenu li. Even though you think you are just applying this background ('.../images/tile_gray.png') to only the first level, it is leaking down into the inner <li>'s
Try adding background-image: none; to your child li:
.jMenu li ul li {
background-color: #fff;
background-image: none;
display: block;
padding: 0;
}
This might work but it is hard to tell what exactly is going on without seeing it in action and without your HTML.
IE only knows how to make smokers who've just quite, smoke again!!
I'm trying to perfect this responsive Navigational Menu (as well as another website I've developed) to RESPOND with IE8 (i'm not sure what the NAV looks like in www.testing123.co.za/test1.htm
when I re-size the my browser window, it seems like the NAV is ignoring my media queries OR IE8 is not liking the float involved in this design. I seem to think it's the latter.
I've done some research and have hear that this should be included in your page for the media queries to be applied, but I still have no luck when including the js file. I'm not sure what I've probably done wrong here?
I included the js file like so:
<script src="css3-mediaqueries.js"></script>
Anyway, I'd appreciate some clarification at what must be done to correct IE 8 Float problems (assuming this is the issue).
Appreciate your help, thanks
CSS goes like:
nav {
width: 90%;
margin: 0px auto;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 100 24px/1.4 TrumpGothicWestRegular;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
min-height:80px;
padding-top:60px;
}
nav li a img { padding-bottom:5px; display:block; margin: 0px auto; }
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
nav li a:hover {
background: #222;
}
nav li:last-child a {
border: none;
}
Viewports under 1100px (small-device1100.css):
nav li a {
font: 100 21px/1.4 TrumpGothicWestRegular;
min-height:inherit;
padding: 10px;
}
nav small {
font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
}
nav li a img { display:none; }
Viewports under 825px (small-device825.css):
nav li a {
width: 33.333333333333333333333333333333%;
border-bottom: 1px solid #fff;
font: 100 24px/1.4 TrumpGothicWestRegular;
}
nav li:last-child a, nav li:nth-child(3) a {
border-right: none;
}
nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: none;
}
Viewports under 350px (small-device350.css):
nav li a {
width: 50%;
font: 400 21px/1.4 TrumpGothicWestRegular;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(3) a {
border-right: 1px solid #fff;
}
nav li:nth-child(4) a, nav li:nth-child(5) a {
border-bottom: 1px solid #fff;
}
I have a huge amount of elements in my website... And since I added the following css... Some elements inherit from these css styles... While they don't have anything to do with it: other scope, no direct definition to the css style etc... What am I doing wrong?
#InformationForDiv
{
width: 205px;
height: 180px;
background: #FFFFFF;
clear: both;
float: left;
margin: 0 35px 0 35px;
text-align: center;
}
#InformationForDiv ul
{
text-align: left;
padding: 0px;
display:block;
}
#InformationForDiv li
{
border-bottom: solid 1px #D6D6D6;
padding: 0px;
list-style: none;
line-height: 20px;
display: block;
}
#InformationForDiv p
{
display:inline;
float:right;
margin:0;
text-align:right;
font-size: 16px;
color: #B02229;
}
#InformationForDiv li a:link, a:visited
{
color: #544B42;
text-decoration: none;
font-size: 12px;
width:100%;
display:block;
}
#InformationForDiv li a:hover
{
color: #544B42;
border-bottom: 1px solid #544B42;
font-size: 12px;
}
#InformationForDiv li a:visited
{
color: #544B42;
text-decoration: none;
font-size: 12px;
}
#InformationForDiv img
{
margin: 10px 0 5px 0;
}
At least this one:
#InformationForDiv li a:link, a:visited
will select all a:visited elements and it doesn't look like your intention.
Perhaps because those elements have an ancestor in the HTML document in which they exist that has the ID "InformationForDiv".
Its generally not a good idea to include in an external css selectors the use of specific element IDs. External CSS ought to rely on class names to select appropriate elements.