I have my wordpress theme built but there are 2 problems, the first the twitter feed I have in my footer (not a widget) is taking the styling for something else instead of the styling I gave it. I styled the links etc for the feed but it's not styling properly. Also I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like, any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
download addon fire bug
Right click on image and click on inspect eliment with fire bug then chang the css of your image
in your case
.art-footer img
{
border-width: 1px;
}
and make it
border-width: 0px;
n here is the screen shot of your site
Related
Lets start with I'm using square space CSS code injector. I am trying to have some images placed behind the text links that read (menu, what we sellin', wholesale) With my background image it is hard to see the links. I would like to add small wooden boards as the image behind them. Appreciate any help .
My website: www.slurpnsnack.com My website
edit: I do not want to add a background image to the header itself. I am wondering if there is a way to attach the picture itself to behind the link, or just how to go about placing my own links there.
Your links are held in a div with class .header-nav-item
So CSS along these lines:
.header-nav-item {
color: white;
background-image: url(wood.jpg);
}
should be enough, though you may want to play around with background positioning and sizing depending on how consistent you want the look to be on the various sized items and what your image is actually like.
I have a website that works fine if a certain plugin (Business Listing) is not activated. But once the plugin is activated the logo disappears on the pages it's on. If you click and drag on the space where logo is suppose to be it will show itself temperately until mouse button is released. The same for the image with parallax effect. It shows on the page but with no parallax effect.
I can't find the conflicting code. Any advice?
www.newstralia.co.za
It seems that a div that contains your image logo has zero opacity In Customize>>Custom CSS add this:
.pl-pro-version .pla-fade {
opacity: 1!important;
}
For your parallax image I guess you need something like this (again in Customize>>Custom CSS):
.pl-bg-cover {
background-attachment: fixed;
}
Consider that your image has small height and will stretch.
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I have managed to embed a PowerBi Dashboard into a webpage.
Unfortunately, it looks hideous. For example, the padding is ridiculous; The title is stuck in the top-left corner, which I'd like to remove; all the content is loaded into an iFrame, which if I do not set the height and width, makes the dashboard near-invisible and non-responsive (in terms of window scaling); nothing is centred...
I have tried overriding the CSS. For example, I tried to set the display: none !important; property on the header (to remove the title), but it has no effect. I also tried changing the background color of the iFrame from grey to match the color of the webpage, but that too did not work.
Does anyone know how I can style my PowerBI dashboard and embed it without an iFrame (is this even possible?)?
As far as I know, at the moment, it's not possible to embed anything from PowerBI to a web page without an IFrame.
Do you really need a dashboard, maybe a report would do it? At least you'd be able to place the components as you like.
I had the same issue. I managed to use CSS to re-style the iFrame for both reports and dashboards.
I'm using an angular project and added the CSS to my component that is displaying the Iframe.
border-width: 0; //Removes Iframe horrible border
I also adjust the height, width and position.
If you struggle to find what element to change the CSS, use the inspect element in Chrome and test by changing some CSS on each element.
I was able to hide and change the position of the title when I found what div it was in with:
visibility: hidden; //true to show
text-align: centre; //left or right
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?