Using https://templated.co/ion
I’m having trouble re-positioning the banner a little lower to allow for use of a logo image at top left instead of text. When I load the page with the new header height, it briefly flashes the correct height white background, but the banner doesn't move down and the page reverts to original positioning, leaving the logo overhanging the banner image, even though I replaced some inherits and increased height of nav.
Any suggestions appreciated.
Most probably, this is what you're looking for (adjust to your needs - 5em is demonstrative):
#header {
height: 5em;
line-height: 5em;
}
#skel-layers-wrapper {
padding-top: 5em;
}
Please note this has to be loaded after style.css (or placed at the very end of it, if you place your own mods inside this file). Alternatively (but not recommended), you could just modify the existing values on lines 880 and 884.
Typically, the best way to go when making customizations is to just place them in a separate file and load it after the original resource, which should remain untouched.
This provides your project with better code control, increased maintain-ability & upgrade-ability. Placing the custom file after the original one allows you to apply changes without having to increase the specificity of the original selectors.
Related
The link below is where to find my website that I am making for a university project and for a client.
https://homepages.shu.ac.uk/~b7009049/wordpress/
Once the webpage loads up, you will be introduced with a page title populated with an image and two buttons. One will lead you to the About us and the other will take you to services. Click on the services button as that's where the problem is please.
Basically there is a white gap and I want the image below to completely fill up the page. Like a full screen except that you are not pressing F11 .
I don't know where the issue is. If I remove the header page, it does not do anything to clear the gap. So I don't think the header is the problem.
I am using fusion slider + a plugin called layerslider. If that helps.
I can provide a screenshot of what I am editing upon request if needed.
Thank you very much.
You have two things producing white space at the top of https://homepages.shu.ac.uk/~b7009049/wordpress/services/
One is padding applied to the "main" element. You can get rid of that with CSS:
/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
padding-top: 0;
}
You might also want to get rid of the padding at the bottom of #main element on this page - padding-bottom: 0, of course
That will still leave a 20px white bar at the very top, produced by a stray 'p' element that has a bottom margin of 20px. Though this paragraph happens to contain a jQuery script (which probably shouldn't be there), there's another stray p element further down the page - also contained within "ls-" elements - also producing a 20px white separation between two full-width image elements, that happens to be empty.
I don't know exactly where these p's came from. You might have to dig into the applications involved - both Layer Slider and, I think, the Fusion Page Builder - and how they were deployed here, to remove the unwanted separation where it originates.
If they can't practically be cleaned up, you might have to correct via CSS again. Just to get rid of the effect on display on this page, you might try
/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
margin: 0;
}
You could also try something like the following, if you were concerned about affecting other ".post-content" ps outside of Layer Slider.
/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
margin: 0;
}
Another approach would be to apply a negative margin to .ls-fullscreen-wrapper:
/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
margin-top: -20px;
}
Without actually working on the installation or examining it more thoroughly, I couldn't say for sure that the code I've provided would be sufficient and also wouldn't produce undesirable consequences, but it might be a start. You could add the snippets to the Customizer Additional CSS box, and see how things turned out.
ADDITIONAL NOTE AFTER COMMENTS
I've gone back to the page and it seems that you have successfully added code eliminating the 20px post-content p margin, but I don't see anything applied or applied and overruled regarding the 90px top (and bottom) padding on #main.
I don't know how exactly you're trying to address that problem. I previously recommended utilizing the Wordpress Customizer (assuming you're in Wordpess 4.7 or later) - see https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.
From inspection I can see that the unwanted padding in question is added via the theme/Fusion stylesheet. The Customizer will add your new CSS to the underlying html, after other stylesheets have been loaded, so should override duplicated selectors. If it's still not taking, you could try, adding !important to the new styles. I think most coders would view this method as a kludge, but all of this after-the-fact correction effort is kludge-y.
/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE */
.page-id-2546 #main {
padding-top: 0 !important;
}
If that doesn't work - if inspection of the element doesn't show the code being applied at all, for instance - then I'd look to caching issues and peculiar theme characteristics, not to mention typos...
What worked for me was adding this code to my css
.ls-overflow-visible {
overflow: hidden !important;
}
in my case the white piece above my menu was not caused by the padding but by an overflow that was only there when I switched to full width modus. You could of course delete this code:
.ls-overflow-visible {
overflow: visible !important;
}
from the plugin css, but it will return when you perform an update.
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.
I do not want to have any margin on the print page, since otherwise the background image looks messed up:
https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0
However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages):
https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0
body {
margin: 30px 0;
}
That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?
Edit: sorry for the hideous example, but this is basically the code:
http://jsfiddle.net/yugv84qw/
If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include
#page {
margin: 1cm 0;
}
You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.
You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:
#page:first {
margin: 0
}
Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.
Sadly, the control of printing from the web, even in this day and age, is not an easy process.
I've seen some interesting css trick on vk.vom recently
background: url(/images/icons/mono_iconset.gif?8) no-repeat left -237px;
width: 15px;
height: 11px;
Here is this spritesheet: Spritesheet.
How is this works?
? has nothing to do here, its the left -237px which determines which icon to show.
It is the background-position: x y along with height that determines which part of an image needs to be shown.
More about css sprites http://cssglobe.com/creating-easy-and-useful-css-sprites/
Seems that the URL parameters have nothing to do with the spritemap itself.
Different heights, on the other hand, are handled by the height in the CSS you provided. Moreover, the y-offset determines which icon will be used.
The URL parameter is probably inserted to avoid problems with caching when deploying a new version of that stylesheet. If you append something using the query string (like ?8), the browser will be tricked into thinking this is a whole other file, so it will discard the cached file and download the new one instead.
The "trick" you are looking for is a CSS sprite. Basicly, every icon is loaded into a single image and the icons in the sprite are used as a background image for a fixed-width container (like an anchor with display: block; or a div). Then, when playing around with the backgound-position property, different parts of the sprite will be visible.
Read more about CSS sprites in this article.
Hoping this jumps out at someone...
I'm using Fancybox 1.3 w/Foundation. The issue I'm having is something in the Foundation CSS is forcing my Fancybox pop-up to render too small. When I inspect the HTML on the rendered page, I see an inline style setting the height at 175px...
I'm stumped. If I remove the Foundation CSS file the problem goes away. I'm guessing I need to change something in the Height attribute but haven't had any luck.
Sample:
http://198.cmsintelligence.com/site/about-us (click 'play this video')
Without more code it's hard to debug in dev tools. But I believe your culprit is here: #fancybox-inner object {
In DEV tools that ID is applying 100% height to an object, which is what is loading your video. The object itself has a height value of 600px, but it's being overridden because that ID above also has !important on the height.
Also the height of 175px you mentioned, that inline styling is being generated dynamically based on content nested deeper within. I don't believe the fault is there.
EDIT: Got it!
I have highlighted the culprits in an image below. The first is on Line 20 of fancybox.css - the last two line 1 of foundation.min.css (no doubt a huge reset rule). Override these in some way and you'll be golden.
#fancybox-inner embed, #fancybox-inner object {
height: 100% !important;
}
object, embed {
height: 100%;
}
img, object, embed {
max-width: 100%;
height: auto;
}
http://imageshack.us/photo/my-images/692/fancyboxbug.jpg/
Just an idea, maybe you've tried it since it's pretty in your face. Like you said, the inline style is making it 175px so why not override it in your Foundatino CSS.
div#fancybox-wrap{
height: 480px;
}
You can always add !important at the end of the height(ex. height: 480px !important;) to force it to be that height always, or use em (ex. height: 3em;) to make it fluid and change depending on the screen size your viewer is using. Again all newbie things since I'm not that vintage in this field but maybe that helps in some way.