I am newbie to the WordPress. I want to make two sidebars. One in the left and another in the right hand side. I want to use twenty-eleven theme and then customise that. So any help will be highly appreciable.
Very Simple and easy way, first make a design with two sidebar, one on left and one on right, then call specific widgets on right and left side bar.
<?php dynamic_sidebar (''WIDGET AREA NAME); ?>
Put this in Index.php or home page
<div class="sidebar_left" id="sidebar_left">
<?php if ( is_active_sidebar( 'sidebar-left' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-left' ); ?>
</div><!-- #secondary -->
<?php endif; ?>
</div>
and CSS for this is here
#sidebar_left{
float:left;
/*width: 303px;*/
border: 2px solid #A2A2A2;
display: block;
float: left;
height: auto;
margin: -532px 0 -62px -123px
padding: 0;
top: auto;
width: auto;
}
You should :
create a child theme of twenty-eleven
and add a widget area using register_sidebar
You will find a lot of tutorials for doing this, e.g. this one.
Related
How can I add text over images on wordpress. I am using the Sydney theme and in the customization area and using the wp display images plugin , I managed to assign a single image per each page, is there anyway that I can also add text over these images?
I dont have access to the editor on the appearance section. is not possible to add this text to the images using just the CSS?
This is the code for displaying image below the header. You need to modify this code if you want add a text. Without changing this code you do cannot do.
Are you able to see the code in editor in admin panel?
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
Try this style
.page-id-10 .header-image:before {
content: 'onze-klanten';
}
.page-id-8 .header-image:before {
content: 'werken-bij';
}
.page-id-206 .header-image:before {
content: 'Wie zijn wij';
}
.header-image:before {
display: block;
padding-top: 25%;
font-size: 45px;
text-align: center;
color: #fff;
}
.header-image {
position: relative;
}
I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn't solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
if( $posts ): ?>
<ul class="photolistul">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li class="photolistli">
<!-- need the right info here -->
<div class="photocontainer1">
<span><?php the_field('single_image_title'); ?></span>
<img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
</div>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
</div>
CSS
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 img {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn't have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
var child = $(this);
sumwidth+=child.outerWidth();
});
$(".stage").css({
'min-width' : sumwidth + 25 + 'px'
});
P.S. 25 value is random, don't know why this 25px is missing when outerWidth value is sumarized. Maybe it's because of codepen...
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded - no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.img-resposnive {
height: 100%;
width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
height: 400px;
max-height: 600px;
min-height: 200px;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: relative;
float: left;
}
I'm currently displaying a users profile picture in php and if they click on it, then it takes them through to their own profile. The image displays correctly and the link works, but the area of the link extends way beyond the picture and over a link nearby. How would I go about reducing the area of the anchor?
<?php } if ($searchuser == $username)
{ ?>
<a href="profile.php">
<?php } ?>
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php if ($searchuser == $username)
{?>
</a>
div.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}
Try with this:
php
<?php }
$show_user_link = false;
if ($searchuser == $username) {
$show_user_link = true;
}
?>
<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
<?php if( $show_user_link ): ?>
<a class="user-link" href="profile.php">
</a>
<?php endif; ?>
</div>
css
div.user-pic {
position: relative;
}
a.user-link {
height: 125px;
width: 100%;
}
You put the anchor in within the div tag and then you could make div's position relative and anchor's width to 100%.
PS: You could try to use something like
<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>
when mixing php and html to make your code more readable.
--- EDIT
Ok, I understand, see if the new code is more helpfull now, the only thing I think that could go wrong is the height of the anchor in case it isnt fixed to 125px, say me if you have problems with it.
I am currently coding a Wordpress website. I have a sidebar and the main body for my blog posts. The sidebar currently has the following properties:
.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}
and the main body for blog posts:
body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}
.post {
padding-left:10px;
border-left:thin solid #000000;
}
I am currently trying to add padding-left to .post so that there is a gap between the right border of the sidebar and the blog posts. However, this is not working (a gap is not created) for some reason. Nor is border-left (there is no border created; I tried removing the border-right property on the sidebar).
This is currently the code for index.php
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class = "sidebar">
<?php get_sidebar(); ?>
</div>
<div class="post">
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
How do I make padding-left and border-left work for the main blog posts?
Thanks!
Padding is applied within the element, so the border is on the other side of the padding. What you need is margin, which is applied outside of the element:
.post {
margin-left:10px;
border-left:thin solid #000000;
}
Here is an article explaining padding and margin in more detail.
This sounds like a conflict between the default Wordpress CSS and your themes CSS file(s). A quick hack is to add !important to the end of the CSS declarations as follows:
.post {
padding-left: 10px !important;
border-left: thin solid #000000 !important;
}
A long-term solution is to examine what CSS files are loaded (and in what order) and what selectors are being used. Excellent resource: http://codex.wordpress.org/CSS_Troubleshooting
I'm trying to center the navigation on this page: http://66.147.244.50/~schneie1/
However, the div containing the ul of buttons take up the entire width and thus I can't do "text-align:center;"
Here's the page.tpl.php and the CSS-file:
<nav id="navigation" role="navigation" class="clearfix">
<?php if ($page['navigation']): ?> <!--if block in navigation region, override $main_menu and $secondary_menu-->
<?php print render($page['navigation']); ?>
<?php endif; ?>
<?php if (!$page['navigation']): ?>
<?php if ($main_menu): print $main_menu;
endif; ?>
<?php if ($secondary_menu): print $secondary_menu;
endif; ?>
<?php endif; ?>
</nav> <!-- /#navigation -->
#navigation {
margin: 0 0 1.5em;
padding: 0;
width:auto;
margin-left:auto;
margin-right:auto;
}
#navigation ul.main-menu {
margin:0;
padding: 0;
display:block;
width:auto;
}
#navigation ul.main-menu li {
float: left;
margin: 0;
padding: 0;
}
Thanks in advance!
Change your width on your #navigation from "auto" to a value. Auto means it will extend the full width of the screen, unless you've already wrapped it in a block level element which has a fixed width. You need something for your "auto" to reference.