I use non-responsive Joomla template from Gavick.
For mobile, I started to use Jtouch.
There is a bug in the template, creating duplicate page.
Html is:
<div id="gkMainbodyWrap">
<div id="gkComponent">
<gavern:desktop>
<div class="item-page">
// here is page code
</gavern:desktop>
<gavern:mobile>
<div class="item-page">
// ... here is the page content again !!! ...
</gavern:mobile>
I am trying to find what to delete from the template php file,
to stop this duplication.
Here is the relevant part of the php:
<div id="gkMainbody" class="gkMain">
<div id="gkMainbodyWrap">
<?php if($this->isFrontpage()) : ?>
<?php if($this->getParam('mainbody_frontpage', 'only_component') == 'only_component') : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php elseif($this->getParam('mainbody_frontpage', 'only_component') == 'mainbody_before_component') : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php else : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php endif; ?>
<?php else : ?>
<?php if($this->getParam('mainbody_subpage', 'only_component') == 'only_component') : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php elseif($this->getParam('mainbody_subpage', 'only_component') == 'mainbody_before_component') : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php else : ?>
<div id="gkComponent">
<jdoc:include type="component" />
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
Maybe I am an Idiot, but all this if-else seems to be doing the same.
Any help of how to remove the code creating duplication will be very much appreciated,
Help a dime in distress :)
You're not an idiot, as for the person that wrote that if well… that's another story.
Let me re-write that gkMainbodyWrap for you:
hmmm…
<div id="gkMainbody" class="gkMain">
<div id="gkMainbodyWrap">
<div id="gkComponent">
<jdoc:include type="component" />
</div>
</div>
</div>
The <gavern:mobile> and <gavern:desktop> tags are probably intended to be processed by their template framework/code base and are probably meant to act as a switching mechanism of some sort, like a basic type of progressive enhancement (aka Adaptive web design). So, possibly JTouch is interfering with the Gavick code.
Last I looked JTouch was a mobile adaptive/reactive solution not a responsive one, and those gavern tags look like an attempt at adaptive block markers, is it possible that the template while not responsive is actually adaptive?
Related
I'm using Joomla 3 and Virtuemart 3.0.18.
I'm building a website to show products of my store. So, I created 2 modules in the same type: mod_virtuemart_product. I need one of them display my newest products and other display featured products.
My problem is my website just display one of them in a same page.
Please help me! Thank you so much!
Update:
In my template, I load those modules using like this:
<?php if ($this->countModules('modpro')) : ?>
<div class="modpro">
<div class="container">
<div class="row">
<div class="col-md-12">
<jdoc:include type="modules" name="modpro" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('modnew')) : ?>
<div class="modnew">
<div class="container">
<div class="row">
<div class="col-md-12">
<jdoc:include type="modules" name="modnew" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
I tried setting them in the same position, but it doesn't work.
I disabled one of them, other were be renderred. I set them on difference pages, them were be renderred.
Thanks everyone who viewed this question.
I has found the reason of my issue. In the sortSearchListQuery() function of the VirtueMartModelProduct class, I found these code line:
if(self::$_alreadyLoadedIds){
$where[] = ' p.`virtuemart_product_id`!='.implode(' AND p.`virtuemart_product_id`!=',self::$_alreadyLoadedIds).' ';
//$where[] = ' p.`virtuemart_product_id` NOT IN ('.implode(',',self::$_alreadyLoadedIds).') ';
}
It prevent my second module from loading the same products again.
So, thank you again!
I have attempted to put my script into a page I have created but can't seem to get the script to work correctly. It is a paginate script which links to the "newsblocks" class. Where do I place the script to make it work?
<?php
/*
Template Name: [Newspage]
*/
get_header();?>
<div id="main" class="defaultContentWidth">
<div id="wrapper-row">
<div id="primary">
<div id="content">
<?php the_breadcrumb();?>
<h1 class="entry-title"><?php the_title();?></h1>
<?php if(have_posts()) :
while(have_posts()) : the_post();?>
<div class="newscont"><?php the_content();?></div>
<?php endwhile;
endif;?>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
<div class="contnewslist">
<ul class="newsblocks">
<li>
<h2>NEWSLETTER 1</h2>
<i>November 01, 2014</i>
<p>This is the November edition of the newsletter for The Dry Cleaner App. Featuring in this newsletter is ...</p>
<input type="submit" value="Download" id="submit" class="newsdownload">
</li>
For Optimizing the performance of a webpage it's always recommended to put the Javascript file to your footer.
So load your script files in your footer file.
In wordpress you've a footer.php
Change
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/javascript/jquery.pajinate.js"></script>
TO
<script type="text/javascript" src="<?php echo echo get_template_directory(); ?>/javascript/jquery.pajinate.js"></script>
try to add js with get_template_directory_uri()
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascript/jquery.pajinate.js"></script>
and add js to your theme footer.php or in same page footer or where you need
also i think typo here :- jquery.pajinate.js should be jquery.paginate.js
I'm thinking <?php bloginfo('template_directory');?> should be changed to <?php echo bloginfo('template_directory');?> but since you didn't gave us the definition of bloginfo() function we can't really do much..
I'm building a custom wordpress theme and I was watching my buddy write up code for a page using bootstrap. He made it so that it is centered on his monitor. I believe he is using a 4:3 monitor. When I look at the page on my 24inch widescreen the page is not centered. What am I doing wrong that is making the page not responsive to any screen size? This is my code for the page:
<?php get_header(); ?>
<div class="row">
<div class="span1"></div>
<div class="span8" id="container">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="span2">
<?php get_sidebar();?>
</div>
<div class="span1"></div>
</div>
<?php get_footer(); ?>
and here is the code for the header:
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<center>
<div class="row">
<div class="span3"></div>
<div class="span6">
<div class="logo">
<h1 id="logo-mathew">Mathew J. Mari</h1>
<h3 id="logo-attorney">Attorney At Law</h3>
</div>
</div>
<div class="span3"></div>
</div>
</center>
I am new to using bootstrap so maybe I'm using the wrong syntax for it to be responsive or I've left something out? I just want it to be responsive on all monitors, having it centered and utilizing a 1-8-2-1 column layout. Any help would be greatly appreciated.
It does seem like you are using an older version of Bootstrap. The Newer version mnakes it much easier to center your elements.
Your code with the elements being used inside a container class. One of bootstrap's 3 easier method of centering a div.
And with the new bootstrap, the use of class names like col-md-1 , col-md-8 etc will be used. Make sure you read up on Bootstraps' grid system. Makes life much easier for responsive designs
<div class="container">
<div class="row">
<div class="col-md-1"></div>
</div>
<div class="container">
<div class="col-md-8">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="col-md-2">
<?php get_sidebar();?>
</div>
<div class="col-md-1"></div>
</div>
container tag is missing must be used over the row and all other tags
Use .container for a responsive fixed width container.
...
Use .container-fluid for a full width container, spanning the entire width of your viewport.
...
Firstly you are using the old version of Bootstrap i.e 2.3 and bootstrap has already released the new version 3.0 so please upgrade it.
Now in the version you are using, there is another css that you need to give reference and that is for the responsive. and also add the .container-fluid for your main container.
Add Class .col-centered to your page wrapper div
.col-centered{
margin:0 auto;
float : none;
display:block;
}
it centered your page in any size monitor
I have a few nested divs on a website I am creating with the Joomla engine. The problem lies mainly in the fact that the plugins themselves nest 2 divs inside my already created div "banner", meaning I do not have access to these two divs. Within them is the small, rectangular image. This image should help you see my issue (I'd post an embedded image but you know, apparently I need 10 rep):
http://www.nerfarena.net/SiteImage.PNG
I don't want the banner ad butted against the search bar. But the three nested divs will not increase in height no matter what CSS properties I modify. Even #banner won't budge. They all seem to size themselves to the minimum needed (bottom of the search bar + banner ad's height). I'm looking for a way around this so any suggestions would be really appreciated.
Here is the chunk of the php file where the divs I am concerned about are:
`
<!-- Logo -->
<div id="logo">
<?php if ($logo && $logoimage == 1): ?>
<img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" />
<?php endif; ?>
<?php if (!$logo || $logoimage == 0): ?>
<?php if ($sitetitle): ?>
<?php echo htmlspecialchars($sitetitle); ?><br/>
<?php endif; ?>
<?php if ($sitedescription): ?>
<div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- Search -->
<div id="search">
<jdoc:include type="modules" name="position-0" />
</div>
<!-- Banner -->
<div id="banner" style= "text-align: right;">
<jdoc:include type="modules" name="banner-position" />
</div>
</div>
`
Try using sibling selectors for CSS. Sometimes it helps me fix the alignments of divs.
i'm trying to modify a Joomla template to create a link out of a defined 'div' on the index.php page and am not having any luck. in the original source, there was an an object, 'bglogo' which is a static .jpg, and a separate area within it that contained the link. i got rid of the separate area, and now want to make bglogo a link. i can't figure out how to do this, the php code is below and the webpage is tagalong.in (bglogo being the image in the top right corner of a name tag)
<div id="entries">
<jdoc:include type="modules" name="content-top-a" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<div class="clr"></div>
<jdoc:include type="modules" name="content-bottom-a" style="xhtml" />
</div>
<div id="sidebar">
<!-- logo about etc here -->
<div class="bglogo">
<a href= "http:www.meetup.com/tag-along" > </a>
</div>
<!-- menu -->
<?php if( $this->countModules('sidebar-a') ) { ?>
<div id="sidebartop">
<jdoc:include type="modules" name="sidebar-a" style="xhtml" />
</div>
<?php } ?>
<?php if( $this->countModules('sidebar-b') ) { ?>
<div id="sidebarright">
<jdoc:include type="modules" name="sidebar-b" style="xhtml" />
</div>
<?php } ?>
<div id="sidebarleft">
<?php if( $this->countModules('sidebar-c') ) { ?>
<jdoc:include type="modules" name="sidebar-c" style="xhtml" />
<?php } ?>
<?php echo '<h3>Copyright</h3>'.$copyright . $warningerrorx; ?>
</div>
</div>
Okay I see where you are going.
You will need to add http the colon and two forward slashes to the beginning of the link. (had to describe it that way as they get stripped - as per my original comment).
The link is present already - but has nothing inside of it - because the image is a background image on the div. What you need to do is create some css that will apply only to the link within the div with the class of bglogo. This should then be given a width and height so it overlays your background image.
Because the parent bglogo div is already the right height and width I'd suggest width: 100%; and height:100%. Be aware that links are generally inline elements and don't normally take a height or width. So we must also tell the anchor (link) to behave like a block level element.
All together that gives us:
.bglogo a{display:block; width: 100%; height:100%;}
I am actually not quite sure what you are saying, but if you want your image to displayed in a link you can do it like this:
<img src="your/path/blogo.jpg"/>