When pulling the_content() in WordPress for a testimonial section, I tried adding quotes (fontawesome) before and after it, but they appear on top and below the content, rather than inline with it.
Here's the code:
<blockquote>
<i class="fa fa-quote-left quotes"></i>
<?php the_content(); ?>
<i class="fa fa-quote-right quotes"></i>
</blockquote>
Would anyone know how to concatenate them in order for them to appear inline with the content text?
Thank you all in advance.
Well you can achieve it by using CSS
HTML
<blockquote>
<div class="testimo-content">
<?php the_content(); ?>
</div>
</blockquote>
CSS
.testimo-content:before,
.testimo-content:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 0.6em;
vertical-align: super;
}
.testimo-content:before {
content: "\f10d";
margin-right: 5px;
}
.testimo-content:after {
content: "\f10e";
margin-left: 5px;
}
Related
How can I avoid line breaks in a div when I use a php funcion. My code is HTML is
<div class="toolbar">
<div style="float:left; ">
Profile <?php get_search_form(); ?>
</div>
</div>
and my code in css is
.toolbar {
background: #F2F2D7;
width: inherit;
font-family: "Palatino";
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
top: 0;
box-shadow: 0px 4px 9px 2px #888888;
z-index:2;
white-space: nowrap;
}
with that I obtain something like:
<p> Profile </p> <p> Buscador </p>
<p> and what I want is </p>
Profile Buscador
It depends on what get_search_form() is returning. If it is returning a string, then you may need to look at the applied styling for the containing div.
If it is returning an an HTML fragment (e.g., <span>your result</span>), you may need to adjust the results to not include any embbed div tags.
It sounds like your looking for the <span> tag. Its used to divide segments of HTML for styling.
Yes, as user197092 said, this is a php problem, and if it is a predifined function it could be hard to adjust the result to not include embbed div tags. I solved it using flex, my code is:
<div id="toolbar">
<div id="toolbar1">
Profile
</div>
<div id="toolbar2">
<?php echo get_search_form(); ?>
</div>
</div>
and for CSS
#toolbar {
display: flex;}
#toolbar1 {
flex: 1;}
#toolbar2 {
flex: 2;
margin-left: 10px; }
this worked for me
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here
I am very new to web development and PHP. May be this is simple question but searched a lot in Internet but couldn't find the solution.
I have this code in my CSS:
.categories .cat_sec {
float: left;
width: 232px;
height: 360px;
padding-top: 10px;
margin-right: 1px;
}
.categories .cat_sec h5 {
width: 232px;
color: #FFF;
padding: 10px 0px;
}
.categories .cat_sec .cats {
width: 232px;
height: 50px;
background-repeat: no-repeat;
padding-top: 259px;
}
.categories .cat_sec .cat1 {
background-image: url(../images/gold/bangles.gif);
}
And calling this CSS style in HTML by the following way:
<div class="cat_sec">
<h5> <?php echo $mCollections_array['SubCollectionName']; ?></h5>
<div class="cats cat1">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
</div>
I have to change the image dynamically from the server. But i couldn't get any idea about changing the image in this line of code <div class="cats cat1">. In this cat1 represents the image already defined.
How do I add the image dynamically in the above code?
You can use inner CSS:
<div class="cats" style="background-image:url('your/path/to/image');">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
Based on what you have said to me: You want to edit a CSS file with PHP
See this, this annddd this
You can also embed PHP into the CSS file to do these kinds of things for you.
working on answer now
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
Live site.
Ideally, between border-top and border-bottom, I'd like to have 3 portfolio thumbnails, a divider(.png), and 3 blog thumbnails. Below the far right of each section should be '...'(next.png).
Currently, there is a random border directly on top of "Recent Work" that shouldn't be there and the '...' button for 'Recent Blog' is below the border-bottom. What is causing this/how do I remedy?
Everything was fine before I switched out the HTML for php..
<?php if ($portfolio_query->have_posts()) : ?>
<div id="recent">
<div id="recent-work">
<p><span>Recent Work</span></p>
<?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></div>
</div><!-- end recent-work -->
<?php endif; ?>
<div class="divider">
<img src="<?php echo get_template_directory_uri(); ?>/img/divider.png" alt="Section divider" id="divider" />
</div><!-- end divider -->
<?php if ($blog_query->have_posts()) : ?>
<div id="recent">
<div id="recent-blog">
<p><span>Recent Blog</span></p>
<?php while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
<?php the_post_thumbnail( array(130,130) ); ?>
<?php endwhile; ?>
<div class="next"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></div>
</div><!-- end recent-blog -->
<?php endif; ?>
&
#recent {
border-top: 1px solid #202020;
padding-bottom: 40px;
padding-top: 40px;
}
#recent .divider {
display: block;
float: left;
margin-left: 20px;
padding-bottom: 20px;
}
#recent #recent-work {
display: block;
float: left;
position:relative;
}
#recent #recent-work p {
padding-bottom: 20px;
}
#recent #recent-work p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
#recent #recent-work a {
padding-bottom: 40px;
padding-right: 20px;
}
#recent #recent-blog {
display: block;
float: right;
position:relative;
}
#recent #recent-blog p {
padding-bottom: 20px;
}
#recent #recent-blog p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
padding-left: 20px;
text-transform: uppercase;
}
#recent #recent-blog a {
padding-bottom: 40px;
padding-left: 20px;
}
#recent .next {
position: absolute;
bottom: -40px;
right: 0px;
}
Try adding a closing </div> to close your first <div id="recent">
I think you are unintentionally nesting <div id="recent">....<div id="recent"> without closing either of them
You have use ids more than once and it's messing with your page. This will generate errors that search engines will use to rank you lowly. Check http://validator.w3.org/ to see for yourself.
Also you have id recent with a top border and you use the div several times. Try changing recent to a class and then change the "recent" div containing the two to a class without a border on the top.
Just post what the output looks like with the dynamic PHP and then the hard-coded HTML version, and compare them side by side. Whatever is different between them is the answer.