I want to create a custom logo so I need change the default logo of the wordpress logo.
Here is the function (inserted into functions.php) which will correctly override the admin logo:
/**
* customize the admin logo that appears in the header
* http://www.wpbeginner.com/wp-themes/adding-a-custom-dashboard-logo-in-wordpress-for- branding/
* #author Paul Bredenberg
*/
function htx_custom_logo() {
echo '
<style type="text/css">
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/assets/images/dashboard-logo.png) !important;
background-position: 0 0;
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
//hook into the administrative header output
add_action('admin_head', 'htx_custom_logo');
Take from Here: http://goo.gl/GuDZM6
HTH!
Here is a great plugin for this, and much more. White Label CMS
function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
padding-bottom: 30px;
}
</style>
Change your dashboard logo to custom logo with this code:
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
</style>
';
}
I did few arrangement:
- support the fullscreen mode
- use the favicon of the site so it is automatically customized for multisites, and you can put some default image if there is no favicon)
I put "width: 12px" to have a square shape for the favicon cover background
If it can help someone here is the code :
function my_custom_admin_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {content:none;}
#wpadminbar #wp-admin-bar-wp-logo > a {
background-image: url(' . get_site_icon_url() . ') !important;
background-size: cover !important;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {width: 12px;}
#media screen and (max-width:782px){ #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {width: 46px;} }
a.edit-post-fullscreen-mode-close.has-icon {
background-image: url(' . get_site_icon_url() . ');
background-size: cover;
}
.edit-post-fullscreen-mode-close.has-icon > svg > path { display: none;}
</style>
';
}
//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'my_custom_admin_logo');
Sunny's answer only overrides the icon of the item. If you want to delete the item completely you can do this:
function htx_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo>.ab-item {
display:none;
}
</style>
';
}
//hook into the administrative header output
add_action('admin_head', 'htx_custom_logo');
Related
I have the code below to open a product label in a lightbox when it is clicked. When it is viewed on a mobile device it displays the same image but on click it opens the label in a new tab. (lightbox is responsive so the image is too small on mobile).
For some reason though when on mobile view, the tag takes up the entire width so that if you click to the right of it, it will open the image in a new tab. I don't understand why this is since I am setting it's width to 100px.
<style>
#lightbox {
position: fixed;
/* keeps the lightbox window in the current viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
/*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
/*background:url(overlay.png) repeat; */
text-align: center;
z-index: 99999;
}
#lightbox p {
text-align: center;
color: #fff;
margin-right: 20px;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
z-index: 99999;
}
#lightbox img {
box-shadow: 0 0 25px #111;
-webkit-box-shadow: 0 0 25px #111;
-moz-box-shadow: 0 0 25px #111;
width:80%;
max-width: 940px;
max-height: 800px;
z-index: 99999;
}
.mobile_label_view{
display:none;
}
#media only screen and (max-width: 950px) {
.lightbox_trigger{
display:none;
}
.mobile_label_view{
display:block;
}
}
.lightbox_trigger{
margin-top:15px;
cursor: pointer;
}
.mobile_label_view{
margin-top:15px;
cursor: pointer;
}
a.label_container{
max-width:100px !important;
width:100px !important;
}
</style>
<div id="wrapper">
<!--have view label text-->
<!--<a href="/image.png" class="lightbox_trigger">-->
<!-- View Label-->
<!-- </a>-->
<!-- <a href="/image.png" target="_blank" class="mobile_label_view">-->
<!-- View Label-->
<!-- </a>-->
<img src="/image.png" width="100px" class="lightbox_trigger">
<img src="/image.png" width="100px" class="mobile_label_view">
</div>
<!-- #/wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
//var image_href = $(this).attr("href");
//Get clicked link src
var image_href = $(this).attr("src");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p onclick=\'hideLightbox()\'>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href + '" />' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});
});
function hideLightbox() {
$('#lightbox').hide();
}
</script>
You have:
#media only screen and (max-width: 950px) {
.lightbox_trigger{
display:none;
}
.mobile_label_view{
display:block;
}
}
Change .mobile_label_view from display:block to display:inline.
A block element, such as a div, takes up the full width available, whereas an inline element, such as a span, takes up only as much width as it needs.
Here's a jsfiddle linking to a cat pic as an example: http://jsfiddle.net/ethanryan/mg1vjeo2/
I have this code to show my images from a folder, but the problem is that it shows the images vertically (there are 9000 images) so the scrolling is ending.
I would like to know if it's possible to make the images horizontally?
The code I use:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Show images in folder</title>
<style type="text/css">
body {
margin: 0 auto 20px;
padding: 0;
background: #acacac;
text-align: center;
}
td {
padding: 0 0 50px;
text-align: center;
font: 9px sans-serif;
}
table {
width: 100%;
}
img {
display: block;
margin: 20px auto 10px;
max-width: 900px;
outline: none;
}
img:active {
max-width: 100%;
}
a:focus {
outline: none;
}
</style>
</head>
<body>
<?php
$folder = 'album1584/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
$sortedArray = array();
for ($i=0; $i<count($files); $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
krsort($sortedArray);
echo '<table>';
foreach ($sortedArray as &$filename) {
#echo '<br>' . $filename;
echo '<tr><td>';
echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
echo '</td></tr>';
}
echo '</table>';
?>
</body>
</html>
Images are listed vertically because they are contained in individual rows of the table. Also, in your CSS you set them to display as a block.
Remove display: block for images and don't put them in a table.
Also, don't display 9000 images at once. Use pagination.
try changing display: block; to display: inline-block; by styles for img tag.
EDIT:
Ok i think I know where the problem may be. You put each image in a separate table row so try to put more in one row or do not use table for that but simple container with the css change I gave you.
i'm trying to get images that im echoing to display inline-block/horizontal but instead whatever i do they are just listing down/vertically. how can i fix this?
here's my code:
<div class="profile_photos_area">
<?php
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\"><br>\n";
};
}
?>
</div>
.profile_photos{
margin-top:0px;
border:#ccc 1px solid;
width: 170px;
height: 150px;
display:inline-block;
position:relative;
}
.profile_photos_area{
width:665px;
height:350px;
background:#000;
margin-left:-193px;
display:inline-block;
overflow:hidden;
}
Did you look at the html your code generate? Look at the asterisks :
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\">******<br>******\n";
br. br!
It is html, and it means... break line! Just remove that.
demo
I am using yii framework for my development . I wrote CSS and able to align my <input tags in html properly and I am using the same CSS for yii and the alignment is messed up . Could some help me on this ?
I wanted it to be displayed like below
Here is the yii code I have
<div id="gender">
<label>Gender :</label>
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>'')); ?>
</div>
CSS
<style type="text/css">
div#gender {
margin-top:20px;
margin-left:200px;
}
div#gender label
{
font-weight: bold;
font-size: 0.9em;
float:left;
margin-left:2px;
text-align:left;
width:100px;
}
</style>
and it is coming as below image
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
'labelOptions'=>array('style'=>'display:inline'), // add this code
'separator'=>'',
)); ?>
Looks like you might need
div#gender input
{
float:left;
}
add this css code somewhere (to the end of css/main.css, for example):
input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }
I have the following CSS conditional statement in my function.php file:
function logo_exists() {
global $options;
?><style type="text/css">
#header h1 a {
<?php
if ( $options['logo'] == NULL ) { ?>
float: left;
text-indent: 0;
<?php } else { ?>
background: url(<?php echo $options['logo']; ?>) no-repeat scroll 0 0;
float: left;
text-indent: -9999px;
width: 160px;
height: 80px;
}
<?php } ?>
</style><?php
}
example:
(...same code as above...)
width: 160px;
height: 80px;
}
<?php } ?>
</style><?php
add_option('logo_exists');
}
I'm not sure how to "add" or "initialise" it.
I tried: add_option('logo_exists'); and add_action('logo_exists'); but it didn't work.
What's the Wordpress "add" command for conditional CSS statements in the function.php file?
Instead of using this variation, you could use wordpress conditions:
is_home() is_singular() (for page/article) is_single() is_page() ad so on.
Besides that, WP automatically add an extra class to body element and you can relate to that to build your css selectors.