I am making a wordpress theme with integrated woocommerce and have problem like two buttons (details & checkout) cannot show with properly in mini cart layout after added a product or more to cart on shop page like screenshot below:
After I navigated to home page it will show without any problem for mini cart below:
Header.php
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package testing
*/
global $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gg' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="main-navigation2" role="navigation">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'gg' ); ?></button>
<ul class="mini-cart">
<li> <a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e('View your shopping cart'); ?>" class="cart-parent">
<div class="bubblex">
<div class="inside">
<div class="inside-text">
<?php
echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count), $woocommerce->cart->cart_contents_count);
?></div>
</div>
</div>
<i class="cart_control">::before</i></a>
<?php
echo '<ul class="cart_list">';
echo '<li class="cart-title"><b>Isi Keranjang:</b></li>';
if (sizeof($woocommerce->cart->cart_contents)>0) : foreach ($woocommerce->cart->cart_contents as $cart_item_key => $cart_item) :
$_product = $cart_item['data'];
if ($_product->exists() && $cart_item['quantity']>0) :
echo '<li class="cart_list_product"><a href="' . esc_url( get_permalink( intval( $cart_item['product_id'] ) ) ) . '">';
/* echo $_product->get_image(); */
echo apply_filters( 'woocommerce_cart_widget_product_title', $_product->get_title(), $_product ) . '</a>';
if($_product instanceof woocommerce_product_variation && is_array($cart_item['variation'])) :
echo woocommerce_get_formatted_variation( $cart_item['variation'] );
endif;
echo '<span class="quantity">' . $cart_item['quantity'] . ' × ' . woocommerce_price( $_product->get_price() ) . '</span></li>';
endif;
endforeach;
else: echo '<li class="empty">' . __( 'Keranjang kosong') . '</li>'; endif;
if ( sizeof( $woocommerce->cart->cart_contents ) > 0 ) :
echo '<li class="total">';
echo '<span class="amount2">Total</span>' . $woocommerce->cart->get_cart_total() . '</li>';
echo '<p class="buttons">Detail Checkout</p>';
endif;
echo '</ul>';
?>
</li> </ul>
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-branding">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'gg' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #site-wrapper -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Style.css
.main-navigation2 .cart_control {
display: block;
margin: 10px 0 10px 0;
padding: 0 20px 0 19px;
width: 30px;
float: right;
background: url('img/icons/set_icons/cart-grey.png') center no-repeat;
height: 30px;
/* line-height: 9999em; */
overflow: hidden;
}
.main-navigation2 .cart_wrapper {
text-align: left;
position: absolute;
width: 300px;
right: -2px;
background-color: #494949;
z-index: 1000;
padding: 20px 12px;
color: #fff;
}
.main-navigation2 .mini-cart .sf-sub-indicator {
display: none!important;
}
.main-navigation2 .mini-cart > li {
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
line-height: 50px;
color: #000;
font-family: sans-serif;
background: url(img/arrow.png) no-repeat scroll right / 19% 29%;
}
.main-navigation2 .mini-cart > li ul.cart_list {
display: none!important;
visibility: hidden!important;
}
.main-navigation2 .mini-cart > li:hover {
padding: 0 20px 0 20px;
display: block;
text-decoration: none;
/* line-height: 42px; */
color: #000;
font-family: sans-serif;
}
.main-navigation2 .mini-cart a.cart-parent {
display: block;
margin: 2px 2px 0 0;
padding: 0;
width: 47px;
float: right;
background: url('img/icons/set_icons/cart-grey.png') center no-repeat;
height: 30px;
/* line-height: 0em; */
/* overflow: hidden; */
z-index: 1000;
}
.main-navigation2 .mini-cart a.cart-parent:hover {
text-decoration: none;
}
.main-navigation2 .mini-cart a.cart-parent span {
font-weight: bold;
font-family: "Bitter", sans-serif;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1;
}
.main-navigation2 .mini-cart a.cart-parent mark {
display: block;
font-size: 0.6em;
font-style: normal;
font-weight: bold;
position: relative;
}
.main-navigation2 ul.mini-cart {
float: right;
margin: 6px 61px 0 0;
width: 60px;
overflow: hidden;
}
.main-navigation2 ul.mini-cart li:hover {
position: static;
}
.main-navigation2 ul.mini-cart li:hover ul.cart_list {
right: 244px;
}
.main-navigation2 ul.mini-cart li {
text-align: right;
width: auto;/* The cart contents drop down */
}
.main-navigation2 ul.mini-cart li a {
border-right: 0;
border-bottom: 0;
}
.main-navigation2 ul.mini-cart li:last-child {
border-bottom: 0;
width: auto;
}
.main-navigation2 ul.mini-cart li:hover ul.cart_list {
display: block!important;
visibility: visible!important;
}
.main-navigation2 ul.mini-cart li ul.cart_list {
text-align: left;
position: absolute;
width: 283px;
right: -2px;
background-color: #ff0000;
z-index: 1000;
padding: 16px 6px;
color: #000;/* The totals *//* The buttons */
margin: -13px 7px 0px 0px;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.empty {
text-align: center;
padding: 10px;
}
.main-navigation2 ul.mini-cart li ul.cart_list li {
margin: 0px 18px 0px 18px;
padding: 0 0 6px 9px;
float: none;
/* height: 80px; */
border: 0;
line-height: 1.1;
background: #fff;
/* -webkit-border-radius: 10px; */
-moz-border-radius: 10px;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart-title {
border: 0;
text-align: left;
font-family: arial;
font-size: 1.5em;
color: #000;
background-color: #ff0000;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart-title h3 {
padding: 6px 0 6px;
margin: 0;
font-weight: bold;
color: #fff;
font-size: 1.2em;
text-shadow: 1px 1px 0 #050505;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product {
text-align: left;
overflow: hidden;
zoom: 1;
clear: left;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product:first-child {
border-top: 0;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product img {
float: right;
padding: .27em;
background: #fff;
-webkit-border-radius: 0.136em;
-moz-border-radius: 0.136em;
border-radius: 0.136em;
margin: 0 0 .27em .27em;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product a {
border: 0;
margin: -5px 0 0 0;
padding: 0;
/* text-shadow: 1px 1px 0 #050505; */
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #000;
font-size: 1em;
text-decoration: none!important;
background: none;
font-weight: bold;
text-transform: uppercase;
white-space: normal;
width: auto;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product a:hover {
border: 0;
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product dl.variation {
overflow: hidden;
zoom: 1;
margin-bottom: 0;
filter: alpha(opacity=#opacity * 100);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product dl.variation dt {
float: left;
clear: left;
font-weight: 700;
}
.main-navigation2 ul.mini-cart li ul.cart_list li.total {
text-align: left;
color: #000;
padding: 6px 10px 6px;
margin: 20px 16px 6px;
background: #fff;
font-size: 1.2em;
line-height: 1;
/* text-transform: uppercase; */
border-bottom: none;
/* -webkit-border-radius: 10px; */
-moz-border-radius: 10px;
border-radius: 10px;
/* box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3); */
/* -webkit-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3); */
-moz-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3);
-o-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3);
}
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons {
text-align: center;
height: 20px!important;
padding: 4px 0 0 0!important;
}
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button {
border-top: 1px solid #451c08;
background: #573220;
background:
-webkit-gradient(linear, left top, left bottom, from(#de591b), to(#573220));
background:
-webkit-linear-gradient(top, #de591b, #573220);
background:
-moz-linear-gradient(top, #de591b, #573220);
background:
-ms-linear-gradient(top, #de591b, #573220);
background:
-o-linear-gradient(top, #de591b, #573220);
padding: 0px 12px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: -2px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: 100px;
height: 36px;
margin: 0 0 -37px 16px;
}
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button.checkout {
margin: 0 0 0 160px;
}
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button:hover {
border-top-color: #853718;
background: #853718;
color: #ccc;
}
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button:active {
border-top-color: #573220;
background: #573220;
}
span.amount2 {
text-align: left;
margin: 0 30px 0 8px;
color: #000;
}
So how I can fix it to make mini cart layout will show with properly for all pages on my custom theme?
try this css
.main-navigation2 ul.mini-cart li ul.cart_list p.buttons{ position:
relative } .main-navigation2 ul.mini-cart li ul.cart_list p.buttons
.button{ position: absolute: -4px; }
Related
I am trying to generate a pdf file from HTML using the dompdf package in laravel. When I am trying to load the view in the browser everything works perfectly but when I generate the pdf of the same view file , the CSS styling break.
In the browser it looks like this,
In pdf file it looks like this,
this is my HTML code,
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css" media="all">
body {
width: 100%;
height: 100%;
margin: 20px;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#page {
size: A4;
margin: 0;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
* {
box-sizing: border-box;
}
body {
margin-top: 80px;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.card {
height: 320px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
.card header {
background: #ED3D34;
height: 90px;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 2px solid rgba(180, 80, 80, .5);
border-top: 1px solid rgba(221, 108, 108, .8);
padding: 35px 20px;
opacity: .9;
}
.card header h1 {
color: #fff;
line-height: 90%;
font-size: 20px;
margin: 0;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .5);
}
.card article {
padding: 20px;
}
.card article img {
float: left;
margin-right: 30px;
width: 130px;
height: 177px;
transition: all .3s ease-in-out;
}
.card article h2 {
color: #515355;
float: left;
margin: 0 5px 15px 0;
font-weight: normal;
padding: 0 0 8px 0;
width: 250px;
}
.card article .area {
height: 170px;
width: 440px;
}
.card article .area h3 {
margin: 0;
color: #5F6163;
font-size: 20px
}
.card article .area ul {
margin: 5px 0 30px 0;
padding: 0;
list-style: none;
}
.card article .area ul li {
margin: 5px 0 0 0;
font-size: 16px;
color: #94957F;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
}
.card article .area ul li .bar {
width: 280px;
height: 15px;
display: inline-block;
border-radius: 50px;
float: right;
margin: 0 15px 0 0;
opacity: .9;
background-color: #CACACA;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}
.card article .area ul li .bar:before {
left: 0;
width: 0;
height: 15px;
background: rgb(254, 213, 121);
box-shadow:
inset 0 4px 4px rgba(255, 255, 255, .3),
inset 0 -2px 3px rgba(0, 0, 0, .05),
0 1px 0 0px #D29D40;
display: inline-block;
border-radius: 50px;
content: '';
z-index: -1;
}
.card article .area ul li .bar.percent-100:before {
width: 280px;
}
.card article .area ul li .bar.percent-90:before {
width: 260px;
}
.card article .area ul li .bar.percent-80:before {
width: 240px;
}
.card article .area ul li .bar.percent-70:before {
width: 220px;
}
.card article .area ul li .bar.percent-60:before {
width: 200px;
}
.card article .area ul li .bar.percent-50:before {
width: 180px;
}
.card article .area ul li:before {
/* content: '\2605'; */
margin-right: 5px;
}
.card article .area::-webkit-scrollbar {
width: 10px;
}
.card article .area::-webkit-scrollbar-track {
background-color: rgba(217, 217, 217, .5);
border-radius: 50px;
}
.card article .area::-webkit-scrollbar-thumb {
background: rgba(184, 184, 184, .5);
box-shadow:
inset 1px 1px 0 rgba(0, 0, 0, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.07);
border-radius: 50px;
}
</style>
</head>
<body>
<div class='card'>
<header>
<h1 class="text-center">Bright Group Tuition</h1>
</header>
<article>
<img alt='My Pic' id='thumb' src='https://s.cdpn.io/1202/timpietrusky_on_rampage_small_1.jpg'>
<h2>Tim Pietrusky</h2>
<div class='area'>
<ul>
<li>
Std: 10th
</li>
<li>
Batch: B1
</li>
<li>
DOB: 12/12/12
</li>
<li>
Academic Year: 2020-2020
</li>
<li>
Contact Number: 8390790935
</li>
<li>
Address: 911B,Baker Street
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
This is the code to generate pdf file,
public function generateIDCards()
{
// $pdf = PDF::loadView('templates.idcard');
$pdf = \App::make('dompdf.wrapper');
$html = view('templates.idcard')->render();
$pdf->loadHTML($html);
return $pdf->download('card.pdf');
// return $html;
}
Any suggestions would be appreciated...
In your css just change the height to this:
.card
{
height: 400px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
You have to set the Content Type to
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Hope it helps. Cheers!
Hello i am making my own wordpress bootstrap theme. And i have one thing what i want to make that it work nice on mobile and tablets. Right now in mobile mode my site Title in mixed together with my info box. I think it would be nice if i could move my text box under the text box when the page is visited on smaller screens.
You can see my problem in image:
My HTML:
<div class="container">
<div class="wrapper">
<h1>
<?php
if(get_theme_mod( 'header_banner_title_setting' )){
echo get_theme_mod( 'header_banner_title_setting' );
}else{
echo 'Wordpress + Bootstrap';
}
?>
</h1>
<p>
<?php
if(get_theme_mod( 'header_banner_tagline_setting' )){
echo get_theme_mod( 'header_banner_tagline_setting' );
}else{
echo esc_html__('To customize the contents of this
header banner and other elements of your site, go to D
ashboard > Appearance >
Customize','wp-bootstrap-starter');
}
?>
</p>
<div id="headertxt">
<a>Zvani - <span class="head"> (+371) 29429748</span><br />
</a>
<a href="mailto:godeli#tvnet.lv">Raksti - <span
class="head_2">godeli#tvnet.lv</span><br /></a>
<a href="/ka-mus-atrast/">Redzi mūs <span
class="head_2">kartē</span><br /></a>
<a><span class="head">57°11'58.4"N 22°12'11.2"E</span><br />
</a>
<hr>
<a href="./rekviziti/"><span
class="head_2">REKVIZĪTI</span></a>
</div>
</div>
<a href="#content" class="page-scroller"><i class="fa fa-fw fa-
angle-down"></i></a>
</div>
</div>
CSS :
header#masthead {
margin-bottom: 0;
background-color: #563d7c ;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
padding: .60rem 1rem;
border-bottom: 1px solid #9175bb ;
position: fixed;
z-index: 2000;
width: 100%;
}
.navbar-brand > a {
color: rgba(0, 0, 0, 0.9);
font-size: 1.1rem;
outline: medium none;
text-decoration: none;
color: #fff;
font-weight: 700;
}
.navbar-brand > a:visited, .navbar-brand > a:hover {
text-decoration: none;
}
#page-sub-header {
position: relative;
padding-top: 15rem;
padding-bottom: 0;
text-align: center;
font-size: 1.25rem;
background-size: cover !important;
}
#page-sub-header h1 {
line-height: 1;
text-align: left;
font-size: 4rem;
color: #563e7c;
margin: 0 0 1rem;
border: 0;
padding: 0;
}
#page-sub-header p {
margin-bottom: 0;
text-align: left;
line-height: 1.4;
font-size: 1.25rem;
font-weight: 300;
color: #563e7c;
}
a.page-scroller {
color: #333;
font-size: 2.6rem;
display: inline-block;
margin-top: 2rem;
}
#media screen and (min-width: 768px) {
#page-sub-header h1 {
font-size: 3.750rem;
line-height: 1;
}
#page-sub-header {
font-size: 1.25rem;
}
}
#media screen and (min-width: 992px) {
#page-sub-header p {
max-width: 43rem;
margin: 0 auto;
}
}
#headertxt {
position: absolute;
right: 20px;
bottom: 100px;
background-size: auto;
background: rgba(0, 0, 0, 0.7);
padding: 10px 10px 10px 10px;
}
#headertxt a {
text-align: right;
color: white;
font-size: 20px;
}
I hope someone will lead me to some way how to fix this problem and points me to some good tip. Thanks!
I am trying to make the site title of my header clickable and link back to the home page. (For example, google.com - if you click the google logo you go back to the google homepage.) I have added all of the correct code to my header.php but it still won't allow me to click the site title. Does anyone see any errors or have any solutions? Thanks in advance.
my header.php
<?php
/**
*
*
*
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
<header id="ht-masthead" class="ht-site-header">
<div class="ht-container ht-clearfix">
<div id="ht-site-branding">
<?php
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) :
the_custom_logo();
else :
if ( is_front_page() ) : ?>
<h1 class="ht-site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="ht-site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="ht-site-description"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div><!-- .site-branding -->
<nav id="ht-site-navigation" class="ht-main-navigation">
<div class="toggle-bar"><span></span></div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container_class' => 'ht-menu ht-clearfix' ,
'menu_class' => 'ht-clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
) );
?>
</nav><!-- #ht-site-navigation -->
</div>
</header><!-- #ht-masthead -->
<div id="ht-content" class="ht-site-content ht-clearfix">
my css
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead{
background: #FFF;
height: 70px;
border-bottom: 1px solid #eee;
z-index: 99;
transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
position: fixed;
text-align: center;
width: 0 auto;
margin-right: 38px;
width: 100%;
}
.ht-site-title{
font-family: 'futura_tbold';
font-size: 24px;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1;
margin-bottom: 8px;
margin-top:5px;
margin-left: 75px;
text-align: left;
float: left;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
}
.ht-site-title a{
text-decoration: none;
color: #000;
}
.ht-site-description{
color: #EEE;
margin: 0;
font-size: 15px;
font-style: italic;
line-height: 1;
}
.ht-site-description a{
color: #333;
}
/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
#ht-content {
padding-top: 200px;
}
.ht-section {
padding: 60px 0;
background: #FFF;
}
.ht-section-title-tagline {
margin-bottom: 60px;
text-align: center;
}
.ht-section-title {
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 36px;
width: 60%;
margin: 0 auto 15px;
}
.ht-section-title:last-child {
margin-bottom: 0;
}
.ht-section-tagline {
font-size: 20px;
width: 70%;
margin: 0 auto;
}
#ht-page {
width: 100% !important;
margin: 0 auto;
max-width: 100% !important;
overflow: hidden !important;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation {
position: absolute;
width: 100%;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
float: right;
}
.ht-sticky #ht-site-navigation {
padding: 17px 0;
}
.ht-main-navigation .ht-menu {}
.ht-main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
position: relative;
}
.ht-main-navigation li {
float: left;
margin-left: 30px;
}
.ht-main-navigation a {
display: block;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 15px;
font-family: 'Raleway', sans-serif;
line-height: 36px;
padding: 0 15px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 40px;
}
.ht-main-navigation ul ul {
position: absolute;
left: 0;
top: 100%;
background: #FFF;
min-width: 200px;
right:0;
z-index: 999;
padding: 8px;
margin-top: -21px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
height:300px;
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
opacity: 0;
}
.ht-sticky .ht-main-navigation ul ul {
margin-top: 17px;
}
.ht-main-navigation ul ul ul {
left: 100%;
top: 0;
margin: 0 0 0 8px;
border-top: 0;
}
.ht-sticky .ht-main-navigation ul ul ul {
margin-top: 0;
}
.ht-main-navigation ul ul a {
text-transform: uppercase;
font-weight: 400;
color: #444;
line-height: 1.5;
padding: 7px 25px;
font-size: 12px;
text-align: left;
}
.ht-main-navigation ul ul li:first-child {
padding-top: 15px;
}
.ht-main-navigation ul ul li {
float: none;
margin: 0 0 5px;
}
.ht-main-navigation ul ul li:last-child {
margin-bottom: 0;
}
.ht-main-navigation ul li:hover > ul {
opacity: 1;
transform: scaleY(1);
}
.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a {
background: none;
color: inherit;
}
.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
color: #000;
text-decoration: none;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 15px;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
I'm not sure if you mean clicking the title of the tab or making the header tag clickable.
If you mean making the header tag clickable, then try the following snippet:
header {
background-color: red;
height: 50px;
width: 100%;
cursor: pointer;
}
<header onclick="alert('Clicked')"></header>
If you want to make the title of tab clickable, you're out of luck.
It's impossible.
If you want a text link, use a href, if you want an image link, put img tag in a tag
* {
padding-bottom: 10px;
}
Google!
<a href="https://google.com">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
Note: Links wont work in here because of the snippet thingy
So I created a comments section for a WordPress theme I am developing and after a good half hour of trying to figure out what went wrong in the labeling of the styling, I am stumped So the problem is the article.post img styling is affecting the comment-meta img. One should not be affecting the other.
I am also providing what it looks like in Chrome developer tools Elements:
<img alt="" src="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=80&d=mm&r=g" srcset="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=160&d=mm&r=g 2x" class="avatar avatar-80 photo" height="80" width="80">
This is the style.css:
body {
padding-top: 20px;
font-size: 15px;
color: #7a7a7a;
line-height: 1.7em;
}
a {
color: #0faf97;
}
.btn-primary {
background: #0faf97;
color: #fff;
border-color: #fff;
}
.btn-primary:hover {
background: #fff;
color: #0faf97;
}
.container {
max-width: 1020px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background: #0faf97;
}
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
padding-top: 90px;
padding-bottom: 90px;
color: #fff;
}
footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.block {
border:#ccc solid 1px;
padding: 20px 20px 30px 20px;
text-align: center;
}
.block h2 {
color: #0faf97;
}
.fa {
color: #0faf97;
}
.fa-3 {
font-size: 4em !important;
}
.marketing {
margin: 40px 0;
}
.content-region-1 {
background: #0faf97;
color: #ffffff;
text-align: center;
}
.content-region-2 {
background: #f4f4f4;
color: #333333;
}
.content-region-3 {
background: #000000;
color: #ffffff;
}
.content-region-2 img {
width: 100%;
}
.content-region-3 h4 {
}
.content-region-1 h1, .content-region-2 h3 {
margin: 0;
padding: 0;
padding-bottom: 15px;
font-size: 40px;
}
.content-region-3 form input[type="text"], .content-region-3 form textarea {
width: 100%;
padding: 5px;
background: #333;
color: #fff;
margin-bottom: 10px;
border: 0;
}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.pt60{padding-top: 60px;}
.pb60{padding-bottom: 60px;}
.side-widget {
margin-bottom: 40px;
}
.side-widget h3 {
border-left: 5px #0faf97 solid;
padding-left: 10px;
margin-bottom: 15px;
}
.title-bar {
background: #0faf97;
color: #ffffff;
padding-bottom: 10px;
border-bottom: 6px #ddd solid;
margin-bottom: 20px;
}
article.post {
border-bottom: 1px #ccc solid;
overflow: auto;
padding-bottom: 30px;
margin-bottom: 40px;
}
article.post .meta {
border-top: #ccc solid 1px;
border-bottom: #ccc solid 1px;
overflow: auto;
list-style: none;
margin: 0;
padding: 5px 0;
}
article.post .meta li {
float: left;
margin-right: 20px;
}
article.post img {
width:100%;
height: auto;
margin-bottom:20px;
}
.panel-heading {
background: #0faf97 !important;
color: #fff !important
}
.sidebar-widget ul {
padding: 0 !important;
list-style: none;
}
.sidebar-widget li {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.comments {
border: 1px #ccc solid;
padding: 10px;
margin-bottom: 20px;
margin-top: 10px;
}
.comments h2, .comments h3 {
background: #0faf97;
color: #fff;
padding: 5px;
}
.comment-body {
border: #ccc 1px solid;
margin-bottom:10px;
.comment-meta {
background: #333;
color: #fff;
padding: 10px;
overflow: auto;
}
.comment-meta img {
float: left;
margin-right: 10px;
}
.comment-meta time {
margin-left: 12px;
}
.comment-reply-link {
background: #0faf97;
color: #fff;
display: inline-block;
padding: 10px 15px;
}
.comment-form input, .comment-form textarea {
width: 100%;
padding: 3px;
border: #ccc 1px solid;
margin-bottom: 20px;
}
This is the comments.php file:
<div class="comments">
<h2>Comments</h2>
<?php $args = array(
'walker' => null,
'max_depth' => '',
'style' => 'ul',
'callback' => null,
'end-callback' => null,
'type' => 'all',
'reply_text' => 'Reply',
'page' => '',
'per_page' => '',
'avatar_size' => 80,
'reverse_top_level' => null,
'reverse_children' => '',
'format' => 'html5', // or 'xhtml' if no 'HTML5' theme support
'short_ping' => false, // #since 3.6
'echo' => true // boolean, default is true
);
?>
<?php wp_list_comments($args, $comments); ?>
<?php
$form_args = array(
'label_submit' => 'Send',
'title_reply' => 'Write a Reply or Comment',
'comment_notes_after' => '',
'comment_field' => '<p class="comment-form-comment"><label for="comment">'._x('Comment','noun').'</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
);
comment_form($form_args);
?>
</div>
When I alter the article.post img css it also affects the avatar image. I can't figure out how to alter that behavior. The avatar image is way too big and I just want to make it thumbnail size.
Here is the single.php file:
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<article class="post">
<section class="row title-bar">
<div class="container">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</section>
<section class="row main">
<div class="container">
<?php if(is_active_sidebar('sidebar')) : ?>
<div class="col-md-8">
<?php else : ?>
<div class="col-md-12">
<?php endif; ?>
<article class="post">
<div class="post_thumbnail">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
</div>
<ul class="meta">
<li>By <?php the_author(); ?></li>
<li><?php the_time('F j, Y g:i a'); ?></li>
<li>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if($categories){
foreach($categories as $category){
$output .= ''.$category->cat_name .''.$separator;
//$output .= $category->cat_name . $separator;
}
}
echo trim($output, $separator);
?>
</li>
</ul>
<br>
<?php the_content(); ?>
</article>
<div class="clr"></div>
<?php endwhile; ?>
<?php endif; ?>
<?php comments_template(); ?>
</div>
<?php if(is_active_sidebar('sidebar')) : ?>
<div class="col-md-4">
<?php dynamic_sidebar('sidebar'); ?>
</div>
<?php endif; ?>
</div>
</section>
<?php if(is_active_sidebar('content-region-1')) : ?>
<?php dynamic_sidebar('content-region-1'); ?>
<?php endif; ?>
<?php if(is_active_sidebar('content-region-2')) : ?>
<?php dynamic_sidebar('content-region-2'); ?>
<?php endif; ?>
<?php get_footer(); ?>
When I alter article.post img it changes the avatar img in comment section, but it also alters the blog images. Not sure that ended up happening. In theory, if I had done this correctly, comment-meta img should be what alters the avatar image. Chrome developer tools outputs this as CSS:
element.style {
}
article.post img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.comment-meta img {
float: left;
margin-right: 10px;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img[Attributes Style] {
height: 80px;
width: 80px;
}
Inherited from footer.comment-meta
.comment-meta {
background: #333;
color: #fff;
padding: 10px;
overflow: auto;
}
footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
user agent stylesheet
li {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from body.post-template-default.single.single-post.postid-20.single-format-standard.logged-in.admin-bar.wp-custom-logo.customize-support
body {
padding-top: 20px;
font-size: 15px;
color: #7a7a7a;
line-height: 1.7em;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Inherited from html
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The article.post img selector targets all images that are inside the article.post element. This includes your avatar images.
If you don't want to target the avatars, then make your selector more specific. Try this instead:
article.post .post_thumbnail img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
Now, only images that are descendants of article.post and .post_thumbnail will get the styles.
revised fiddle
I am trying to create a multi level submenu.
I can display just one sub level menu with this code.
How to increase the code to insert a system with parent id ?
There my code than I am trying to develop.
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "Comic Sans MS", cursive;
font-size: 15px;
color: #232323;
}
#head {
background: #f9f9f9;
height: 100px;
padding-top: 15px;
border-bottom: 1px solid #d5dce8;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
#head h1
{
float:left;
}
#head a
{
float:right;
}
input,select
{
width:300px;
height:35px;
}
/* nav menu */
#nav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
border-bottom: 1px solid #d5dce8;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
background: #f9f9f9;
}
#nav li {
float: left;
display: block;
background: none;
position: relative;
z-index: 999;
margin: 0 1px;
}
#nav li a {
display: block;
padding: 0;
font-weight: 700;
line-height: 50px;
text-decoration: none;
color: #818ba3;
zoom: 1;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
background-color: #fff;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
color: #576482;
}
/* subnav */
#nav ul {
position: absolute;
left: 1px;
display: none;
margin: 0;
padding: 0;
list-style: none;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
padding-bottom: 3px;
}
#nav ul li {
width: 180px;
float: left;
border-top: 1px solid #fff;
text-align: left;
}
#nav ul li:hover {
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
#nav ul a {
display: block;
height: 20px;
line-height: 20px;
padding: 8px 5px;
color: #666;
border-bottom: 1px solid transparent;
text-transform: uppercase;
color: #797979;
font-weight: normal;
}
#nav ul a:hover {
text-decoration: none;
border-right-color: transparent;
border-left-color: transparent;
background: transparent;
color: #4e4e4e;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav li').hover(function()
{
$('ul', this).slideDown('fast');
}, function()
{
$('ul', this).slideUp('fast');
});
});
</script>
<div class="wrap">
<ul id="nav">
<?php
// Select all entries from the menu table
$Qmenus = $Db->prepare('SELECT a.id,
a.link,
a.parent,
a.class,
a.sort_order,
amd.label
FROM :table_administrator_menu a,
:table_administrator_menu_description amd
where a.id = amd.id
and amd.language_id = :language_id
ORDER BY a.parent,
a.sort_order
');
$Qmenus->bindInt(':language_id', $OSCOM_Language->getId());
$Qmenus->execute();
while($Qmenus->fetch()){
?>
<li class="<?php $Qmenus->value('class'); ?>"><?php echo $Qmenus->value('label'); ?>
<?php
// Select all entries from the menu table
$QsubMenus = $Db->prepare('SELECT sm.id,
sm.link,
sm.parent,
sm.class,
smd.label,
sm.sort_order
FROM :table_administrator_sub_menu sm,
:table_administrator_sub_menu_description smd
where sm.sub_menu_id = smd.sub_menu_id
and smd.language_id = :language_id
order by sm.parent,
sm.sort_order
');
$QsubMenus->bindInt(':language_id', $OSCOM_Language->getId());
$QsubMenus->execute()
?>
<ul>
<?php
while($QsubMenus->fetch()) {
?>
<li class="<?php $QsubMenus->value('class'); ?>"><?php echo $QsubMenus->value('label'); ?></li><?php
}
?>
</ul>
</li>
<?php
}
?>
</ul>
</div>