I have my site in word pressHere is my website link. There is text above slider, when i remove it , automatically slider is going to be disappears. Can anybody help ???
Code is as follow :
<?php get_header(); ?>
<div id="page-wrap">
Front slider
<div id="front-slides">
<div class="slides_container" >
<?php echo do_shortcode( '[cycloneslider id="115"]' ); ?>
</div>
</div>
After Remove You text "Front slider", open your style.css file and
change the margin-bottom: 9px; to margin-top: 60px; for #front-slides that will fix it:
#front-slides {
position: relative;
margin-top: 60px; /* the minimum margin is 60px you, if you change to 50px, your slider will go under the menu div.. & that would makes disappear :) */
}
Related
I have two post's next to each other on one of my pages. I have them take up the full width of the page. Although I got this to work, on the right the thumbnail has a small gap under it. This only happens on safari not on chrome. I have researched and found this gap could happen if you don't have you img tags on the same line. However, I am not using ing tags, I'm calling elements from wordpress. Does anyone have any other solutions on how to fix this? Can it be done through css? Thanks in advance.
safari, see how the bottom of the pictures don't line up
chrome, how I want it to look - bottom of pictures line up
fiddle with img tags instead of php - https://jsfiddle.net/v90pug4o/
although this is not completely similar to my problem I thought I would provide it in img tags since my code is in php. There is still a gap in the fiddle (its on the right side) its very noticeable when you compare it to this fiddle - https://jsfiddle.net/5bp0a3rf/ - where I put the img tags on the same line. However unfortunately I am not able to do this with my code since it's php. So thats why I was wondering if there are any other options?
<div class="food-featured-posts">
<div class="food-featured-posts-first">
<?php query_posts( 'p=185'); while (have_posts()): the_post(); ?>
<?php the_post_thumbnail(); ?>
</div>
<?php endwhile; ?>
<div class="food-featured-posts-second">
<?php query_posts( 'p=173'); while (have_posts()): the_post(); ?>
<?php the_post_thumbnail(); ?>
</div>
<?php endwhile; ?>
</div>
css
.food-featured-posts-first img {
width: 100%;
height:100%;
}
.food-featured-posts-second img {
width: 100%;
height:100%;
}
.food-featured-posts-first {
width: 50%;
}
.food-featured-posts-second {
width: 50%;
}
.food-featured-posts {
display: flex;
margin-bottom: 200px;
}
Am developing a WordPress site using the underscores theme and I just added a widget with contact info to my site with the following code:
<div class="topheader">
<div class="info">
<?php if( is_active_sidebar( 'info' ) ) : ?>
<?php dynamic_sidebar( 'info' ); ?>
<?php endif; ?>
</div>
</div>
CSS:
.topheader {
background-color:#e6e6e6;
}
.info {
max-width: 1280px;
}
The info is the first thing that I on the page. But I see that there is a space at the top and at the bottom where my slider is located.
How can I eliminate the existing margin that I see before and after the heading?
Cause at the moment I gap, then the widget, and after the widget there is another gap and only then the slider.
I am tried to setting the header margin to 0px, but it didn't really work.
Here a screenshot
How can I eliminate the existing margin that I see before and after the heading?
By heading do you mean an H3 tag by any chance? These are default in sidebars. You should just set margin-top:0 on the H3 tags in your sidebars, to get rid of any margin pushing your sidebar down.
To counter act this, I would then add some margin-bottom to the widget block to space them out a bit.
I think that's what you mean.. but it's hard to understand without any visual representation of what your problem is.
You have to set the start values in css like this:
body, html {
margin: 0;
padding: 0;
}
Otherwise please copy the whole Code of the page here. Open it in your browser, open the site Code and copy all.
Just inspect the element and test whats causing the margin. You can try this code. This might help. But not sure because your question is not clear enough to know your code.
*{
margin: 0;
padding: 0;
}
.top-header, .info {
margin: 0;
padding: 0;
}
I have two half width divs that have the same class but are assigned posts through WordPress. Currently I have them lined up with full width posts above and below, but, I need to apply 5px of padding to both but not on the edges, i.e. left post has right padding, right post has left padding and I can't think for the life of me how to do this. I tried using different post formats and checking which format the post was and applying padding based on that but it didn't work as intended. For some reason, it pushed the divs to the center and had padding in the wrong places. Firstly here's my PHP structure with the if/else:
<?php if (has_post_format('status')) : ?>
<div class = "twocolumnpost left">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php elseif (has_post_format('gallery')) : ?>
<div class = "twocolumnpost right">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
As you can see it has padding on both the left and right sides (it should line up with the post above) and not enough in the middle. The CSS I used for this is:
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
padding: 10px 0px;
}
.twocolumnpost.left {
padding-right: 0px;
}
.twocolumnpost.right {
padding-left: 0px;
}
.twocolumnpost img, .twocolumnpost iframe {
max-width: 440px;
max-height: 294px;
width: 100%;
padding: 0;
}
Now what I'd like it to be like is this:
BUT with 10px of padding in the center of the two posts but NOT the sides i.e. 5px right on the left post, 5px left on the right post. The only difference with the second image is that the max-width of the pictures are set to 450px instead of 400px and obviously have no left or right padding.
No matter what I try it doesn't line up properly, and I'm at a loss. Any help would be greatly appreciated. Ideally this could be done without the need for two different post types so it applies correctly to any twocolumnpost but the structure as is works too. Thanks!
Live sit is here: http://suburbia.comoj.com/wordpress/
There are several ways of resolving this issue, but it depends on what kind of users (and browsers) do you want to support. If you don't mind using modern standards (therefore leaving some users on legacy browsers behind), you can use the the calc property:
.twocolumnpost {
width: calc(50% - 10px);
padding: 10px 0px;
}
.twocolumnpost.left {
float: left;
}
.twocolumnpost.right {
float: right;
}
p/s: You don't need to declare the display: block property when you set floats — that's the default behavior for floats anyway.
Even better, you can take advantage of CSS flexbox, but you need to set the parent of .twocolumnpost to have flex display. Let's say the parent has the class name of .twocolumnpost-parent:
.twocolumnpost-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.twocolumnpost .post {
width: calc(50% - 10px);
}
You can see the proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/DMy7r/
Update: On a related note, I have written a jQuery script to do the exact same, but with gallery images. Perhaps you can adapt it to your needs: Responsive Photosets. Not exactly relevant, but addresses the same issue that you are currently facing.
It could be just a white space issue.
You can either so something like have an html comment between your divs killing the whitespace or you can float the divs over. You might have to rework the containing elements to make sure the floats don't do crazy things. But floating the left and right columns (twocolumnpost) should have them flush against each other (unless there is padding/margin on them).
In short I think the gap is being created by the whitespace between the divs with the twocolumnpost class. If you float this two next to eachtoher or remove the whitespace you should be able to have them flush against each other.
I have a simple blog on wordpress http://heather.stevenspiel.com/ and I'm trying to make the header title to be a link to the homepage. I went into header.php and rewrote the script for that part, but still can't get a link to work.
This is what I re-wrote:
<h1>
My Spiel
<br/>
</h1>
I know that the href is being registered because of the css color change.
This is what the previous code was:
<h1>
<?php
if ($balloons_option['balloons_site-title_line1'] == '' && $balloons_option['balloons_site-title_line2'] == '') { ?>
This is a<br />
WordPress theme
<?php } else {
echo $balloons_option['balloons_site-title_line1']; ?><br />
<?php echo $balloons_option['balloons_site-title_line2'];
} ?>
</h1>
I originally tried putting the href outside the h1, but still no luck.
Is there some buried Wordpress setting that disables a clickable title? Or is there some javascript that I should be looking out for that is disabling it?
I should also note the css for the header contains a z-index. I read somewhere that it might be effected by that:
#header .content {
line-height: 18px;
margin: 0;
z-index: 4;
}
If the z-index is effecting it, why is that?
Change z-index property on line 37 of layout.css to
#header h1 {
position: relative;
z-index: 10; /* Was 2 */
}
Your .entry (z-index:4) div goes vertically from top to bottom covering your #header with a higher z-index than your h1 z-index (2). So your h1/Anchor wsa unclickable because it was "under" another div.
I'm very new to web development, I have a code like this :
<style type="text/css">
span {
background:red;
background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
}
</style>
<span>
Contents.
</span>
I get the output but the image is been placed over Contents text. I tried with :
background-position: 25px;
But that is making the image to disappear! But what I was looking for is :
Contents . . . . . . . . . . . . . my_image
(note that . in above is space)
Where I'm making the mistake?
Thanks in advance.
Remember that <span> is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px; to move your text to the right. Alternatively, you can move the new <div> to the right using left: 25px;. Remember that left will tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:
<style type="text/css">
div {
display:inline-block;
}
div.image {
background:red;
background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
left:25px;
}
</style>
<div class="box">
Contents.
<div class="image"></div>
</div>
If you don't need that your image is a background-image you can apply this:
CSS:
<style>
div#box{
width: 100%;
}
img#image {
float: right;
}
</style>
HTML :
<div id="box">
<span id="content">
Contents.
</span>
<img src="bkg.jpg" alt="Image not available">
</div>
I am also agree with #L0j1k that span is a inline level element. Why you are placing some content inside a span and then applying a background image in that span. Anyways please check the jsfiddle link
DEMO
http://jsfiddle.net/saorabhkr/BvMyg/
Inline:-
<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>