Right and left site border line
-
I was wondering if it would be possible to have a solid navy line that would run from top to bottom on the left side edge and the right side edge of my blog ( just inside the white border? And also a similar navy line that would separate my post area from my widget area from around the top height of the social icons to the bottom? I hope I explained that good enough. Thanks for any help!
Mary Ann
The blog I need help with is: (visible only to logged in users)
-
You can put borders on the main content of your page quite easily but splitting the main content and sidebar is tricky because you don’t know which one will be longer on any given page. A nice work-around is to box in your sidebar so that it is easy to tell apart from the main section. The border won’t stretch all the way down to the bottom of the page though if the main content is longer. Here’s an example:
#main { border-left:5px solid #233155; border-right:5px solid #233155; } #secondary { border-left:5px solid #233155; border-bottom:5px solid #233155; } .site-main .widget-area { margin-right:0; padding-right:2%; } -
Thank you fo your help. Is there any way to get the two navy lines on the left and the right sides of my blog even closer to the outside edge? And is there also a way to get my new header (the gray background to go entirely up to the top of the page so I dont see any white and also for the right and left sides of the header meet the navy lines on each side of the blog?
-
Mary Ann, we can reduce the padding in #page (left and right) to get the borderlines closer to the edges. Try this and see what you think.
#main { border-left: 5px solid #233155; border-right: 5px solid #233155; } #page { padding-left: 5px; padding-right: 5px; }To put the grey border line only on the bottom of the widgets, change your .widget rule to border-bottom like this:
.widget { border-bottom: 3px solid #ddd; } -
Ok great. I input that but is there a way to get that line to extend all the way up to the top of the page on both sides? And also is there a way to get the white area on the top and bottom of my header to go away? Thanks so much for your help!
Mary Ann
-
Ok I am surprising myself and figured out how to extend the navy line on the left and right sides of my page from top to bottom!! And I even changed it to a double line! The one thing I still cant figure out though is how to get ride of the white at the top and bottom of my custom header, any help would be appreciated! Thanks.
Mary Ann
-
To get rid of the white above the header image, add the following.
.site-header hgroup { margin-top: -16px; }The white at the bottom is a bottom padding in .site, so add the following to get rid of that.
.site { padding-bottom: 0; } -
I got the top white part deleted but the bottom white part is still there?? Could you also tell me if it would be possible to put the navigation pages in my header, at the bottom. Maybe the home and about me below the word kitchen and to the left and recipes and contact to the below right side of kitchen?? Not even sure if that is possible. But I would like to delete that white part anyway to see what it looks like and see if I may like the way it would look if they were in the header too. Thanks much.
Mary Ann -
Mary Ann, I don’t see the .site padding-bottom in your custom CSS. You have two .site rules in your CSS. Remove this one since it is a duplicate:
.site { max-width: 55em; }The modify the remaining one to look like this:
.site { margin-bottom: 0; margin-top: 0; max-width: 55em; padding-bottom: 0; } -
Thank you for your help with that, i think it may have had something to do with the navigation bar line I put in there so I deleted that. Any way to place those pages in the header that I mentioned? And lastly also any way to make the red lines that I have as widget dividers shorter on the left side so they do not touch my line that separates the content area from the widget area? Maybe similar to the right side how it is about a quarter inch from the right side? Thank you. Mary Ann
-
You can move the menu items up into the header image area below Kitchen by using position: relative and then using a negative “top” value. I would suggest limiting this change to screen/browser window widths of 600px and wider since that is when the menu changes to the minified version for mobile devices. This would be the code for that.
@media screen and (min-width: 601px) { .navigation-main { position: relative; top: -50px; background: none; } }I noticed while testing that you have changed the CSS so that the normal menu stays visible even below that 600px width, which puts two menus on your site. The minified menu is designed to work properly with phones and tablets and this is especially important if you happen to use submenus at some point since they don’t work on touch devices. This is the custom CSS responsible for that. It would be my suggestion to remove it so that the minified menu is there for touch devices.
#menu-menu-1{ display:inline-block; } -
Ok I put that in and took out the custom CSS regarding the menu but the menu items are now off to the left. Could I keep home and about me to that side below kitchen but spaced a little more apart and then move recipes and contact to the right of kitchen and below with similar spacing. When they are directly under the word kitchen it looks too close. Thanks!!
-
If I’m understanding you right, you want the menu items in the header area, but want the two on the left to the left of Kitchen, and the two on the right to the right of Kitchen at the bottom of the header image.Delete the previous code I had given and replace with this. It better centers the menu items by removing the left margin that was on the menu and uses padding right on the about me menu item and padding left on the recipes menu item to produce the spacing.
@media screen and (min-width: 601px){ .navigation-main{ position:relative; top:-50px; background:none; } #menu-menu-1{ display:inline-block; margin-left: 0 !important; } #menu-item-79 { padding-right: 90px; } #menu-item-81 { padding-left: 90px; } } -
That worked perfect!! Exactly like I wanted it! The last thing for the day is to make the red lines between my widgets a little smaller. Right now they are about 2 inches and I would like for them them to be around 1.5. I do not want the left side of the line to touch the content/widget separator dashed line. I fiddled around with the CSS myself but cant figure it out. I did figure out I could do dotted, dashed or solid lines….are there any other types or can I put in a custom type like roping?? Thanks so much.
Mary Ann -
Hi, making the line itself narrower would take a bit of finagling. Give this a try first and see what you think. Find the .widget rule in your custom CSS and add a left margin of 25px to it like this:
.widget { background: rgba(0, 0, 0, 0); margin-left: 25px; } -
Perfect again! Just what I wanted to do! Are the only options dotted, dashed and solid? Thanks.
Mary Ann -
That’s great! Have a look at this web page which tells all about the different border types available: http://www.w3schools.com/css/css_border.asp .
You can also use an image as a border, but that has been problematic, and I don’t know if that has actually been fixed or not yet. I will check in on it and let you know.
-
-
- The topic ‘Right and left site border line’ is closed to new replies.
WordPress.com Forums 