Jump to content

Archived

This topic is now archived and is closed to further replies.

WPPotato

Border around content, but not each individual section

Recommended Posts

WPPotato    2
WPPotato

Hi, I am trying to put a border around the site I am working on ( http://nerdzforhire.com/basa4/ ) I want the border to go around the lighter colored section (the content area) but when I use this custom CSS:

 

.content {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border: 2px solid blue;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}
 
it puts individual borders around each section of the page (header, nav, main body, footer, etc..) and I just want one box around the whole thing. Any one know how I would accomplish this? Thanks in advance for any help. 
 
-Sean
  • Like 1

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

can you sketch a mockup of how you want this to look please and i can suggest a change to yoru code ? 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Wizard    1
Wizard

Try using an ID instead of a class.

 

ex:

 

#content { blah } 

 

vs

 

.content {blah}

 

ID's are specific to the element which is marked with the same ID

Classes will cascade to all the elements within the <div>/etc

 

So it sounds to me like your class attributes are cascading down to everyhting within the page.. instead of just being tied to the one specific element you want to edit

  • Like 1

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The reason as to why it is adding borders around every section is due to every section using the .content class.

 

So what you can do is try the following:

 

section[id] .content {
border-left: 2px solid #00F;
border-right: 2px solid #00F;
}

.section-branding .content {
border-top: 2px solid #00F;
}

.section-simple_nav .content {
border-bottom: 2px solid #00F;
}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WPPotato    2
WPPotato

Hi all, sorry I took so long to reply, I was away from my computer till now. I will try what you have suggested and let you know how it works out. Thanks for all the help.

  • Like 1

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

let us know how it goes 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
WPPotato    2
WPPotato

Hi, So I tried Danny's Method and it worked, Thanks! I do have one more question though, in that snippet of code; the bottom of the frame is under the simple nav, if I wanted the bottom of the frame to be above the simple nav how would I rework the code? I tried changing the border-bottom to border-top in the simple-nav section but the sides still go all the way down to the bottom of simple nav. Thanks again for the help, I am kind of rusty at css.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If I understand what you mean, try the replacing the simple-nav snippet of code with this:

 

.section-simple_nav .content {
border-top: 2px solid #00F;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WPPotato    2
WPPotato

Thanks for all your help, I really appreciate it. I think I got it from here.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thanks for letting us know 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • paoloimperiale
      By paoloimperiale+
      Hi, 
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
×