I have a problem with making header transparent. I have created an image and placed it in the header however there is white background behind it. How I can make this background it transparent or end it after slider?
CSS class: #zo2-header.zo2-sticky
Thank you!
The problem being is that all elements are a child of <section class="wrapper boxed container"> which contains the following:
body.boxed .wrapper {
background-color: #fff;
}
This means that no matter what colour or transparency levels you set to your header, the background will always be white behind it.
You either need to:
Move the section with the id zo2-header-top outside of <section class="wrapper boxed container">
Remove the background colour that has been assigned to body.boxed .wrapper, add something like the following to your CSS file .white { background: #FFF; } tand then assigned class="white" to all sections apart from the header.
rgba(0,0,0,0.4);
that a will handle transparency, adjust the value as required.
As I could see in your template.css line: 2433 there is a rule:
body.boxed .wrapper {
background-color: #fff;
}
You have to remove it and add background-color only to the div that needs to have background.
Related
<div class="text-center">
<re-captcha
[ngClass]="{'face err-captcha': captchaResponse==false && submitted}"
class="recaptcha" (resolved)="resolved($event)" siteKey={{captchaSiteKey}}>
</re-captcha>
</div>
Image
If I dont use inline block then that captcha block doesn't get centered. When I remove it then border goes away but the captcha gets out of order.
.recaptcha {
display: inline-block;
background: #f9f9f9;
}
With black background, Image it actually not a border but looks like one. If there is a way to center it without using inline block that might do the trick.
.recaptcha {
display: inline-block;
background: #080808;
}
This is normal behavior for display: inline-block; So there are some solutions to this:
1. margin-right(or any side where this space or border coming): -1px;
2. font-size: 0; to the parent and give deired font size in inner items
<div class="text-center"><re-captcha [ngClass]="{'face err-captcha': captchaResponse==false && submitted}" class="recaptcha" (resolved)="resolved($event)" siteKey={{captchaSiteKey}}></re-captcha</div>
3rd one is may be looks wired to you but this is also a cool solution. remove all the space and enters from your code, basically minimize it.
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
There are 2 lines shown below the breadcrumbs on all category pages. The border-bottom CSS is set to
border-bottom: 1px solid #color
Making any changes to margin, padding or the border width makes no changes to the border bottom to just 1 line. Need to know how to make it one line.
Site url: http://www.catholic-collectibles.com/blroandpasa.html
If you can't remove the outer .breadcrumbs div, the simplest way is to just use
.breadcrumbs .breadcrumbs { border: none }
Guaranteed you won't have any extra lines no matter how many other .breadcrumbs you have inside the outer .breadcrumbs div.
The style you described is set for .breadcrumbs, and you have two nested divs with this class, so the style is applied to both. Either remove the class from one of those elements, or change the style definition to only apply to the correct element.
<div class="breadcrumbs">
<div class="breadcrumbs">
Home
Shop By Brand
Bliss
</div>
</div>
You need to delete one div or add this css (this css removes the border on the inner .breadcrumb):
.breadcrumbs > .breadcrumbs {
border: none;
}
if you can't change the second .breadcrumbs class you can do this:
.breadcrumbs .breadcrumbs:nth-child(1) {
border: none;
}
If you zoom in with your browser here you can notice that there's only a padding-left, nothing at the right margin (so the div "touches" the end of the screen). I can't seem to fix this. I tried applying a padding-right:2em to both body, #page.. without any luck!
Do you have a solution..?
You might need to add an extra conainer block which will hold your page content. You can try something like this:
<div id="layout">
<div id="page">
<!-- Your page content here -->
</div>
</div>
After the new structure is built, the resulting #layout div should have the padding of the body element and some of the #page styles:
#layout {
min-width: 1000px;
margin: 0 auto;
padding: 2em;
}
If you don't want to change the current HTML structure, there is also a 'dirty' trick you can try: add a gray border to the '#page' div:
#page {
border: 2em solid #e2e2e2;
}
But be careful when you use something like this because there might be unwanted side effects.
As a final note, you might want to move the main CSS file after the rest of the style sheets. Otherwise you will end up with some of your styles overriden by the subsequent files.
I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}