Jump to content
clearpathnet

Banner section Border + Photo center

Recommended Posts

clearpathnet

Hey Guys!

 

Two small questions:

 

#1 Question. I'm trying to add a minor boarder to the Banners Sections of my site... but cant quite figure it out. I took the code below (that I am using for boxes) and I cant seem to get it to apply to each, separate banner. My pages have banners stacked to show off Product features. I'd like each banner to have its own board.

 

the code I am trying to adapt:

 

.fbox {
  padding:5px;
  background:@baseLighterMore;
  border:1px solid @baseLighterMost;
  border-bottom: 5px solid @baseContrastMore;
  border-left: 1px solid @baseContrastMore;
  border-right: 1px solid @baseContrastMore;
  border-top: 1px solid @baseContrastMore;
  .box-shadow(0px 1px 6px 1px rgba(211, 211, 211, 0.3));
  .border-radius(5px);
}
 
 
#2 Question: The photo in each banner. I have each photo/image taking up about 40% of the banner. How do it center this image both vertically and horizontally? Right now it seems to be auto fixing itself to the top/right.
 
Thanks!
 
 

Share this post


Link to post
Share on other sites
James B

Hi there

 

If you're editing the above code you'll need to edit the class to affect the banner instead of the box. For example instead of .fbox, use #banners

 

If you want each banner to have a different code you might need to set this manually for each banner in the css using the clone class. I'm not sure where you got the code from on the forum but it looks like that will apply the same border to each banner.

 

You can see how to apply different changes to a specific banner depending on the clone class of the banner here - http://www.pagelines.com/forum/topic/25139-customize-background-of-specific-section-ie-banner-box-highlight/

 

You can also use css to editing the positioning of the image inside the banner by adjusting the margins/padding of the image inside the banner, if you've not used css inside the framework before check out our overview/guide at http://support.pagelines.me/docs/customization/custom-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet

Hey James,

 

Yeah - I feel like I just need to find the correct class to get the effect I want.

 

When I apply that code to the class "banners". I get this: http://imgur.com/5IotKlR . As you can see, it does apply the boarder/shadow... but around the entire banners section.

 

What I am trying to do is apply this boarder/shadow around each individual banner... so if I have a page with a banner set that has 4 banners the boarder/shadow will be between each of the 4 individual banners.

 

Like when I apply that above code the the "fbox" class. When I put a box set of 3 boxes on a page I get this: http://imgur.com/DvaiKTS

 

Essentially want to do the same thing to the banners as it did to the boxes.. just vertically.

 

I really appreciate your help!

 

-Ian

Share this post


Link to post
Share on other sites
Rob

Hi Ian,

 

Please provide a link where these banners are located.  Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
clearpathnet

Well, This work I am doing is on a back-end developement website that is only accessable internally.

 

I did however just quickly make a test page on our live site. On the new site, it will be structured exactly like this. (header, content box, and banner underneath)

 

http://www.clearpathnet.com/?page_id=695

 

FYI - this is with me applying the above code to the "Banners" class. you can see the box around the whole section.. just not the individual banners.

 

Does that help?

 

-Ian

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Try applying to #banners .banner-area

 

That will give the border around each banner instead of the entire section. I've just used a simple black border in the below example to show the effect.

 

http://screencast.com/t/MzWAN48zKLJ


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet

Yup! That was it. 

 

Thanks James!

Share this post


Link to post
Share on other sites
Rob

I'm glad James was able to resolve your issue.  Thanks for letting us know.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×