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
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}
In the screenshot that I hvae shared you can spot a form, at it is clearly visible that the form is shown with a scrollbar(i.e. the form has a lot of content to be displayed). What I,m trying to achieve is simply display the whole of the form on the parent webapage. I have shared the html as well as css of the main page visible , so that you can look and suggest the edits needed to be made in order to do so.
This page's code is
<!DOCTYPE html>
<html>
<head>
<title>Control Panel
</title>
<script src="http://localhost:1211/js/main.js">
</script>
<link rel="stylesheet" type="text/css" href="http://localhost:1211/css/main.css">
</head>
<body>
<header>
<?php echo "USERNAME"?>
<span>
<a id = "log" href="">Logout</a>
<span>
</header>
<hr>
<nav>
<button>Add Record</button><br><br>
<button>Update</button><br><br>
<button>Perform Query</button>
</nav>
<section id="workarea">
</section>
</body>
and its corresponding css is
header
{
padding-left: 30px;
display:inline;
}
hr
{
margin-top: 10px;
}
#log
{
float: right;
margin-right: 20px;
}
nav
{
float: left;
padding-top: 100px;
width: 20%;
height: 500px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-width: 2px;
}
section
{
float: right;
margin-top: 100px;
width: 78%;
height: 500px;
}
Please suggest me the changes I need to make in order to display the form in the whole 'nav' tag area. Your help is really appreciated
I finally figured it out , for some reason the new object that was being created inside 'nav' has some problem in it , made the following changes in my css
section > object
{
width : 70%;
height: 950px;
}
and it worked like a marvel :)
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/
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;
}
);
}
}```