Change Home Pg Sidebar Width

Support Area Forums Responsive Visual Change Home Pg Sidebar Width

Viewing 13 posts - 1 through 13 (of 13 total)
URL to the page in question:
  • Author
    Posts
  • #10584
    Ashley Davis
    Participant

    I would like to make the sidebar on my homepage a bit wider to fit more of my text without having to scroll.
    Thanks!

    #10589
    Bill Robbins
    Moderator

    Ashley,

    Thank you for your business first of all. You can make it wider. Here’s how:

    1. Go to the Theme Options page and select the Styling tab.
    2. Scroll down to the Custom CSS box and paste this:
      
      #home-sidebar {
      	width: 420px;
      }
      
    3. Update your settings.

    That will change the width from 320 pixels to 420 pixels. If that doesn’t quite do the trick, you can change the 420 to find the right number for you.

    If you have any trouble let me know.

    Thanks again,
    Bill

    #10590
    Ashley Davis
    Participant

    I would also like to change the sidebar color on the “staff” page, and have each staff bio be static so it does not link to another page. What do I need to change?
    Thanks again!

    #10594
    Bill Robbins
    Moderator

    Ashley,

    You can do that. Also in the Custom CSS box paste this:

    
    li.staff-entry {
    	background-color: #000000;
    }
    

    That will set the background color to black. You can change the #000000 to another hex color code to pick a different color there. You can use one of the color selectors on that page to help you find one you like if you need help.


    To remove the links, we’ll have to do just a bit of editing. Go to the Appearance section and select Edit. From the list of files on your right, choose archive-staff.php and look for this spot:

    
    <h2 class="title"><a href="" rel="bookmark"><?php the_title(); ?></a></h2>
    

    and replace that with this:

    Save your changes and that should take out the link and leave the title.

    If you run into any trouble, let me know.

    Bill

    #10602
    Ashley Davis
    Participant

    Thanks Bill! The home page sidebar code worked great, as did the staff color. However, I’m still having trouble with the staff linking through, despite changing the code as stated above. Any ideas?

    http://www.journeytoohio.com

    Three more small things…
    1. Can I alternate background colors on the staff page, so every other person is over a different color?

    2. Can I change the Facebook and e-mail links to be icons within the staff sidebar?

    3. I have a website listed on a staff sidebar that I would like to be an active link. (It is currently just showing as text “www.ashleyfdavis.com”)

    Thank you for all of your help! I’m loving your “Responsive Visual” template!

    #10610
    Bill Robbins
    Moderator

    Ashley,

    You’re site looks great! Good work. Let’s see if we can get the rest of this going for you.

    1. Alternating backgrounds:

    You can do that. Paste this in your Custom CSS box:

    
    ul.staff-list li.staff-entry:nth-child(even) {
    	background-color: #000;
    }
    

    and change the background color you’d like to have for the even numbered ones. One important thing to note is this won’t work in Internet Explorer 8 (and I’m not 100% certain about 9 either). Everywhere else though that should do it.


    For your next two questions, the easiest option would probably be to combine them. In the Theme editor again, and select archive-staff.php. Look for this spot:

    
    <?php the_content_limit(400, "Read More"); ?>
    

    and replace it with this:

    and save your changes. That should let the link in your bio work. You can also now insert images into the content with links. You could use that to create icon links to your Facebook pages and any other networks too. That would also give you the freedom to pick the icon style too.

    If you need any help, just let me know.

    Thanks,
    Bill

    #10612
    Ashley Davis
    Participant

    Thank you so much Bill! Everything has worked wonderfully!

    The website is ALMOST exactly where I want it. I appreciate all of your help!

    Just a few more things,

    Any chance we can move my Staff about me sidebar on the left, so it alternates from the first?

    I’m having difficulty with the Staff photos still linking to pages which duplicate the copy. I’d like to delete that link entirely, so the staff page stands on its own.

    And finally (for now), I’m having difficulty making my blog post full width.

    Thanks again!!

    #10623
    Bill Robbins
    Moderator

    I knew I forgot something. In your archive-staff.php file find this line:

    
    <a href="&lt?php the_permalink(); ?>" rel="bookmark">&lt?php the_post_thumbnail( 'portrait-small' ); ?>&lt/a>
    

    and replace it with this:

    and save your changes. That will keep the individual images from having links.


    You can use this CSS snippet in your Custom CSS box to make the images alternate in your about page:

    
    ul.staff-list li.staff-entry:nth-child(even) img.wp-post-image {
    	float: right;
    	margin-right: 0;
    	margin-left: 15px;
    }
    

    To make your single posts full width, you can use this snippet:

    
    .single-post #content {
    	width: 920px;
    }
    
    .single-post #sidebar {
    	display: none;
    }
    

    If you also want to make the blog archive, full width, you could use this too:

    
    .blog #content,
    .archive #content {
    	width: 920px;
    }
    
    .blog #sidebar,
    .archive #sidebar {
    	display: none;
    }
    

    I hope things go well for you guys as you help plant in Cincinnati. We helped plant a church in Birmingham, AL almost five years ago now and it’s one best things we’ve ever been a part of.

    Let me know if you need any other help,
    Bill

    #10629
    Ashley Davis
    Participant

    Hey Bill,

    That’s Awesome to hear that you helped plant a church in AL! My husband and I are SO EXCITED about what God’s doing in Cincinnati! This is our first time joining a church plant, so it’s going to be quite the “journey”!

    Few more things popping up…

    I just added a second video to my “Why Cincinnati” page (http://www.journeytoohio.com/cincinnati/) but had to fake imbed it, with just a screenshot that links to the youtube page. I tried installing a youtube widget that said all you have to do is type the link on its own line after installing the widget to embed the video, but it didn’t work. Any help you could throw my way on embedding two videos on one page, with formatted text in between?

    And lastly, the blog post looks a lot better with the bigger image. Is there any way to extend the image to the very edge, so the white border disappears, while keeping the text buffered, like the video page?

    I appreciate all of your kind help and your speedy responses! Organized Themes will come highly recommended by me!

    #10630
    Bill Robbins
    Moderator

    It’s a great journey. We actually started out to plant a church ourselves and discovered another group God had called to do the same thing. We joined together and it’s been fantastic.

    You can actually paste in as many videos as you’d like to. There’s only room for one featured video at the top, but in the content area of a page/post you can have as many as you’d like. As a bonus, you don’t need a plugin to do that either. Just paste in the embed code to your video (you may want to do that in the text editor) or you can also just place the URL to the video on its own line and WordPress will grab it for you.

    You can also make the images span the full-width in your blog with this CSS snippet:

    
    @media only screen and (min-width: 1024px) {
    
    	img.size-full {
    		margin-left: -20px;
    		max-width: 960px;
    	}
    
    }
    
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    
    	img.size-full {
    		margin-left: -20px;
    		max-width: 750px;
    	}
    
    }
    

    See if that doesn’t help.

    #10635
    Ashley Davis
    Participant

    Yayy!! I LOVE the way the blog page looks now! I got the video embedded too. (I typed the link into the “visual” tab, rather than the “text” tab, which is why it wasn’t working). Thank you, thank you!

    But for some reason, all of a sudden, my facebook and e-mail links on the staff page are acting up. They’re both slammed to the left next to each other. No matter what I do to try to adjust them, they won’t budge off of that edge. Did something with the new blog spacing code mess them up??

    #10637
    Bill Robbins
    Moderator

    You know I think the full-width images weren’t quite specific enough. Try this instead:

    
    @media only screen and (min-width: 1024px) {
    
    	.blog #content img.size-full,
    	.archive #content img.size-full {
    		margin-left: -20px;
    		max-width: 960px;
    	}
    
    }
    
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    
    	.blog #content img.size-full,
    	.archive #content img.size-full {
    		margin-left: -20px;
    		max-width: 750px;
    	}
    
    }
    
    #10641
    Ashley Davis
    Participant

    Fixed! Bill, you are awesome!

    Can’t wait to tweak our content and officially launch the page on Monday!!!

    I’ll let you know if we run into any problems between now and then, but it’s looking exactly how I wanted it to!

    Thank you again! You are great to work with.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Change Home Pg Sidebar Width’ is closed to new replies.