Change 3 featured post items to fixed items
-
I want to change the three boxes that are under the imageslider on my homepage. Now there are showing the three latest post, but I want them to show my own text and link to a page, so just a regular text box. Can anyone tell me where i can change the code to make this happen?
Thnx!
-
Nobody have a idea how I can link the three boxes under the slider to an excisting page?
that depends on the theme you are using.
a general start would be to look into index.php, and look for the first loop probably with the word ‘featured’ somewhere in the code.
anything more is pure speculation.theme?
link?Thanks for your reply. Sorry I forgot, the theme I used is Fancy Theme and the link:
https://87.233.179.106/~gelukbv/geluk-bv.com/
The code for index.php, the boxes are called products_highlight
<?php get_header(); ?> <?php if ( get_option('fancytheme_bc_home') == '1' ) { include ('breadcrumbs.php'); } ?> <?php if (is_home()) { include ('head_highlight.php'); include ('products_highlight.php'); } include ('sidebar_home.php'); ?> <div id="main-content"> <div class="padd20"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post-item clearfix"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php if ( get_post_meta($post->ID,'thumb', true) ) { $thumbwidth = get_option('fancytheme_thumb_width'); // thumbnail width $thumbheight = get_option('fancytheme_thumb_height'); // thumbnail height if ( $thumbwidth && $thumbheight ) { ?> <a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=<?php echo $thumbheight ?>&w=<?php echo $thumbwidth ?>&zc=1&q=80" alt="<?php the_title(); ?>" /></a> <?php } } ?> <h3>Posted on <?php the_time('l, F jS, Y') ?></h3> <?php the_excerpt(); ?> <a class="detail" href="<?php the_permalink() ?>">lees verder</a> </div><!-- end post-item --> <?php endwhile; ?> <?php if (show_posts_nav()) : ?> <div id="post-navigation" class="clearfix"> <span class="previous"><?php next_posts_link('Older Entries') ?></span> <span class="next"><?php previous_posts_link('Newer Entries') ?></span> </div> <?php endif; ?> <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php endif; ?> </div><!-- padd20 --> </div><!-- main-content --> <?php get_footer(); ?>
And the code for products_highlight:
<div id="products-highlight" class="clearfix"> <?php global $post; $postcount = 0; $args = array( 'numberposts' => 3, 'cat' => get_cat_id( get_option('fancytheme_featured_category') ), // featured category ); $myposts = get_posts($args); foreach($myposts as $post) : $postcount ++; ?> <div class="product<?php if ( $postcount == 3 ) echo ' last'; ?>"> <div class="padd15"> <h3><a href="<?php the_permalink(); ?>"><?php echo ShortenText( get_the_title(), 25 ); ?></a></h3> <?php if ( get_post_meta($post->ID,'thumb', true) ) { ?> <a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=80&w=80&zc=1&q=80" alt="<?php the_title(); ?>" /></a> <?php } ?> <p><?php echo ShortenText( $post->post_content, 130 ); ?></p> <a class="detail" href="<?php the_permalink(); ?>">lees meer</a> <?php edit_post_link('Edit', '<p>', '</p>'); ?> </div><!-- end padd10 --> </div><!-- end product --> <?php endforeach; ?> </div><!-- end product-highlight -->
first option:
edit products_highlight.php to show only one post of a special category, which you can set in the admin section as before:
basically change the digit from 3 to 1 in –
‘numberposts’ => 1,
– and –
if( $postcount == 1)
and you may need to change the 130 in –
ShortenText( $post->post_content, 130 );
to show your full text.also, in style.css – edit the width :
#products-highlight .product { width: 908px; height: 180px; float: left; margin-right: 11px; background-color: #fff; border: 1px solid #aaa; }
end of first option
other option:
write and edit your text directly with html in products_highlight.php.
delete most of the code in products_highlight.php:<div id="products-highlight" class="clearfix"> <div class="product last"> <div class="padd15"> <h3><a href="link_to_title">Title text </a></h3> <p> some text of your front page block </p> <p> another paragraph text with a link to <a href="link_to_something">something</a> on your front page block. </p> </div><!-- end padd15 --> </div><!-- end product --> </div><!-- end products-highlight -->
same change to style.css as above.
Thank you very much!! I took your advise and edited the text in products_highlight.php but you say same change to style.css but I think its not necessary because everything works fine, but maybe I’m wrong. For the safety can you take a look to my style.css, another question now I have one box, I need three boxes (I tested it on another server: https://www.sillie.nl as you can see) how can I make three boxes? By copying the code you give me?
/* Theme Name: Fancy Theme Theme URI: https://www.mipdesign.com/ Description: Theme designed and developed by <a href="https://www.mip-design.com/">Mip Design Studio</a>. Version: 4.2 Author: Mip Design Studio */ /* Base ------------------------------------------------------*/ * { margin: 0px; padding: 0px; } body { background-color: #2f3535; font: normal 0.75em/145% Arial, Tahoma, sans-serif; color: #2f3535; text-align: center; padding: 20px 0 20px 0; } p { margin: 0px 0px 10px 0px; line-height: 140%; color: #454545; } a { color: #404d6c; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } .hide { display: none; } img { border: 0px; } .left { float: left; } .right { float: right; } .padd5 { padding: 5px; } .padd10 { padding: 10px; } .padd15 { padding: 15px; } .padd20 { padding: 20px; } /* Clearing method ------------------------------------------------------*/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .clear { clear: both; } /* Layout ------------------------------------------------------*/ #page-container { width: 980px; margin: 0px auto; padding: 15px 0 15px 0; text-align: left; background-color: #424747; } #page-wrapper { margin: 0 15px 0 15px; background-color: #e7e7e7; } #page-header { height: 108px; background: #b6ca46 url("images/bg_header.gif") repeat-x 0% 0%; } #page-navigation { height: 40px; background-color: #424747; padding-left: 20px; } #page-content-container { padding: 20px; } #page-content-container .box { border: 1px solid #aaa; background-color: #fff; } #sidebar { width: 294px; float: right; } #main-content { width: 601px; float: left; background-color: #fff; border: 1px solid #aaa; } #page-footer { background-color: #2f3535; padding: 15px 20px 15px 20px; border-bottom: 5px solid #9cb032; } /* Page header ------------------------------------------------------*/ #page-header h1 { font: normal 3.2em Georgis, Times, serif; color: #fff; width: 270px; text-align: center; margin: -45px 0 0 20px; padding-right: 12px; position: absolute; background: url("images/bg_logo_right.png") no-repeat 100% 100%; } #page-header h1 em { display: block; padding: 45px 0 25px 12px; color: #fff; text-decoration: none; background: url("images/bg_logo_left.png") no-repeat 0% 100%; } #page-header h1 span { display: block; font: normal 0.4em Arial, Tahoma, sans-serif; color: #cecece; } #page-header img { float: right; border: 2px solid #696969; margin: 20px 20px 0 0; } /* Page navigation ------------------------------------------------------*/ #nav, #nav ul{ z-index:999; list-style-type:none; list-style-position:outside; position:relative; } #nav a{ display:block; float:none; font: bold 1.0em Arial, Tahoma, sans-serif; color: #fff; text-decoration: none;padding: 12px 15px 13px 15px; } #nav a:hover{ background: url("images/bg_nav_hover.gif") repeat-x 0% 0%; } #nav li{ float:left; position:relative; } #nav li:hover{ background: url("images/bg_nav_hover.gif") repeat-x 0% 0%; } /* first dropdown */ #nav ul { position:absolute; top:3.3em; z-index:999; margin: 0; padding: 0; background-color: #7a7d7d; } #page-navigation #nav li ul li{ float: left; clear: both; height: auto; padding: 0; margin: 0; } #page-navigation #nav li li:hover{ background-color: #9cb032; } /* drop links */ #page-navigation #nav li ul a { width:15em; height:auto; z-index:999; border: none; padding: 7px 5px 7px 15px; } #page-navigation #nav li ul a:hover { background: none; background-color: #9cb032; } #nav ul ul{ top:auto; z-index:999; } #nav li.current_page_item a { background: url("images/bg_nav_active.gif") no-repeat 50% 100%; padding: 14px 15px 18px 15px; border-left: 1px solid #ece9e2; border-right: 1px solid #ece9e2; } #nav li.current_page_item li a { background: none; background-color: #7a7d7d; } /* second level dropdown */ #nav li ul ul { left:16.6em; margin:-2.4em 0 0 0; z-index:99; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; z-index:99; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; z-index:99; } /* Highlight - Main ------------------------------------------------------*/ #head-highlight { padding: 10px; margin-bottom: 11px; font: normal 1.2em/150% Arial, Tahoma, sans-serif; color: #dedfdf; } #head-highlight .head-highlight-inner { background-color: #424747; } #head-highlight .head-highlight-content { width: 255px; float: right; margin: 20px 20px 0 0; } #head-highlight img.head { display: block; float: left; border-right: 1px solid #fff; } #head-highlight h2 { font: normal 1.3em/140% Arial, Tahoma, sans-serif; color: #fff; margin-bottom: 10px; } #head-highlight h2 a { color: #fff; } #head-highlight p { color: #dedfdf; } #head-highlight a.detail { display: block; font: bold 0.8em/140% Arial, Tahoma, sans-serif; color: #fff; t.ext-decoration: none; margin-bottom: 5px; background: url("images/bullet_1.gif") no-repeat 0% 65%; padding-left: 12px; } /* Highlight - Featured ------------------------------------------------------*/ #products-highlight { margin-bottom: 11px; } #products-highlight .product { width: 294px; height: 180px; float: left; margin-right: 11px; background-color: #fff; border: 1px solid #aaa; } #products-highlight .last { margin-right: 0px; } #sidebar #products-highlight .last { margin-bottom: 11px; } #products-highlight h3 { font: bold 1.3em Arial, Tahoma, sans-serif; color: #454545; text-transform: uppercase; margin: 0px 0 8px 0; padding-bottom: 3px; border-bottom: 1px dotted #454545; } #products-highlight h3 a { color: #454545; text-decoration: none; } #products-highlight h3 a:hover { color: #9cb032; } #products-highlight a.detail { font-weight: bold; color: #343434; background: url("images/bullet_1.gif") no-repeat 0% 60%; padding-left: 12px; } #products-highlight img { float: right; margin: 0 0 3px 10px; border: 1px solid #ccc; background-color: #eee; padding: 5px; } /* Main content ------------------------------------------------------*/ #main-content.wide { width: auto; float: none; padding: 10px; } #main-content h2 { font: normal 1.7em Arial, Tahoma, sans-serif; color: #454545; margin: 0 0 15px 0; padding-bottom: 5px; border-bottom: 1px dotted #454545; } #main-content h3 { font: bold 1.2em Arial, Tahoma, sans-serif; color: #454545; text-transform: uppercase; margin: 20px 0 10px 0; } #main-content h4 { font: normal 1.4em/130% Arial, Tahoma, sans-serif; color: #9cb032; margin: 20px 0px 10px 0px; } #main-content h2#comments { padding: 20px 0 10px 20px; margin: 20px -21px 0 -21px; background-color: #e7e7e7; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } #main-content h2 span { color: #9cb032; } #main-content h3.posted { font: normal 1.0em/140% Arial, Tahoma, sans-serif; color: #666; margin: -10px 0px 20px 0px; text-transform: none; } #main-content a { color: #9cb032; } #main-content img { border: 1px solid #ccc; background-color: #eee; margin: 0px 0px 10px 0px; padding: 5px; } #main-content ul { margin: 0 0 10px 0; padding-left: 16px; list-style-type: square; } /* Page content - images ------------------------------------------------------*/ #main-content .alignleft { float: left; margin: 3px 15px 10px 0px; } #main-content .alignright { float: right; margin: 3px 0px 10px 15px; } #main-content #slideshow-gallery { margin: 0 -20px 20px -20px; padding: 10px; background-color: #f3f3f3; text-align: center; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } #main-content #slideshow-gallery img { padding: 0; margin: 0; border: none; width: 581px; } #main-content #slideshow-gallery ul { list-style: none; margin: 0; padding: 0; } #main-content #slideshow-gallery ul li { float: left; margin: 0; padding: 15px 5px 5px 10px; background: none; } #main-content #slideshow-gallery ul li a { width: 14px; height: 14px; display: block; text-indent: -9999px; background-color: #fff; border: 1px solid #424747; } #main-content #slideshow-gallery ul li a:hover { background-color: #424747; } #main-content #slideshow-gallery ul li.current a { background-color: #9cb032; border: 1px solid #9cb032; } /* Page content - topics ------------------------------------------------------*/ #main-content .post-item { margin: 0px 0px 20px 0px; } #main-content .post-item h2 { margin-bottom: 10px; } #main-content .post-item h2 a { color: #444; text-decoration: none; } #main-content .post-item h2 a:hover { color: #9cb032; } #main-content .post-item h3 { font: bold 1.0em Arial, Tahoma, sans-serif; color: #787878; margin: 0px 0px 7px 0px; text-transform: none; } #main-content .post-item img { float: left; margin: 3px 15px 3px 0px; } #main-content .post-item a.detail { font: bold 1.1em Arial, tahoma, sans-serif; background: url("images/bullet_1.gif") no-repeat 0% 65%; color: #454545; padding-left: 10px; } #main-content .post-item a.detail:hover { color: #9cb032; text-decoration: none; } #post-navigation { margin: 50px 0px 0px 0px; padding: 8px; background-color: #eee; } #post-navigation a { display: block; float: left; font: bold 0.9em Arial, Tahoma, sans-serif; color: #444; text-decoration: none; text-transform: uppercase; } #post-navigation .next a { float: right; } #post-navigation a:hover { color: #9cb032; } #post-indexing { margin: 50px 0px 0px 0px; padding: 8px; background-color: #eee; } /* Page content - main-post-image ------------------------------------------------------*/ #main-post-image-container { width: 601px; float: left; margin-bottom: 11px; } #main-post-image-container .main-post-image-inner { background-color: #424747; margin: 10px; } #main-post-image-container .main-post-image-inner h3 { font: bold 1.0em/150% Arial, Tahoma, sans-serif; color: #ccc; padding: 8px 0 8px 12px; border-top: 1px solid #fff; } #main-post-image-container .main-post-image-inner h3 span { display: block; float: left; font: bold 0.9em Arial, Tahoma, sans-serif; color: #fff; margin: -8px 15px -8px -12px; padding: 10px 14px 15px 14px; background: #fff url("images/bg_nav_active.gif") no-repeat 50% 100%; border-right: 1px solid #fff; } #main-post-image-container .main-post-image-inner h3 span a { color: #fff; display: block; } #main-post-image-container .main-post-image-inner img { display: block; border: none; } /* Page content - portfolio items ------------------------------------------------------*/ #portfolio-list { margin: 30px 0 0 0; } #portfolio-list .portfolio-item { width: 274px; float: left; margin: 0 10px 10px 0; } #portfolio-list .last { float: right; margin-right: 0; } #portfolio-list .inner { margin: 10px; background-color: #424747; } #portfolio-list .inner img { width: 254px; display: block; margin: 0 0 10px 0; padding: 0px; border: none; border-bottom: 1px solid #fff; } #portfolio-list .inner h3 { font: bold 1.1em/140% Arial, Tahoma, sans-serif; color: #fff; margin: 0; padding: 0 10px 5px 10px; } #portfolio-list .inner h3 a { color: #fff; } #portfolio-list .inner p { font: normal 1.0em/130% Arial, Tahoma, sans-serif; color: #dedfdf; padding: 0 10px 10px 10px; } /* Page content - breadcrumbs ------------------------------------------------------*/ #breadcrumbs { background: url("images/bg_crumbtrail.gif") repeat-x 0% 0%; position: relative; margin: -20px -20px 20px -20px; padding: 10px 20px 10px 21px; border-bottom: 1px solid #aaa; } #breadcrumbs a { color: #454545; } /* Page content - comments ------------------------------------------------------*/ #main-content .comments_no span { color: #9cb032; } #main-content .commentlist { margin: 25px 0px 0px 0px; padding: 0px; list-style: none; } #main-content .commentlist li { width: 100%; margin: 0; padding: 0; } #main-content .commentlist li .comment-body { padding: 10px 10px 10px 100px; min-height: 85px; background-color: #fff; border-bottom: 1px solid #ccc; } .commentlist code { font-size: 1.3em; line-height: 120%; } #main-content .commentlist .wp-smiley { border: none; padding: 0px; background: none; } #main-content .commentlist li.comment-author-admin .comment-body, #main-content .commentlist li.comment-author-admin .children .comment-author-admin .comment-body { background-color: #eee; padding-left: 110px; } #main-content .commentlist li.comment-author-admin .comment .comment-body { background-color: #fff; xpadding-left: 100px; } #main-content .commentlist .comment-author cite, #main-content .commentlist .comment-author cite a { font-style: normal; font-weight: bold; color: #343434; } #main-content .commentlist .comment-author img { width: 70px; height: 70px; position: absolute; margin-left: -100px; } #main-content .commentlist .comment-author-admin img { background-color: #fff; } #main-content .commentlist li.comment ul.children { margin: 0; padding: 0; } #main-content .commentlist li.comment ul.children { padding-left: 16px; background: url("images/icn_reply_comment.gif") no-repeat 0% 0%; } #main-content .cancel-comment-reply { display: block; margin: -5px 0 10px 0;; } #main-content .commentlist li #post-comment { border-bottom: 1px solid #343434; margin-bottom: 10px; } /* Page content - comment forms ------------------------------------------------------*/ #post-comment { border-top: 1px solid #343434; background-color: #f6f6f6; padding: 20px; } #main-content #post-comment input, #main-content #post-comment textarea { background-color: #fff; } #main-content label { display: block; font: bold 1.0em/120% Arial, tahoma, sans-serif; color: #343434; float: left; width: 180px; margin: 5px 0px 10px 0px; } #main-content input, #main-content textarea { float: left; width: 290px; background-color: #fff; border: 1px solid #aaa; font: normal 1.1em/120% Arial, tahoma, sans-serif; color: #343434; margin: 0px 0px 10px 0px; padding: 4px; } #main-content textarea { width: 350px; height: 150px; } #main-content .comment { display: block; float: none; margin: 0px 0px 5px 0px; width: 470px; } #main-content label.comment { margin-top: 10px; } #main-content input.submit { display: block; float: left; width: 150px; background-color: #fff; border: 1px solid #aaa; font: normal 1.2em/120% Georgia, Times, serif; color: #454545; margin: 10px 0px 10px 0px; padding: 5px; } #main-content input.submit:hover { color: #9cb032; } #main-content input:focus, #content-main textarea:focus { border: 1px solid #45371b; } /* Page content - comment form 7 plugin ------------------------------------------------------*/ #content-main .wpcf7 { margin-top: 50px; } #content-main .wpcf7 textarea { width: 470px; } /* Page products ------------------------------------------------------*/ #products-view .product-item { border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px; } #products-view .product-item .product-image { width: 100px; float: left; margin-right: 20px; } #product-detail #image-tab { width: 250px; float: right; padding: 10px 0 10px 0; margin: 15px 0 15px 0; border: 1px solid #aaa; text-align: center; } #product-detail #desc-tab { width: 250px; padding-top: 20px; float: left; } #product-detail #variant-add ul { margin-top: 30px; padding-left: 0px; list-style: none; } #product-detail #variant-add li { margin-bottom: 5px; } #product-detail #variant-add input.submit { font: bold 1.1em Arial, Tahoma, sans-serif; color: #fff; margin-top: 15px; padding: 6px 15px 6px 15px; border: none; background-color: #444; cursor: pointer; } #product-detail #variant-add input:hover { background-color: #9cb032; } /* Page sidebar ------------------------------------------------------*/ #sidebar .side-links { border: 1px solid #aaa; background-color: #fff; list-style: none; padding: 15px 15px 20px 15px; margin-bottom: 11px; } #sidebar .side-links ul { list-style: none; } #sidebar .side-links li li { padding: 5px 5px 5px 20px; border-bottom: 1px dotted #aaa; background: url("images/bullet_1.gif") no-repeat 4px 11px; } #sidebar .side-links li.current { margin: 0 -15px 0 -15px; padding: 5px 20px 5px 34px; background: #eee url("images/bullet_1.gif") no-repeat 19px 11px; } #sidebar .side-links li a { font: bold 1.0em Arial, Tahoma, sans-serif; color: #444; } #sidebar .side-links h3, #sidebar .side-links label { font: bold 1.2em Arial, Tahoma, sans-serif; color: #fff; text-transform: uppercase; display: block; border: none; background: url("images/bg_nav_active.gif") no-repeat 50% 100%; padding: 12px 15px 16px 15px; margin-bottom: 8px; } #sidebar .side-links li.search { border: none; padding: 5px 0 0 0; } #sidebar .side-links li input { font: bold 1.4em Arial, Tahoma, sans-serif; color: #454545; width: 180px; float: left; padding: 2px; } #sidebar .side-links li #searchsubmit { font: bold 1.1em Arial, Tahoma, sans-serif; color: #fff; width: 70px; float: right; border: none; padding: 5px 0 5px 0; background-color: #444; } #sidebar .side-links li img { width: 70px; height: 70px; display: block; float: left; margin: 5px 5px 0 0; border: 1px solid #ccc; background-color: #eee; padding: 5px; } #sidebar .side-links li a:hover img { border: 1px solid #9cb032; background-color: #fff; } #sidebar .banner { border: 1px solid #aaa; background-color: #fff; padding: 22px; margin-bottom: 11px; } /* Sidebar banners ------------------------------------------------------*/ #sidebar #banners { border: 1px solid #aaa; background-color: #fff; padding: 3px 15px 15px 15px; margin-bottom: 11px; } #sidebar #banners img { display: block; float: left; margin: 12px 12px 0 0; } #sidebar #banners img.alternate { margin-right: 0; } /* Page footer ------------------------------------------------------*/ #page-footer ul { list-style: none; border-bottom: 1px solid #424747; padding-bottom: 5px; margin-bottom: 15px; } #page-footer li { float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #424747; } #page-footer p { color: #888; text-align: right; margin: 0px; } #page-footer a { color: #9cb032; text-decoration: none; } #page-footer a:hover { text-decoration: underline; } #page-footer li.current_page_item a { color: #fff; text-decoration: none; }
Ok I copied the code I got from you but know the second box is under the first box…
i can see the two boxes stacked up.
in the code for both boxes, delete the word ‘last’ in this line:
<div class="product last">
only if you copy a third box into your file, the word ‘last’ should be in this line.
(as the word says, it is meant as an extra class for the last box in the row)
i hope i worded it understandably.edit:
also, in box 1 and box 2
deleteclass="clearfix"
from following line:<div id="products-highlight" class="clearfix">
for box 3, leave it as it is.
edit 2:
no need to edit the style.css.btw: no need to post the style.css code here, with a link to your site it is very easy to get from the browser ??
Super, it works thank you very much for your time!!!
Only one little question is it possible to show the link in the box as the same as other links in the website, with the yellow element before the link en the link is bold en black, you understand?
also solved, I’m beginning to learn this!!!
- The topic ‘Change 3 featured post items to fixed items’ is closed to new replies.