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;
}
Related
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">
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.
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-->
<?
}
?>
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.
There are several method on the web to set height of columns equal. One of the best, I think, is "Equal Height Columns with Cross-Browser CSS".
But there's a problem to apply that method on Joomla module structure and I couldn't figure out how to get it to work.
I used rounded module chrome (with one main background for module and another background image for inner DIV to wrap modules bottom) on Joomla template source so each module renders this way:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
and I use 3 modules in a row that wrapped in a parent DIV.
This is the code:
<div style="width:904px; margin:20px; float:left; overflow:hidden; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user5" style="rounded" />
</div>
<div style="float:right; width:288px; height:100%;">
<jdoc:include type="modules" name="user6" style="rounded" />
</div>
</div>
</div>
</div>
And finally there's css related to the Joomla module's style:
div.module-gallery, div.module, div.module_menu {
width:291px;
background:url(../images/module-bg.png) no-repeat 50% bottom;
}
div.module div div div, div.module_menu div div div {
padding-right:15px;
padding-left:15px;
background:url(../images/module-bg-bottom.png) no-repeat 50% 100%;
padding-bottom:15px;
min-height:230px;
}
div.module div div div div, div.module_menu div div div div {
background:none;
}
How can I set modules height equal automate/dynamically with saving Module background style.
You need to take a look in templates/system/html/modules.php.
You can then create a copy of module chrome to output your module structure, which would be more beneficial since you code is kinda outrageous to read and isn't very semantic. i.e.
function modChrome_myModuleName($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".moduleOuter { your style }";
$css .= ".moduleInner{ your style }";
$doc->addStyleDeclaration($css);
?>
<div class="moduleOuter">
<div class="moduleInner">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
You'd then guess call the module with a style, like so:
<jdoc:include type="modules" name="left" style="myModuleName" />
From then on, you'll have a more semantic way of calling your modules and making it easier to get your CSS heights to work.