Hide div element on custom url - html

I'm looking for a solution to hide div element with php code base on my different custom link. So that the div i want to hide is not appeared in html source.
I have two different "div"s in a single page. In order to make the page showing div A and hiding div B, i have created "example.com/account/?Member=login"(for showing div A while div b is not showing) and "example.com/account/?Member=Signup"(for showing div B while div A is not appear). But, the code what i'm using now is as stated below.
Code in my css:
.login {display:none;}
.signup {display:none;}
PHP on html file:
<?
$s=$_GET['Member'];
if ($s=="Login") {
echo ('<style>.login {display:block;}</style>');
}
?>
<?
$s=$_GET['Member'];
if ($s=="Signup") {
echo ('<style>.signup {display:block;}</style>');
}
?>
<div class="login">
<p>Login Form</p>
</div><!--login-->
<div class="signup">
<p>Signup Form</p>
</div><!--signup-->
With this method, both div are showing in html source, even though one of the div is not showing in web page.
I want the div to be hidden without showing in html code. Any solution?

Why not just only render the login on your conditions matching. i.e.
<? $s=$_GET['Member'];
if ($s!="Login") { ?>
<div class="login">
<p>Login Form</p>
</div><!--login-->
<?php } else {?>
<div class="signup">
<p>Signup Form</p>
</div><!--signup-->
<? } ?>
The above assume you want to show one of the two possibilities, you'd need to change it to
<? $s=$_GET['Member'];
if ($s=="Login") { ?>
<div class="login">
<p>Login Form</p>
</div><!--login-->
<? }
$s=$_GET['Member'];
if ($s=="Signup") { ?>
<div class="signup">
<p>Signup Form</p>
</div><!--signup-->
<? } ?>
if there is a posibility of showing none of them

Clear you css and:
<?
$s=$_GET['Member'];
if ($s=="Login") {
?>
<div class="login">
<p>Login Form</p>
</div><!--login-->
<?
}
$s=$_GET['Member'];
if ($s=="Signup") {
?>
<div class="signup">
<p>Signup Form</p>
</div><!--signup-->
<?
}
?>

Related

How set nav-header to right side - Wordpress

How set header item to right side in wordpress ?
I tried with align = "right" but didnt work.
<body <?php body_class(); ?>>
<div class="container">
<!--site-header-->
<header class="site-header">
<div class="hd_search">
<?php get_search_form(); ?>
</div>
<span>
<h1><?php bloginfo('name');?></h1> </span>
<h5> <?php bloginfo('description'); ?> <?php if(is_page('portfolio')){?>
- Thank you for viewing my work
<?php } ?> </h5>
<div class="header" >
<nav class="site-nav" align="left">
<?php
$args= array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</div>
</header>
Set header to red arctangle. Click to view picture
Actuallu this is because of <header> does not support align atrribute, just replace it with div instead. Note that html5 does no longer support align attribute, so I suggest you to use CSS instead.
For example replace this <div align="center"> with <div style="text-align:center;border:1px solid red">, for the result you need check CSS reference manual and HTML reference from w3school.com
However, the property you need is the CSS attribute float, you can simply add to your <header class="site-header"> with <header class="site-header" style="float: right">

How do I add links to hard-coded images in Wordpress?

