Rounded Borders and Fixed Backgrounds

[Adam Chetty]

Hi Bill,

I have been reading through other users posts for idea’s on how to add some shine to my site. (http://testsite.noflockingbirds.com/)

I used the Custom CSS here:

Rounded borders on page-wrap

To give my pages a nice rounded effect – which looks wonderful!

Few things you may be able to help with:

– On the home page and gallery page, the darker overlay areas don’t seem to abide by the “rounded edge” CSS Code. Is this fixable, (or am I being a picky little bugger)?

– On the Staff page, there is a gap between the main menu and the first Staff member. Is it possible to close that gap?

and another question…

The Background Image – How can I get it to stay at the bottom of the page always. For example if you go to the Home page it looks fine – But if you venture to the testimonials page, The “cut off” of the background doesn’t look too flash.

Thanks Bill,

Adam

p.s I’m not sure if you prefer we users post a couple of issues/questions in one chunky post – or if we several posts for each issue/question? I appreciate your support greatly and want to help being less of a pain 🙂

Attachments:

1. 

   snap1.jpg
   

2. 

   Snap2.jpg
   

3. 

   Sanp3.jpg
   

[Bill Robbins]

Good Morning Adam,

Great questions. I think we can take care of most of those. Here’s what to do:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .front {
        overflow: hidden;
   }
   
   #home-sidebar {
        -webkit-border-radius: 0 0 20px 0;
        border-radius: 0 0 20px 0;
   }
   
   html body {
        background-position: 0 bottom;
        background-attachment: fixed;
   }
   
   ul.staff-list {
        padding-top: 30px;
   }
   

3. Update your settings.

Here's what these styles do. The top one sets the main wrapper of the home page so that any overflow is hidden. That can help catch some images that protrude beyond rounded corners. You may have to switch the slideshow to fade instead of slide to keep any ghosting of corners there.

The second style adds a border radius to the bottom right corner of the home page sidebar so that it will be rounded too.

The third style sets the background position so that it's fixed on the bottom of the screen. Your content will scroll on top of it.

The last one takes out the padding at the top of the staff list so that it's flush agains the bottom of the navigation bar.

I hope that helps out. If you have any questions, just let me know. If it's just a few questions, it's no problem to place them together. I tend to answer questions in order from the quickest to answer to the longest so there can be a bit of an advantage in separating them if it happens to be a busy support day.

Thanks and enjoy your weekend,
Bill

[Adam Chetty]

Hi Bill,

Thanks for that, everything did the trick! Also thank you for your explanation of each item, this way I will learn it so I don’t need to ask again. One thing that did go a bit funky (more fyi than anything) is adding items to the menu works fine and show up – however the sub menu stopped dropping down and listing sub pages, again not a biggie.. but it happened after adding the string of code previously mentioned.

I have another couple of questions however, should be fairly easy:

-I need to change the nav menu to plain non-transparent black (as per snapshot)

-I need to change the Heading background of the area in the left side with text to the orange colour and make the site tagline and footer copyright bolder.

-In the gallery, is it possible to change the images so they don’t just open in their own page but in a small pop up window or just make them not click-able at all? or when you click an item it shows it in the big preview area?

Thanks again, hope you had a good weekend.

Adam

http://testsite.noflockingbirds.com/

p.s I did try doing the nav menu colour change myself googling and using the below code but it didn’t do anything.
.nav-menu {
background: #000000;
}

Attachments:

1. 

   snap1.png
   

[Bill Robbins]

Good Morning Adam. Let’s see if we can find answers for you. If you’ll add this snippet to the Custom CSS box that’s in your Theme Options page, it should make the navigation bar black, change the color of the widget titles to orange and also make the footer and tagline bold.

#nav-bar {
     background-color: #000;
}

h3.widget-title {
     background-color: rgb(254, 101, 0);
}

#tagline p,
#tagline h2,
.footer-left p {
     font-weight: bold;
}

In looking at your navigation menu’s code, it doesn’t look like there are any sub-menus added at the moment. You might double check and make sure they are still listed that way in the navigation menu that’s assigned to the theme’s menu location.

Have a great week and let me know if you need anything else,
Bill

[Adam Chetty]

Excellent, thanks again Bill! 🙂

[Author]

Posts