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"/>
Related
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 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?
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 am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>
I am converting a single page html site into a static wordpress site.
The original html homepage(the only page) mainly uses jquery to drop down a small text area when clicked on an option in the menu far.
Attaching the index.php of my converted theme.
<div class="content" id="content1">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/close.png" style="position:absolute; right:5px; top:5px; width:15px;"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/face.png" style="padding-left:15px; padding-top:20px; width:454px;" />
</div>
<div class="content" id="content2">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/close.png" style="position:absolute; right:5px; top:5px; width:15px;"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/face2.png" style="padding-right:15px; padding-top:30px; width:453px; height:200px;" />
</div>
and so on ..
I want to add the content in such a way that I should be able to modify it in wordpress app without editing the theme file ? Is it possible ? New to wordpress. Help is appreciated.
Yes you can edit content from wp-admin. In page management under admin you can create pages, then add loop in page.php or your template file it will display the content which you have written in admin.
<?php while ( have_posts() ) : the_post(); ?>
<?php the_title();?>
<?php the_content();?>
<?php endwhile;?>
With the above code you can display page management content on browser.