I am working on a website and using the regular theme Home page and not creating a static page. The theme (Business Elite) has a Contact Us section near the bottom of the page. The url I am working on is http://dlecpa1.com . The theme does not allow me to change the three images that are in the Contact Us section so they would have links.
I did figure out how to change the first image text line to read "CALL US" by changing it in the css under inc-front-front-function php, but that does not help me with adding links to the second and third images (circle_bg2 and circle_bg3).
I know I can't add links using css, so I tried my hand using javascript but I got lost trying. I know that I need to add js and html for the links to work but I have no clue as to how I can do this. I don't know if this helps, but this is what is in the css I found.
<!-- TOP PART -->
<ul class="cont_us_top container">
<?php if ($contact_us_name) { ?>
<!--name-->
<li>
<div class="circle" id="circle_bg1"></div>
<div><p class="cont_title"> <?php echo __('CALL US', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_name; ?> </p></div>
</li>
<?php } ?>
<?php if ($contact_us_address) { ?>
<!--address-->
<li>
<div class="circle" id="circle_bg2"></div>
<div><p class="cont_title"> <?php echo __('ADDRESS', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_address; ?> </p></div>
</li>
<?php } ?>
<?php if ($contact_us_mail && $contact_us_showmail) { ?>
<!--mail-->
<li>
<div class="circle" id="circle_bg3"></div>
<div><p class="cont_title"> <?php echo __('EMAIL', "business-elite"); ?> </p>
<p class="cont_text"> <?php echo $contact_us_mail; ?> </p></div>
</li>
<?php } ?>
</ul>
<div class="right_home right_home_center">
<?php self::social_icons(); ?>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<?php
}
}
You just need to go into your CSS and look for the #circle_bg1 ID, and then change the background image to one that you want:
#circle_bg1 {
background: url(images/yournewimagelink.jpg) no-repeat center;
}
The 3 circle classes are located in your style.css doc, starting on line number 1979.

Fix a Menu bar and Logo in WordPress [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm facing logo and menu bar alignment no my website.
how can i fix it? sharing images below.
I want to make changes as below image..
What HTML or CSS code that I should Write ?
Continuing our discussion from wordpress.stackexchange.com here and here, if I get it right, what you are trying to do is having the same menu you have when you resize the browser's window size to 1180px, where the logo goes to the center, but instead of having this only when you resize the window to 1180px, you want to have this type of disposal at all time, meaning having the 1180px menu as the site's default menu.
First
So in order to do this, we need to remove the current CSS for the default menu when the screen size is bigger than > 1180px. To do this, go to - style.css:1006 (meaning go to the file style.css line 1006), and remove the following CSS:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#site-branding {
width: 20%;
padding-bottom: 5px;
min-height: 60px;
}
Second
Next thing we need to set the style for the menu when it gets at 1180px as the new default menu. In order to do this, go to: - responsive.css:48, an remove the media queries around the code, which currently the code it's something like this:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1
#media (max-width: 1180px) {
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
}
And you need to remove the #media query or just put the code outside the #media query, to be only like this:
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
Third and last
At last, fix the menu centering disposal, go to - style.css:4328 and remove the float:right; property from the id #menu:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#menu {
float: right; /* <- REMOVE THIS LINE */
position: relative;
height: 100%;
}
With this being done, the supposed menu from the size 1180px will now become the main default menu. Good luck! :)
Use this CSS for the logo:
.site-logo {
position: absolute;
top:-55px;
left:50%;
margin-left: -150px;
}
You'll want to move the following HTML,
<a class="site-logo" href="http://www.norenge.com/">
<img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store">
</a>
to be an immediate descendant of the <section class="home_navigation" element. Then apply text-align: center; to that same section element and it achieves the look you're asking for.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package AccessPress Store
*/
?><!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="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
<?php if (as_before_top_header_enabled()): ?>
<div class="before-top-header">
<div class="ak-container clearfix">
<?php accesspress_ticker_header_customizer(); ?>
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<div class="welcome-user">
<span class="line">|</span>
<?php _e('Welcome ', 'accesspress-store'); ?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
<span class="user-name">
<?php echo $current_user->display_name; ?>
</span>
</a>
<?php _e('!', 'accesspress-store'); ?>
</div>
<?php }
?>
<?php if (is_active_sidebar('header-callto-action')): ?>
<div class="header-callto">
<?php dynamic_sidebar('header-callto-action') ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="top-header clearfix">
<div class="ak-container clearfix">
<!-- Cart Link -->
<?php
if (is_woocommerce_activated()):
echo accesspress_wcmenucart();
endif;
?>
<?php
if (function_exists('YITH_WCWL')) {
$wishlist_url = YITH_WCWL()->get_wishlist_url();
?>
<a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
<i class="fa fa-heart"></i>
<?php echo "(" . yith_wcwl_count_products() . ")"; ?>
</a>
<?php
}
?>
<div class="login-woocommerce">
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
<?php _e(' LogOut', 'accesspress-store'); ?>
</a>
<?php
} else {
?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
<?php _e('LogIn', 'accesspress-store'); ?>
</a>
<?php }
?>
</div>
<!-- if enabled from customizer -->
<?php if (!get_theme_mod('hide_header_product_search')) { ?>
<div class="search-form">
<?php get_search_form(); ?>
</div>
<?php } ?>
</div>
</div>
<section class="home_navigation">
<div class="inner_home">
<div class="ak-container clearfix">
<div id="site-branding" class="clearfix">
<?php accesspress_store_admin_header_image() ?>
</div><!-- .site-branding -->
<div class="right-header-main clearfix">
<div class="right-header clearfix">
<!-- if enabled from customizer -->
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="clearfix"></div>
<div id="menu">
<?php
if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
} else {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<a class="menu-toggle">
<?php _e('Menu', 'accesspress-store'); ?>
</a>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'store-menu',
'fallback_cb' => 'custom_fallback_menu',
)
);
?>
</nav><!-- #site-navigation -->
<?php } ?>
</div>
</div> <!-- right-header -->
</div> <!-- right-header-main -->
</div>
</div>
</section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code

