I was really unsure how to phrase this problem as it's something I've never encountered before.
My wordpress logo image which is set as a background using css is really buggy when hovering over it. Sometimes I can click it and sometimes I can't. Is this becuase I set the image in css and used text-indent to remove the standard text or is it something else?
Here's the live link. Try hovering over the logo to see excactly what I'm talking about.
I'm using a custom function in my functions.php to print out the logo and menu as seen here:
/**
* Prints out an ir-anchor with the site-title.
*
*/
function sircon_logo($echo = true) {
$htmlLogo = '';
if (get_bloginfo('name')) {
$htmlLogo = '<a';
$htmlLogo .= ' id="site-title"';
$htmlLogo .= ' class="ir"';
$htmlLogo .= ' href="' . get_bloginfo('url') . '"';
$htmlLogo .= ' rel="home">';
$htmlLogo .= get_bloginfo('name');
$htmlLogo .= '</a>';
}
if($echo) echo $htmlLogo;
else return $htmlLogo;
}
I call it in my header.php using this:
<?php sircon_logo(); ?>
And this is my styles:
/* image replace */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/* logo */
#site-title {
position: absolute;
display: block;
top: 25px; left: 15px;
width: 157px; height: 64px;
background-repeat: none;
background-image: url('style/logo.png');
}
#site-title h1 {
margin: 0;
}
#site-slogan {
display: none;
}
#media (min-width: 500px) {
#site-slogan {
display: none;
width: 320px;
margin: 0 auto;
color: #fff;
font-size: 26px;
font-style: italic;
line-height: 1.1;
letter-spacing: -1px;
text-align: center;
padding: 14px 0 0 30px;
}
}
#media (min-width: 760px) {
#site-slogan {
display: none;
width: auto;
padding: 0;
margin: 0;
position: absolute;
top: 10px; right: 10px;
}
}
The Reason is the nav bar is overlapping the logo. So Apply z-index to the logo
#site-title {
z-index:300;
}
Set a z-index for your logo:
#site-title {
z-index: 500;
}
For further information check out this
Here are 2 solutions for your issue
Solution 1
#site-title {
z-index: 500;
}
Solution 2
#main-menu {
left: 220px;
right: 0;
width: auto;
}
Hope this helps you :)
Related
i am running a woo shop and want to add gallery arrows and an icon to my PDPs product gallery.
each of those hook work separately, but if I add them together, the arrows are not being called. is there a sort of prioritizing issue? I don't think it is a css issue.
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
function woocommerce_show_product_thumbnails()
{
echo '<img class="imgB1" src="https://placehold.it/100" style="
position: absolute;
top: 3.8%;
right: 15%;
height: 32px;
width: 32px;
border: 5px solid red;
">';
}
// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
echo '<style type="text/css">
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0%;
margin: 0;
padding: 0px;
list-style: none;
}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {
visibility:visible;content: "\f105";
font-family: FontAwesome;margin-right: 10px;font-size: 70px;
}
a.flex-prev::before {
visibility:visible;
content: "\f104";
font-family: FontAwesome; margin-left: 10px;font-size: 70px;
}
</style>';
$options['directionNav'] = true;
$options['animation'] = "slide";
$options['animationLoop'] = true;
return $options;
}
any idea?
thanks!
I am trying to make a woocommerce theme, but the star ratings aren't working properly.
This is the code for showing the star rating.
<div class="rating-custom">
<?php wc_get_template( 'single-product/rating.php' ); ?>
</div>
This is my CSS
.woocommerce-product-rating {
margin-bottom: 1.618em;
line-height: 2;
}
.woocommerce-product-rating .star-rating {
margin: 0.5em 4px 0 0;
float: left;
font-family: star;
}
.woocommerce-product-rating::after, .woocommerce-product-rating .rating-custom, .woocommerce-product-rating::before {
content: " ";
display: table;
}
.star-rating {
float: right;
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
font-size: 1em;
width: 5.4em;
font-family: star;
}
.star-rating::before {
content: "SSSSS";
color: #d3ced2;
float: left;
top: 0;
left: 0;
position: absolute;
}
.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
.star-rating span::before {
content: "SSSSS";
top: 0;
color: red;
position: absolute;
left: 0;
}
But my result is only "$$$"
actual result
Can someone help me on how to make this work the way i want?
Following Obsidian Age answer, i've added this line of code to my span tag: font-family: 'star'
And now everything is running smooth. Ty to zipkundan aswell for the help!
I was working on a project which contained a search box which echoed a neatly formatted string of images with the correct queries from my database. Somewhere in the maze of using Flexbox CSS, however, I managed to end up with: A it escaping my screen and B the s for each item not having spaces above and below each other :(
Here's my code for this part:
<div id= "searchresults" style="width: 100vw; padding-bottom: 3vh; padding-top: 3vh; min-height: 10vh; height: auto; background-color: #e7e7e7 ; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between;">
<?php
//Makes connection
include 'dxbase.php';
$conn = new mysqli($servername, $username, $password, $dbname);
if(isset($_POST["search"])){
$tempvardf = '%'.$_POST['search'].'%'; #############
//Defines SQL command to bring up data about the products matching the set search
$sql = "SELECT id, name, price, location, path FROM products WHERE name LIKE ?;"; #'%$_POST[search]%'
//Create a prepared statement
$stmt = mysqli_stmt_init($conn);
//Prepare the prepared statement
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL STATEMENT FAILED... OOF";
} else {
//Bind paramaters to placeholder
mysqli_stmt_bind_param($stmt, "s", $tempvardf);
//Run paramaters inside database
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo "<div style='background-color: blue; padding: 1vw; width: 30vw; display: flex; flex-direction: column; align-content: space-between;'>";
if(isset($row['path'])){
echo "<img style='width: 28vw; height: 28vw; ' src=". $row['path'].">". "<br>";
} else {
echo "can't access image path";
}
echo $row['name']."<br>";
echo "<s><i>".$row['price']."</i></s><br>"; #CHANGE THIS ONE TO ORIGINAL NONDISCOUNTED PRICE
echo $row['price']."<br>";
echo "</div>";
}
#echo "And that's it!";
}
} else {
}
?>
</div>
And here's the CSS as requested:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
white-space: nowrap;
}
.sidebar:hover {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidebar {font-size: 18px;}
}
.spacedfont {
letter-spacing:3px;
}
.headera {
overflow: hidden;
background-color: #111;
padding: 10px 10px;
height: 15vh;
}
* {box-sizing: border-box}
body {margin:0; padding: 0;}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.slideshowtext {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Just to clarify, this does work and my database echoes my test values correctly but unfortunately hours of efforts trying to hack through a wall of complex CSS have been fruitless.
Here's a screenshot:
Any suggestions?
Thank you,
i moved your inline css to external and addes a class .searchitems to the flexitems.
you can move it back in if you want
.searchitems{
background-color: blue;
padding: 1vw;
width: 30vw;
display: flex;
flex-direction: column;
align-content: space-between;
margin-top: 10px;
}
.searchresults{
margin-top: -10px;
min-height: 10vh;
background-color: #e7e7e7 ;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
<div class= "searchresults" >
<div class="searchitems"></div>
<div class="searchitems"></div>
<div class="searchitems"></div>
<div class="searchitems"></div>
</div>
is this ok ?
it is escaping your screen because of the width:100vw;
I added a margin-top:10px; to the .searchitems and added a negative margin-top:-10px; to the .searchresults, so the margin is only added to the wrapped .seachitems
Here is a strange one. At least for me anyway. I have an HTML page that is being generated by PHP with a style sheet (css.php) linked in. My original plan was to be able to save the attributes for this file in a MySQL database and then load values into the file using PHP variables at each page load. I was talked out of this because it would use to many server resources to parse this file on each page load. I decided to rewrite this file each time changes were made to the database. Now that I have written a file with preferences.php and changed its name to css.css it no longer sees the correct file. It only sees a one line file that I wrote while initially setting up my code. Now that I have a full file it still uses the one-liner that no longer exists. If I change back to my .php file that is in the same folder (the only difference between the two is the file extension) everything works correctly? Where have I gone wrong? I'm sure it's something simple that I can't see.
here is index.html that is loading the css file
<!doctype html>
<html lang= "en">
<head>
<title>Rogers Enterprises</title>
<link rel= "icon" type= "image/png" href= "images/bc2.JPG">
<meta charset="utf-8">
<link rel="stylesheet" href= "css/css.css" >
<script src="js/js.js"></script>
</head>
and here is my css.css
body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}
This is preferences.php that generates the CSS
$file = fopen("../css/css.css", "w");
$txt = 'body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}';
fwrite($file, $txt);
fclose($file);
My directory structure looks like this
rogersproperties
|___index.html
|___css
| |___css.php
| |___css.css
|___php
|___preferences.php
On MyPage are many pictures. In the normal case are 6 pictures in one row. If you change the size of the browser the number of pictures in each row will change. I solved this problem with media queries. In each row the last picture shouldnt get a margin-right: 5px;. But the nth-child wont change its every time the same, thats why the margin isnt correct. What did i wrong?
Here is my php output for the images:
<?php
$sql = "SELECT * FROM bilder";
$result=mysqli_query($db,$sql);
while($row=mysqli_fetch_assoc($result)){
echo "<img class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
}
?>
Here is the css:
section{
margin: 0px auto;
width: 925px;
margin-top: 55px;
}
.image{
object-position: center; /* Center the image within the element */
height: 150px;
width: 150px;
object-fit: cover;
margin-right: 5px;
}
.image-margin{
margin-right: 5px;
}
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}
#media only screen and (max-width : 770px) {
/* Four images in each row */
section{
margin: 0px auto;
width: 615px;
margin-top: 55px;
}
section img:nth-child(4n+4){
margin-right:0;
}
}
#media only screen and (max-width : 615px) {
section{
margin: 0px auto;
width: 460px;
margin-top: 55px;
}
section img:nth-child(3n+3){
margin-right:0;
}
}
#media only screen and (max-width : 460px) {
section{
margin: 0px auto;
width: 305px;
margin-top: 55px;
}
section img:nth-child(2n+2){
margin-right:0;
}
}
I solved my problem. I had to reset the old nth-child code
like this:
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(6n+6){
margin-right:5px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}