I am new to Joomla and rather unexperienced with html/css. I have a module that adds a menu to my website. The menu is displayed correctly, but it seems that the position I use dedicates much more width to the position than I fill.
How do I resize a position or the size of a module that takes the position? I can't see any settings that would allow me to alter the width.
I assume I have to hack around in the css files then, right? How do I find the css responsible for the expansion in width of the module? I looked naively for 'position-8', but that would have been to easy.
I appreciate any pointer.
The screenshot shows my menu located in position-8 and the size of the position (the grey area). Next to it starts the article-content area. I want to fix this whole, but I am unsure of how to do that.
Firebug shows me this html-values for the grey-area
<div id="sidebar" class="span3" style="overflow: visible; z-index: 1;">
<div class="sidebar-nav" style="overflow: visible; z-index: 1;">
<div class="moduletable sidebar.swmenu" style="overflow: visible; z-index: 1;">
<h3>LTL Menu</h3>
<table id="outertable" class="outer" align="left" style="overflow: visible; z-index: 1;">
<tbody style="overflow: visible; z-index: 1;">
<tr style="overflow: visible; z-index: 1;">
<td style="overflow: visible; z-index: 1;">
<div id="outerwrap" style="overflow: visible; z-index: 1;">
</td>
</tr>
</tbody>
</table>
<hr style="display:block;clear:left;margin:-0.66em 0;visibility:hidden;">
<script type="text/javascript">
<script type="text/javascript">
</div>
</div>
The index.php of my template, I want to change the size of the position-8
<?php
/**
* #package Joomla.Site
* #subpackage Templates.protostar
*
* #copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* #license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->getCfg('sitename');
if($task == "edit" || $layout == "form" )
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');
// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
// Add current user information
$user = JFactory::getUser();
// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<?php
// Use of Google Font
if ($this->params->get('googleFont'))
{
?>
<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,h2,h3,h4,h5,h6,.site-title{
font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
}
</style>
<?php
}
?>
<?php
// Template color
if ($this->params->get('templateColor'))
{
?>
<style type="text/css">
body.site
{
border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
background-color: <?php echo $this->params->get('templateBackgroundColor');?>
}
a
{
color: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<?php
}
?>
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
?>">
<!-- Body -->
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
<?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="position-1" style="none" />
</nav>
<?php endif; ?>
<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span;?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>
If you check:
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
position-8 is inside div #sidebar
You have to add a suffix to your module settings:
Advanced -> Module Class Suffix: mymenu
Then in your template css under: templates/your_template/css/template.css
You have to add: div#sidebar div.mymenu{ width: 100%; }
*change 100% with the number that will fit better
EDIT:
Your template is responsive based on bootstrap. You have to edit <div id="sidebar" class="span3"> span3 value to span2 or span1 and in your head section:
// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
increase the span9 to span10 or span11 to fill the gap.
Related
I cannot for the life of me
figure out why my footer is showing up in the middle of my webpage. I have my #content div set to have a height of 100% and have given it a relative position; and I even added an absolute position to my footer with bottom: 0;. What am I missing? I can't figure out what is causing it to not follow the normal flow of elements in the page!
I've checked several posts with this same problem, but the suggestion is almost always what I've tried above. I did try getting rid of the position for #content and the footer and instead setting display: inline-block; for both (was suggested in another post), and that didn't do anything.
Link to my in-progress page: http://freshcardsite.thewelllovedlife.com/home-use/
HTML for the Page (starting below the header):
<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main consumer-page" role="main">
<?php
// vars
$topsection = get_field('consumer_top_image_section');
if( $topsection ): ?>
<div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">
<div class="top-section">
<div class="top-text">
<h1>Fresh Card</h1>
<p><?php echo $topsection['consumer_top_content']; ?></p>
<img src="<?php echo $topsection['consumer_top_icon']; ?>" />
</div>
</div>
</div>
<?php endif; ?>
<?php
// vars
$aboutsection = get_field('consumer_about_section');
if( $aboutsection ): ?>
<div class="about-section">
<div class="about-content">
<h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
<p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
</div>
<?php if($aboutsection['consumer_uses_section'] ): ?>
<div id="tabs">
<ul class="tabs">
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<li><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<div id="<?php echo $use['consumer_use_number']; ?>">
<p> <?php echo $use['consumer_use_information']; ?> </p>
<p> <?php echo $use['consumer_use_video']; ?</p>
<p> <?php echo
$use['consumer_second_use_video']; ?> </p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contact-section">
<div class="contact-content">
<h2>Contact Us</h2>
<?php the_field('consumer_contact_section'); ?>
</div>
</div>
<?php if (have_posts() ) : ?>
<div class="news-section">
<div class="news-content">
<h2>Awards & News</h2>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
And here's my relevant CSS
html, body {
height: 100%;
}
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
#content {
position: relative;
height: 100%;
min-height: 100%;
}
footer#colophon {
position: absolute;
bottom: 0;
}
Your main problem is that .consumer-page is getting a position:absolute and its messing with your elements heights
Lets try the next classes:
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: initial;
left: 0;
top: 0;
}
.wrap {
padding: 0;
width: 100vw;
max-width: 100vw;
margin: 0;
}
#content {
padding: 0;
}
footer#colophon {
position: initial;
bottom: 0;
}
Hope this helps. If you run into problems, pliss coment on this answer and will happily edit
After submitting the message page is reloading with message box content scrolled up. I want scrolled down as shown in image like facebook messenger. I am trying many ways but not getting the proper output.
chat form
<?php foreach ($b_to_c as $row) { ?>
<?php
if ($row->From == 'customer') {
?>
<div class="left">
<div class="row">
<div class="col-md-1">
<?php if (empty($roww->customer_image[0]) || empty($roww->supplier_image)) { ?>
<img src="<?php echo base_url(); ?>images/default.jpg" class="img-circle" width="30px" height="30px"/>
<?php } else { ?>
<img src="<?php echo 'data:image;base64,' . $roww->supplier_image; ?>" class="img-circle" width="30px" height="30px"/>
<?php } ?>
<!--<img src="<?php // echo 'data:image;base64,' .$roww->supplier_image; ?>" class="img-circle" width="30px" height="30px"/>-->
</div>
<div class="col-md-11">
<div class="left_msg_block">
<?php $timestamp1 = strtotime($row->msg_sent_time); ?>
<?php $mesgtimming = date(' D-h:i A', $timestamp1); ?>
<div class="left_messagetext"><?php echo $row->message; ?></div>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="right">
<div class="row">
<div class="col-md-12">
<div class="right_msg_block">
<?php $timestamp1 = strtotime($row->msg_sent_time); ?>
<?php $mesgtimming = date(' D-h:i A', $timestamp1); ?>
<div class="right_messagetext"><?php echo $row->message; ?></div>
</div>
</div>
</div>
</div>
<?php
}
}
?>
css code
.left_messagetext a{
color: rgba(0, 0, 0, 1);
}
.right_messagetext{
background-color: #0084ff;
margin: 1px 0;
padding: 6px 12px;
word-wrap: break-word;
clear: right;
float: right;
border-bottom-left-radius: 1.3em;
border-top-left-radius: 1.3em;
max-width: 60%;
}
.right_messagetext a{
color:#fff;
}
.scrollstarts{
overflow-y:scroll;
max-height: 500px;
overflow-x:hidden;
padding:3%;
}
.left_messagetext{
background-color: #d0cbcb;
margin: 1px 0;
padding: 6px 12px;
border-bottom-right-radius: 1.3em;
border-top-right-radius: 1.3em;
clear: left;
float: left;
word-wrap: break-word;
max-width: 60%;
}
controller code
$data['b_to_c'] = $this->Profile_model->Buyer_s($pid);
$this->load->view('buyermessageview', $data)
Model code
public function Buyer_s($pid) {
$this->db->select('*');
$this->db->from('communication');
$this->db->join('supplier_otherdetails', 'supplier_otherdetails.supplierid_fk = communication.supplier_id');
$this->db->join('customer_registration', 'communication.Customer_id=customer_registration.id');
$array = array('communication.product_id' => $pid, 'communication.Customer_id' => $this->session->id);
// $where = "communication.From='customer' and 'communication.Customer_id',$this->session->id";
$this->db->where($array);
$this->db->order_by("msg_sent_time", "asc");
$query = $this->db->get();
$results = [];
if ($query->num_rows() > 0) {
$results = $query->result();
}
return $results;
}
You could maybe use javascript to scroll to the bottom of the page?
Example:
<script>
// scroll to the bottom of the page
window.scrollTo(0,document.body.scrollHeight);
</script>
Or, if it's just in the message-box you want to go down, you could use:
<script>
// scroll to the bottom of messagediv
var messageDiv = document.getElementById("your_div");
messageDiv.scrollTop = messageDiv.scrollHeight;
</script>
You could of course wrap the script in a function and call it whenever, on a timed basis with setTimeout() or on page load etcetera...
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
I'm not sure how to centre a doubleclick ad horizontally. After reading this similar question Centre align leaderboard ad, I'm using this code now
<div class="center">
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
AD CODE
</div>
But it doesn't work. Any ideas?
To clarify, the ad is being used on this website. http://worldgreendaily.com/
The total code on the page is:
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$page_layout = get_option(THEME_NAME."_page_layout");
//logo settings
$logo = get_option(THEME_NAME.'_logo');
$search = get_option(THEME_NAME.'_search');
//top banner
$topBanner = get_option(THEME_NAME."_top_banner");
$topBannerCode = get_option(THEME_NAME."_top_banner_code");
//fixed menu
$menuStyle = get_option(THEME_NAME."_menu_style");
$weatherSet = get_option(THEME_NAME."_weather");
$weather = OT_weather_forecast($_SERVER['REMOTE_ADDR']);
// header social icons
$socialHeader = get_option(THEME_NAME."_social_header");
$vimeo = get_option(THEME_NAME."_vimeo");
$twitter = get_option(THEME_NAME."_twitter");
$facebook = get_option(THEME_NAME."_facebook");
$googlepluss = get_option(THEME_NAME."_googlepluss");
$pinterest = get_option(THEME_NAME."_pinterest");
$tumblr = get_option(THEME_NAME."_tumblr");
$linkedin = get_option(THEME_NAME."_linkedin");
$dribbble = get_option(THEME_NAME."_dribbble");
$soundcloud = get_option(THEME_NAME."_soundcloud");
?>
<!-- BEGIN .boxed -->
<div class="boxed<?php echo $page_layout=="boxed" ? " active" : false; ?>">
<!-- BEGIN .header -->
<div class="header">
<!-- BEGIN .header-very-top -->
<div class="header-very-top">
<!-- BEGIN .wrapper -->
<div class="wrapper">
<div class="left">
<?php
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker_Top;
$args = array(
'container' => '',
'theme_location' => 'top-menu',
'items_wrap' => '<ul class="ot-menu very-top-menu load-responsive" rel="'.__("Top Menu", THEME_NAME).'"><li><i class="fa fa-home"></i></li>%3$s</ul>',
'depth' => 3,
'walker' => $walker,
"echo" => false
);
if(has_nav_menu('top-menu')) {
echo wp_nav_menu($args);
}
}
?>
</div>
<?php if($weatherSet=="on") { ?>
<?php if(!isset($weather['error'])) { ?>
<div class="right">
<div class="weather-report">
<span><?php _e("Weather",THEME_NAME);?></span>
<b><?php echo $weather['country'].', '.$weather['city'];?></b>
<img src="<?php echo THEME_IMAGE_URL.$weather['image'];?>.png" alt="<?php echo $weather['country'].', '.$weather['city'];?>" />
<font class="weather-meter" style="background: <?php echo $weather['color'];?>;"><?php echo $weather['temp_'.get_option(THEME_NAME."_temperature")];?></font>
</div>
</div>
<?php
} else {
echo $weather['error'];
}
?>
<?php } ?>
<div class="clear-float"></div>
</div>
<div class="double-split"></div>
<!-- END .header-very-top -->
</div>
<!-- BEGIN .header-middle -->
<div class="header-middle">
<div class="wrapper">
<?php if($logo) { ?>
<div class="logo-image">
<h1><?php bloginfo('name'); ?></h1>
<img class="logo" src="<?php echo $logo;?>" alt="<?php bloginfo('name'); ?>" />
</div>
<?php } else { ?>
<div class="logo-text">
<h1><?php bloginfo('name'); ?></h1>
</div>
<?php } ?>
<?php if($topBanner=="on") { ?>
<div class="banner">
<div class="banner-block">
<?php echo stripslashes(do_shortcode($topBannerCode));?>
</div>
<?php if (is_pagetemplate_active("template-contact.php")) { ?>
<?php $contactID = ot_get_page('contact'); ?>
<div class="banner-info">
<span class="icon-default"> </span><?php _e("Sponsored Advert", THEME_NAME);?><span class="icon-default"> </span>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-middle -->
</div>
<!-- BEGIN .header-menu -->
<div class="header-menu<?php if($menuStyle=='on') { echo ' thisisfixed'; } ?>">
<div class="wrapper">
<?php
wp_reset_query();
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker;
$args = array(
'container' => '',
'theme_location' => 'middle-menu',
'items_wrap' => '<ul class="%2$s main-menu" >%3$s</ul>',
'depth' => 3,
"echo" => false,
'walker' => $walker
);
if(has_nav_menu('middle-menu')) {
echo wp_nav_menu($args);
} else {
echo "<ul class=\"main-menu\"><li class=\"navi-none\">Please set up ".THEME_FULL_NAME." menu!</li></ul>";
}
}
?>
<?php if($search=="on") { ?>
<div class="right menu-search">
<form method="get" action="<?php echo home_url(); ?>" name="searchform" >
<input type="text" value="" placeholder="<?php _e("Search something..",THEME_NAME);?>" name="s" id="s"/>
<input type="submit" class="search-button" value=" " />
</form>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-menu -->
</div>
<!-- BEGIN .header-undermenu -->
<div class="header-undermenu">
<div class="wrapper">
<?php
if ( function_exists( 'register_nav_menus' )) {
$args = array(
'container' => '',
'theme_location' => 'third-menu',
"link_before" => '<i>',
"link_after" => '</i>' ,
'items_wrap' => '<ul class="secondary-menu" >%3$s</ul>',
'depth' => 1,
"echo" => false
);
if(has_nav_menu('third-menu')) {
echo wp_nav_menu($args);
}
}
?>
<div class="clear-float"></div>
</div>
<!-- END .header-undermenu -->
</div>
<!-- END .header -->
</div>
<?php wp_reset_query(); ?>
<div style="text-align: center; margin: 0 auto;"><!-- Test_WGD -->
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1419519536676-0'); });
</script></div>
</html>
If you put your css on the page instead of linking to an external css file you should be putting it inside the <head></head> tags. Your document should look something like this:
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">AD CODE</div>
</body>
</html>
you can also use inline styling (which I would not recommend) if you wanted the styles near the div like your example:
<div style="text-align: center; margin: 0 auto;">AD CODE</div>
UPDATE
This is being pulled in from an iframe. What you need to do is find the id that I have pointed out in the below image:
Which is this:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
and add margin: auto to it, like so:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px; margin: auto;'>
That should center your image
div and style tags must be replaced.
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">
AD CODE
</div>
</body>
</html>
I am trying to style a div that is nested in some ofter divs and having some trouble. Below is the code and css I am attempting to use. If you could show me the correct css tag to style the element called #cleanse I would appreciate it.
<!-- Header starts here -->
<header id="header">
<div class="align">
<!-- Logo start here -->
<div id="logo">
<?php if(get_option( 'ms_plain_logo')=="true" ) { ?>
<h1><a class="text_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"><?php echo get_bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h1><a class="img_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"></a></h1>
<?php } ?>
</div>
<!-- Logo ends here -->
<!-- Navbar -->
<?php $args=array(
'theme_location'=>'primary-navigation',
'container' => 'nav',
'container_id' => 'navigation-wrapper',
'menu_id' => 'navigation',
'fallback_cb' => false
); ?>
<?php wp_nav_menu($args); ?>
<?php if(!has_nav_menu( 'primary-navigation')) { ?>
<nav id="navigation-wrapper">
<ul id="navigation">
<?php wp_list_pages( 'title_li=&sort_column=menu_order'); ?>
</ul>
</nav>
<?php } ?>
<!-- Navbar ends here -->
<div id="cleanse">
<a href="link" target="_blank">
<img src="img"/></a>
</div>
</div>
</header>
<!-- Header ends here -->
#cleanse { top: 55px; }
What do want to do? Add a margin-top or something?
This only works with position:
#cleanse { top: 55px; }
Try this:
#cleanse { margin-top: 55px; }
Also the css should be placed in the header:
<style>
/* your rules here */
</style>