I've been trying to customize Blogger's Simple template and have hit a wall in getting the background image for footer-outer to match up - I am still learning CSS and am not sure where the padding on left is coming from or how to get it to completely cover up the repeating background of body-fauxcolumn-outer at the very bottom. Or even if this is the best way to be coding it. Please help!
http://fantasyartofetsy.blogspot.com/
Here's my edited code -
.footer-outer {
width: 1000px;
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-bottom.jpg) no-repeat top center;
background-color: #093e60;
}
.body-fauxcolumn-outer {
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-middle.jpg) center;
background-repeat:repeat-y;
}
Seems better with the following modification:
.content-inner {
10px 60px 0 10px;
}
The background image is now displayed horizontally as intended I guess but there's still text displayed half on the image half on the blue background. Where do you want it to be displayed?
EDIT: maybe also modify that:
.footer-inner {
padding: 80px 15px 0 15px;
}
Related
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I am trying to make the search bar broader on this website but I am stuck on how to do so. Here is the code,
.searchform span .s {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
font: bold 13px Arial,Helvetica,sans-serif;
padding: 6px;
width: 135px;
}
Please guide me how to make the search area broader as depicted in the image below,
In .searchform span .s, add:
width: calc(100% - 20px);
And then extend your background image on span.searchfor to fit.
you have two style.css file, the width: 100px, override your width: 135px,beside the background for '.searchfor' is too small to cover 135px
The issue is that the span.searchfor div has a background image
This is a fixed width image so when you try and make the input longer you are not seeing it.
A quick fix will be to take the colour from the image #f9faf8 and apply it to the specific input and make it longer.
Adding this to your css file will fix the issue
.searchform span #sr {
width:170px;
background-color:#f9faf8;
}
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
so here i'm trying to set some images to be my menu bar (in the header), the sample images are:
the idea is, when on page load, only the upper side of image will be shown, but, when the image is on mouse hovered, the image will switch to to bottom side only. how is this possible?
here's what i tried to do, but it doesn't work:
.from
{
width: 100%;
list-style: none;
height: 63px;
}
.from:active, .from:hover
{
background-position: 0px -63px;
}
.from:current
{
background-position: 0px 0px -63px;
}
any idea how to do this properly? please note that i prefer it in div tag rather than ul li tag. oh, off topic, i also considering to implement it on the twitter bootstrap, any good advice on doing this?
.from .from-1 a.current
{
background-position: 0px 0px ;
}
background position with two parametrs in px.
I'm creating a CSS button and it is working ALMOST perfectly. The problem is that when the button is larger than its allotted space, its end drops off to the next line. It also extends the page width to fit it properly, but then the end is on the next line >=(. Extending the page is perfectly fine, but the button should be whole.
Here is my example page...
http://www.lolstrategies.com/test/button_sample.html
It uses two tables and the button needs to also be in a table.
My current css uses float: left to push the images together as you can see by viewing the source. I'm hoping that it doesn't all need to be completely redone without float but I am willing to do so if that's the only answer.
The image I'm using is this:
You don't have to completely redo it. Just a couple of small changes. Live example: http://jsfiddle.net/tw16/Pwmcn/
.buttonLarge {
height:22px;
margin: 0 22px 0 12px; /* add this */
}
.primaryLargeButtonEnd {
width: 12px;
height:12px;
padding: 0px 0px 0px 5px;
display: inline-block; /* add this instead of float:left */
background: transparent url('./composite__V153767378_.png') no-repeat left -75px;
}