I'm creating a web site that fits to the screen with Wordpress.
When the site owner logs in, the admin bar will appear but it adds the following style:
html{ margin-top: 28px !important; }
This causes a vertical scroll bar to appear. Is there any way to fix this using just CSS?
Someone had a similar issue but he got no answer.
My relevant html structure:
<html>
<body>
<div id="page">
<div class="site-main" id="main">
<div class="content-area" id="primary">
<div role="main" class="site-content" id="content">
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
</div><!-- #main .site-main -->
</div><!-- #page -->
<div id="wpadminbar">
</div>
</body>
</html>
And relevant CSS:
html, body, #page {
width: 100%;
height: 100%;
min-width: 350px;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
#primary {
float: right;
width: 100%;
margin-left: -200px;
height: 100%;
}
#content {
margin-left: 250px;
height: 100%;
}
For the admin bar:
#wpadminbar {
height: 28px;
left: 0;
min-width: 600px;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
I've tried using (negative) margins and paddings, also setting the admin bar's position to absolute instead of fixed but no luck.
2022 here.
I recently noticed that WordPress has been setting a relevant CSS variable on the front-end when logged in as an admin:
html {
--wp-admin--admin-bar--height: 32px;
scroll-padding-top: var(--wp-admin--admin-bar--height);
}
#media screen and (max-width: 782px)
html {
--wp-admin--admin-bar--height: 46px;
}
}
This is very convenient, as it allows you to do things like this (making a hero element as high as the viewport, but subtracting the height of the admin bar):
.hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
There is a slight issue with that, though: If you’re not signed in as an admin, the CSS variable is not set, and this can break things like calculations.
This can be fixed by checking for a body class that WordPress also sets:
.hero {
min-height: 100vh;
}
body.admin-bar .hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
…but this can get messy rather quickly, so I came up with a little one-size-fits-all solution that I’ll probably be using a lot:
body:not(.admin-bar) {
--wp-admin--admin-bar--height: 0px;
}
This allows me to do things like this, and not having to worry about whether the user is logged in or not:
.site-header {
top: var(--wp-admin--admin-bar--height);
}
Look into wordpress/wp-includes/class-wp-admin-bar.php at the beginning, and you will find this. Watch closely the comments for the actual answer:
if ( current_theme_supports( 'admin-bar' ) ) {
/**
* To remove the default padding styles
* from WordPress for the Toolbar,
* use the following code:
* add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
*/
$admin_bar_args = get_theme_support( 'admin-bar' );
$header_callback = $admin_bar_args[0]['callback'];
}
if ( empty($header_callback) )
$header_callback = '_admin_bar_bump_cb';
add_action('wp_head', $header_callback);
wordpress/wp-includes/admin-bar.php contains the default implementation of _admin_bar_bump_cb:
/**
* Default admin bar callback.
*
* #since 3.1.0
*/
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
<?php
}
In your php code (on the page where you DON'T want the admin bar to appear), just add the following:
add_filter('show_admin_bar', '__return_false');
See here: http://davidwalsh.name/hide-admin-bar-wordpress
Try following:
add_action('get_header', 'fix_adminbar');
function fix_adminbar()
{
if (is_admin_bar_showing()) {
remove_action('wp_head', '_admin_bar_bump_cb');
add_action(
'wp_head', function () {
ob_start();
_admin_bar_bump_cb();
$code = ob_get_clean();
$code = str_replace('margin', 'padding', $code);
$code = preg_replace('/{/', '{ box-sizing: border-box;', $code, 1);
echo $code;
}
);
}
}```
Related
Added flex-wrap:nowrap to header in css , no change get reflected.
image of card using sfcard
Title , subtitle and add to cart to be in correct format without overriding
Find the below code snippet which includes the SfCard control with header title and subtitle along with proper styles and alignments for your reference.
Code snippet:
<SfCard ID="HugeImage">
<CardImage Image="https://blazor.syncfusion.com/demos/_content/BlazorServerCommon_NET7/images/cards/steven.png" />
<CardHeader Title="Harrisburg Keith" SubTitle="#CardSubTitle" />
<CardContent Content="Hi, I'm a creative graphic designer for print and new media based in Edenbridge." />
<CardFooter>
<CardFooterContent>
<SfButton CssClass="e-btn e-outline e-primary">Follow me</SfButton>
</CardFooterContent>
</CardFooter>
</SfCard>
#code{
public string CardSubTitle = "#harrisburg_keith";
}
<style>
.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
padding-top: 0px;
}
.e-card .e-card-header .e-card-header-caption .e-card-header-title {
font-weight: bold;
}
.e-card .e-card-content {
padding-top: 0px;
}
#HugeImage {
text-align: center
}
#HugeImage > .e-card-image {
margin: auto;
margin-top: 20px;
width: 64px;
height: 64px;
min-height: 64px;
}
</style>
Refer to the below documentation for more information,
Documentation: https://blazor.syncfusion.com/documentation/card/header-content
Example of finished DPAD
body {
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
}
div#controller {
display: none;
}
div#instructions {
font-size: 20px;
color: white;
position: static;
text-align: center;
}
#media only screen and (max-width: 480px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
background-color: grey;
opacity: 0.6;
height: 33%;
width: 80%;
}
div#controller.dpad {
width: 60%;
}
}
#media only screen and (max-width: 768px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
top: 300px;
background-color: grey;
opacity: 0.6;
height: 50%;
width: 80%;
}
div#controller.dpad {
width: 33%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The CSS is missing! Your mission is to re-create it -->
<link rel="stylesheet" href="env3d.css" />
<script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
<script src="http://css.operatoroverload.com/exercise/game.js"></script>
<script type="text/javascript">
function playGame() {
console.log("playGame");
var game = new Game();
game.setup();
var env;
if (game.env) {
env = game.env;
} else {
env = new env3d.Env();
}
env.loop = game.loop.bind(game);
env.start();
}
window.addEventListener('load', function() {
playGame();
});
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
<div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
<div id="env3d"></div>
</body>
</html>
I have this small little project to complete. However, I'm completely stuck on how to code the mobile controllers using only CSS. I cannot style it to look like the picture.
Can anyone please point me in the right direction of where to go?
Thanks! Your help will be greatly appreciated! :)
Dude, we're in the same web development class. 😂👌
Which part do you need help with?
First, you have to resize and position the #controller and .dpad divs at the bottom of the screen. You need to use the position, width, and height properties for this.
Then you have to position the buttons inside their container divs (also by using position, width, and height). You can select each button individually using the element>element, attribute=value, and/or :nth-child() selectors described here.
In case you need it, this page explains how to vertically center an element by giving it the properties position: relative (or absolute);, top: 50%;, and transform: translateY(-50%);. (Centering horizontally would be position: relative (or absolute);, left: 50%;, and transform: translateX(-50%);
Hope this helps you!
we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.
Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.
trying to make img:
line-height: 0;
vertical-align: top or bottom;
You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}
Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}
Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images.
I was able to solve this adding to the link element these properties:
position:absolute;
z-index:9
and then it should work.
EDIT
Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css:
http://css-tricks.com/perfect-full-page-background-image/
Ok. As you can see from the title I am searching a way to do this: http://preview.ab-themes.com/?product=revelance . Just look how the first text is following you when scrolling down the at a certain point it stops. How can I do this?
What you see there is done using the technique called Parallax Scrolling.
Refer : Skrollr
You can resolve it nice with jQuery.
See working Fiddle
CSS:
#div1 {
margin-top: 400px;
margin-bottom: 500px;
height: 200px;
width: 100px;
border: 2px solid black;
padding: 30px;
overflow: hidden;
}
#flowingtext {
top: 0;
margin: 0;
position: relative;
}
JavaScript:
window.onscroll = function () {
if (($(window).scrollTop() - $("#div1").offset().top) >= $("#div1").height() - $("#div1").innerHeight() && ($(window).scrollTop() - $("#div1").offset().top) <= $('#div1').height()) {
$('#flowingtext').css('top', $(window).scrollTop() - $("#div1").offset().top + "px");
}
};
HTML:
<div id="div1">
<h1 id="flowingtext">
its flowing
</h1>
</div>