Working with Chelsea Warm, BigCommerce theme. I was able to adjust the padding around the promotional banner (see screenshot), with the following code, added to Storefront>Footer Scripts in the control panel:
`<style>
.banner.rte {
padding: 0px;
}
</style>`
But I need the text to be centered in the banner (it's near the bottom instead and looks off-balance). Anyone know a good tweak for this?
Best, YT
Screenshot of header - link
OK so here is the css you need to put into your css file
.banner strong {
position: relative;
bottom: 22px;
}
and it will look like this :
Thanks
Related
On my website, when I show adverts on mobile, I get an odd yellow rectangle obscuring the right-hand side of my Google AdSense:
That's my own wobbly question mark in the the yellow space, and I've fill-flooded the background to make it stand out more.
I've examined the styles through the Chrome Developer Tools window, but I cannot find anything set to yellow in the style hierarchy, and I'm using mostly the bog-standard minileven WordPress-supplied theme. What could be causing this? How can I correct the CSS to get rid of this? Ads look fine on the desktop version, only mobile.
A typical page is this one.
Looking at your site and viewing an Ad I do see some extra spacing (the one I viewed is different than the one in your screenshot)
When I view the DOM this is the code that is causing the extra spacing:
<td class="rh000c">
<div class="rh-box-empty rh000"></div>
</td>
Here is the related CSS:
.rh000c {
height: 102px;
padding: 0;
width: 2px;
}
.rh000 {
background-color: #ffffff;
display: inline-block;
height: 102px;
overflow: hidden;
padding: 0;
width: 2px;
}
For some reason the Ad is passing this code into its iframe so I don't think there is much you can do to remove it. (Well, there might be ways to remove this code but you might violate your service agreement with the Ad agency if you do)
If I were you I would contact the Ads company you are using (it seems that you are using Google Ads) and ask them about this issue directly. Hope that helps.
I had another closer look at the problem, and for some reason or other there is a rule like this:
embed, iframe, object {
width: auto;
}
For some reason that I can't work out, this overrode the explicit <iframe width="320", so by trial and error I found that adding this to my custom CSS:
.mobile-theme .adsbygoogle iframe {
width: inherit;
}
Overrode the width: auto; and I now no longer get my yellow border. There's still a bit of an ugly yellow border at the link widget at the bottom, but at least that's not obscuring anything, so I'll ignore it for now...
I am having a problem setting the right place to one link in my css code:
The link is a text "hide" placed on the upper right corner on the footer banner of this website: http://iknowfirst.com
I want to place a little bit lower
The specific css code is here: http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/css/style.css
Besides that, I cannot see the image: "images/mailwhite.png" that is set to show on the email field.
Someone can give me a light?
Thanks in advance!
the text "hide" inside ul.hiderzone - you need to decrease margin-bottom for the ul.
About css:
css path is:
http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/css/style.css
path to image written as
url(../images/mailwhite.png)
so, real image path is:
http://iknowfirst.com/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png
UPD: you copy css rules into page body, so fix line 266.
Instead:
background-image: url("../images/mailwhite.png");
place:
background-image: url("/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png");
Here is the solution for your 2 issues
1) Placing a link
Solution : in your CSS
.hiderzone {
right: 10px;
top: -12px; /*Edit this, this will help you*/
bottom: 2px;
/*top: auto;*/ /*You should not use "TOP" twice */
list-style: none; }
2) You can use relative or absolute image path
Relative Path
background-image: url("../images/mailwhite.png");
Absolute Path
background-image: url("/wp-content/plugins/yith-footer-banner/assets/images/mailwhite.png");
I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.
Let me know if you need any of the HTML. Below is the CSS I've used:
.branding-data {
width: 960px;
background: #333;
height: 50px;
}
.logo-img.center {
display: block;
width: 200px;
margin: 0 auto;
background: #ccc;
}
For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:
If you don't already have Delta installed (recommended whenever using Omega), do it.
Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).
Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".
Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.
Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).
In "global.css," select the branding region, and center the text (code is as follows):
.region-branding {
text-align: center;
}
Then, insure that no float is applied to the logo image, and that it has margin: 0 auto
.logo-img {
float: none;
margin: 0 auto;
}
If it doesn't work the first time, remember to always clear your caches before freaking out.
Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.
Hopefully this helps someone.
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.