How to create a 3 section's in a row inside the colophon footer (wordpress)

I am trying to edit my footer.php in my child-theme (localhost for now, no link to share) in a way that I won't loose the "powered by ..." text. The theme authors (and wordpress too) surely deserve to be referenced there with the great work they do.
I want to add a row with 3 sections, in-line, and above the "footer-menu" and "site-generator" that came with the template. Can you point where the html structure, or the css, is/are incorrect?
Here's what I added to my child-theme footer.php and style.css:
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<!-- New inserted code STARTS HERE -->
<div class="engage-row">
<div class="col-1">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/campaigntest.jpg">
</div>
<div class="col-2">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/about-engage.jpg">
</div>
<div class="col-3">
<!-- Will add a subscription form here -->
</div>
</div>
<!-- Newly inserted code ENDED HERE -->
<div class="footer-wfix">
<?php virality_footer_nav(); ?>
<div id="site-generator">
<?php echo __('© ', 'virality') . esc_attr( get_bloginfo( 'name', 'display' ) ); ?>
<?php if ( is_front_page() && ! is_paged() ) : ?>
<?php _e('- Powered by ', 'virality'); ?><?php `enter code here`_e('WordPress' ,'virality'); ?>
<?php _e(' and ', 'virality'); ?><?php _e('WP Dev Shed', 'virality'); ?>
<?php endif; ?>
</div>
</div>
In style.css I added:
.col-1{
display: inline;
float: left;
}
.col-2{
display: inline;
float: left;
}
.col-3{
display: inline;
float: left;
}
How can I keep the footer_nav and the site-generator in a new line under the new row I created? Right now they are extending to the right. Or is there a better way to do this?
In your css file you need to add
div.footer-wfix {
clear:left;
}
Should do the trick.

Aligning Social Media Share Icons

I am using the DigG Digg Social Media Plugin for Wordpress using the manual code option:
My HTML is the following but this is not much use as its generated via PHP - I have implemented the media class and the boxes!
What my main issue is how can I get all the icons aligned via the same height?
Live URL
HTML:
<div class="diggSocialMedia">
<div class="box0">
<?php dd_fbshare_generate('Compact') ?>
</div>
<div class="box1">
<?php dd_twitter_generate('Compact','hakatours') ?>
</div>
<div class="box2">
<?php dd_fblike_generate('Like Button Count') ?>
</div>
<div class="box3">
<?php dd_google1_generate('Compact') ?>
</div>
</div>
.diggSocialMedia > div {
vertical-align:top;
}
.diggSocialMedia {
height: 0;
overflow: visible;
}