Modify the theme


#1

Hello,

I have just started using rtPanel for my blog www.shailwx.com. I have modified somethings in CSS to make it look better. But somehow I feel this is not the correct way. Though I have decided to use rtPanel as a theme for my blog, I would like to get the updates and everything automatically. I need to do following things

  1. Show "Home" link in top navigation
  2. Use the full width ( which I have done through CSS as of now, But I can see that there is a file named template-full-width.php)
  3. In individual posts, I want to show bigger images, from where the below tag is inserted -

Specially I want to remove the height and width

Thanks in advance


#2
  1. You can insert the Home link by using the custom nav menu that wordpress provides, Dashboard->Appearance->Menu

Create your own nav menu and you can even add external links there.

  1. For using the full width page, just make the content to use a class grid-12, <section id="content" role="main" class="rtp-grid-8 rtp-singular></code> and change it to <code><section id="content" role="main" class="rtp-grid-12 rtp-singular></code>   Also you'll have to uncomment this line (lib/rtp-custom-hooks-applied.php line 82): unregister_sidebar( 'sidebar-widgets' );</li> </ol>

#3
  1. Height and width are not set by default and the images, if larger takes the size of the container they are in.

#4

Hello Gagan,
Thanks for your reply. I have done the change number 1 as you said. Please look at my web site - www.shailwx.com

Can you please tell me in which file I need to make the change number 2 ?


#5

Hello Shailwx,

I am writing step by step solution to your problem, kindly try to implement it.

  1. Show “Home” link in top navigation

Solution:

  1. Go to dashboard, Find appearance menu at left hand side.
  2. In appearance menu there will be a sub-menu named as "menus" click on that.
  3. You will see a custom link metabox at left hand side, fill in the URL where you wish to redirect user on clicking "Home" link and fill label as "Home".
  4. Click Add to menu button and adjust the position by dragging.

That’s it. Your 1st problem will be solved :slight_smile:

  1. Use the full width ( which I have done through CSS as of now, But I can see that there is a file named template-full-width.php)

Solution:

  1. Create any page through your dashboard.
  2. Fill in the content in page.
  3. Find a metabox to the right named "Page Attribute", there will be a selectbox with title "Template" select the option in dropdown named as "Full width Template" and publish/update the page.

Note: There will be no sidebar to the right hand side in full-width template.

  1. In individual posts, I want to show bigger images, from where the below tag is inserted -

Solution:

Most probably when uploading image to post content you choose the dimension of image if you will select “full size” option image will all be in it’s original size.

 


#6

Hello Ankit,
If I am not wrong, over here. Full width means NO sidebars, but not full width of screen


#7

Yes, you are absoloutely right.

If you want to change layout to full screen then you have to do modifications in CSS.

Regards

-Ankit


#8

Ok , thanks. I did that.

Now how I can change my existing posts to use that full width template ? I can not see any Page attributes for the posts


#9

Hello Shailwx,

Here I am writing the code kindly make a file named as “single.php” (off course, without quotes). Copy and paste following code into respective file.

 

  
<?php  

/*  
 * To change this template, choose Tools | Templates  
 * and open the template in the editor.  
 */  
global $rtp_post_comments, $post;  
get_header(); ?>  
>  
    <?php rtp_hook_begin_content(); ?>  
      
    >  
          
          
            <?php rtp_hook_begin_post_title(); ?>  

            <?php $has_comments = ( ( get_comments_number() || @comments_open() ) && !is_attachment() && !rtp_is_bbPress() ) ? ' rtp-has-comments' : ''; ?>  

                    

<?php the_title(); ?>

