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.
Related
So I have a Wordpress page in the making, and basically I have a title column and a text column.
The issue is that I am using the wordpress text editor, and its putting all of my content into the text column but I want a couple of photos and captions for those photos to go into the title column so that the readers read and theres pictures alongside. I was successful with using position:absolute, except that the photos were no longer responsive to zooming in and out on the webpages.
How can I keep the written content in the text column, and the pictures in the title column and have them still be responsive to zoom that they stay within the title-column with zooming in/out?
(I put the "<" in (<) on purpose)
(<)a href="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg">
(<)img class="size-medium wp-image-146 alignleft";
(<)src="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg" alt="Age 18" width="175" height="400" />
(<)div id=caption18>Me around age 18(<)/ div>
/* Two Column Title Layout */
div.title-column {
width: 20%;
float: left;
}
div.text-column {
width: 80%;
float: right;
}
<article class="post page">
<!-- column-container -->
<div class="column-container clearfix">
<!-- title-column -->
<div class="title-column">
<h2><?php the_title(); ?></h2>
</div><!-- /title-column -->
<!-- text-column -->
<div class="text-column">
<?php the_content(); ?>
</div><!-- /text-column -->
</div><!-- /column-container -->
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
If I understood your question right, you are trying to do something like this while retaining the scalability of the image(s)? Note that I had to adjust some of your brackets. I also changed the width of the image to "auto" and the height to "0". This should retain the scalability of the image, but I have not tested it.
<!-- title-column -->
<div class="title-column">
<h2><?php the_title(); ?></h2>
<a href="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg">
<img class="size-medium wp-image-146 alignleft" src="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg" alt="Age 18" width="auto" height="0">
</a>
</div><!-- /title-column -->
apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/
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 doing some WordPress theming. I have a #novelsslider div. Inside of #novels, I used this code to get the latest three posts in the "novels" category, inside of the html divs, I used some php functions to get the latest 3 posts and load the html 3 times floated to the left to build a slider:
<!-- slider -->
<div id="novelsslider" class="slider">
<? $novels = get_option('of_novels') ?>
<?php query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<a href="<?php the_permalink(); ?>">
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
</a>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php endwhile;?>
<div id="novelsslidebars">
<input type="submit" value="" class="slidebars" id="novelsslidebtnleft">
<input type="submit" value="" class="slidebars" id="novelsslidebtnmiddle">
<input type="submit" value="" class="slidebars" id="novelsslidebtnright">
</div>
</div>
<!-- End novelsslider -->
ow I have some arrows.. I want them when clicked to get a set of previous 3 posts and load them, how can I do such a loop?
To achieve this you can adopt any of these methods :
1- If your posts are not in large number then you can preload them and store in some container which is hidden by default and will appear when you click the next / previous button, like a content slider, but this is a bad approach and not recommended.
2- Use AJAX to load the rest of the posts, this is a good method and will be purely dynamic. Look on the following links to have the idea:
http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/
Wordpress - how can I fetch more posts via AJAX?
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"/>