<?php rtp_hook_end_post_title(); ?> <?php rtp_hook_post_meta( 'top' ); ?>
<?php rtp_hook_begin_post_content(); rtp_show_post_thumbnail(); the_content( __( 'Read More →', 'rtPanel' ) ); wp_link_pages( array( 'before' => '
' . __( 'Pages:', 'rtPanel' ), 'after' => '
', 'link_before' => '', 'link_after' => '' ) ); rtp_hook_end_post_content(); ?>
<?php rtp_hook_post_meta( 'bottom' ); ?> <?php rtp_hook_end_post(); ?> <?php /* Post Pagination */ rtp_hook_single_pagination(); // Comment Form rtp_hook_comments(); rtp_hook_end_content(); ?> <?php get_footer(); ?>

Hope this will solve your problem.

Regards
-Ankit


#10

And then what to do with that single.php file ? Sorry for my questions :slight_smile:


#11

Hello Shailwx,

Kindly paste following improved code in single.php

  
<?php  

/*  
 * To change this template, choose Tools | Templates  
 * and open the template in the editor.  
 */  
global $rtp_post_comments, $post;  

get_header(); ?>  
>  
    <?php rtp_hook_begin_content(); ?>  
      
    >  
          
          
            <?php rtp_hook_begin_post_title(); ?>  

            <?php $has_comments = ( ( get_comments_number() || @comments_open() ) && !is_attachment() && !rtp_is_bbPress() ) ? ' rtp-has-comments' : ''; ?>  

                    

<?php the_title(); ?>

<?php rtp_hook_end_post_title(); ?> <?php rtp_hook_post_meta( 'top' ); ?>
<?php rtp_hook_begin_post_content(); //rtp_show_post_thumbnail(get_the_ID(),'',''); if(has_post_thumbnail()){ the_post_thumbnail('large'); } ?>
<?php echo $post->post_content; ?>
<?php wp_link_pages( array( 'before' => '
' . __( 'Pages:', 'rtPanel' ), 'after' => '
', 'link_before' => '', 'link_after' => '' ) ); rtp_hook_end_post_content(); ?>
<?php rtp_hook_post_meta( 'bottom' ); ?> <?php rtp_hook_end_post(); ?> <?php /* Post Pagination */ rtp_hook_single_pagination(); // Comment Form rtp_hook_comments(); rtp_hook_end_content(); ?> <?php get_footer(); ?>

Also for your kind info you don’t have to do anything with single.php , It will do everything you want to in your way automatically :wink:

Regards
-Ankit


#12

Hello Ankit,
It worked like magic. Thank you so much for all your help.

Just one thing over here. If you see my web site http://www.shailwx.com/

It works fine in Chrome, but in Firefox the sidebar falls down. Can you please tell me why ?


#13

Hello shailwx,

I analysed your css, you have to do following changes according. Kindly replace the lines in your style.css with the style given below , I have also mentioned the line numbers.

  
Line Number 192  
.rtp-container-12 { clear: both; display: block; margin-left: auto; margin-right: auto; max-width: 90%; width: 100%; }  

Line Number 195-196  
.rtp-grid-1, .rtp-grid-2, .rtp-grid-3, .rtp-grid-4, .rtp-grid-5, .rtp-grid-6,  
.rtp-grid-7, .rtp-grid-8, .rtp-grid-9, .rtp-grid-10, .rtp-grid-11, .rtp-grid-12 { display:inline; float: left; position: relative; margin-left: 1%; margin-right: 1%; }  

Line Number 203-214  
.rtp-grid-1 { width:6.333%; }  
.rtp-grid-2 { width:14.667%; }  
.rtp-grid-3 { width:23.0%; }  
.rtp-grid-4 { width:31.333%; }  
.rtp-grid-5 { width:39.667%; }  
.rtp-grid-6 { width:48.0%; }  
.rtp-grid-7 { width:56.333%; }  
.rtp-grid-8 { width:64.667%; }  
.rtp-grid-9 { width:73.0%; }  
.rtp-grid-10 { width:81.333%; }  
.rtp-grid-11 { width:89.667%; }  
.rtp-grid-12 { width:98.0%; }  

#14

Thanks Ankit, that fixed the problem.

But after I uploaded single.php with your code, there is a strange behaviour I have observed. Look at the page -

http://www.shailwx.com/2012/07/sharepoint-2013-development-image-part-5-what-is-installed-after-installation/

In this page check for a heading “Databases in SQL Server”. I have press enter both before and after, but in resulting HTML there is no break. Where I can fix this ? I want to have a line break when I press enter in the editor


#15

And also somehow , now the posts are not showing Facebook plugin, which I was using before. if I delete the single.php file. It comes back.


#16

Hello,

Kindly replace the code in single.php to the one given below.

 

  
<?php  
global $rtp_post_comments, $post;  
get_header();  
if ( have_posts() ) {  
    while( have_posts() ) {  
        the_post(); ?>  
>  
    <?php rtp_hook_begin_content(); ?>      
    >  
          
            <?php rtp_hook_begin_post_title(); ?>  
            <?php $has_comments = ( ( get_comments_number() || @comments_open() ) && !is_attachment() && !rtp_is_bbPress() ) ? ' rtp-has-comments' : ''; ?>  
                    

<?php the_title(); ?>

<?php rtp_hook_end_post_title(); ?> <?php rtp_hook_post_meta( 'top' ); ?>
<?php rtp_hook_begin_post_content(); //rtp_show_post_thumbnail(get_the_ID(),'',''); if(has_post_thumbnail()){ the_post_thumbnail('large'); } ?>
<?php //echo nl2br($post->post_content); ?>
<?php the_content(); wp_link_pages( array( 'before' => '
' . __( 'Pages:', 'rtPanel' ), 'after' => '
', 'link_before' => '', 'link_after' => '' ) ); rtp_hook_end_post_content(); ?>
<?php rtp_hook_post_meta( 'bottom' ); ?> <?php rtp_hook_end_post(); ?> <?php /* Post Pagination */ rtp_hook_single_pagination(); // Comment Form rtp_hook_comments(); } } rtp_hook_end_content(); ?> <?php get_footer(); ?>

#17

Thanks Ankit :slight_smile:

That worked perfect and I am all set for now


#18

All the best ! :wink:


#19

I feel incredibly lazy asking this, but do you sell a full width of screen CSS? If not, can you help speed up the process for me by telling me which lines of the RTdating unminified style.css would need to be addressed?


#20

I found the answer to this by simply deleting max-width on the body.

But now I am trying to make the masonry grid of rtMedia images have no space between them. I am bought two themes rtDating and rtSocial. I noticed that rtSocial has them closer. Is there an easy CSS way to have them all next to eachother with no padding between them and go from one side of the screen to the other?