Hello @muhamadi,
Can you please provide some explanatory screenshots in order to illustrate what exactly you want to achieve?
You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).
Kind Regards, Roman.
Hi, @romanbon,
Hope you are doing well.
Sure, here is a link to screenshot:
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Border.jpg
As you can see, there is no gap between content and sidebar areas (black vertical line).
I want to have a gap of different color (this color can be blue) between content and sidebar areas.
Also as you can see, horizontal line in content area (horizontal line after heading word “Lorem Ipsum”) goes till the end to the left, but on the right side there is a blank space between content and sidebar. Red arrow shows that blank space.
I want this blank space to disappear, I want horizontal line to go till the end of content area to the right too.
-
This reply was modified 8 years, 10 months ago by
Muhamadi.
When I was playing with the code, the blue frame that surrounds both content and sidebar areas also appeared between content and sidebar areas (black vertical line part).
At the same time, red horizontal came all the way to the left and right limits of content area.
Unfortunately, I don’t remember how I did it))
Right now I have applied this code:
#content.page-wrap .content-wrapper {
background-color: blue;
}
#content #primary {
background-color: white;
padding: 0;
}
Here is an example of a website with a gap between content and sidebar areas:
newsonlineincome.com
Hello @muhamadi,
Please try to use the following CSS code.
You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).
@media only screen and (min-width: 992px) {
#secondary {
border-left: 10px solid blue;
}
}
#main {
padding: 0;
}
Kind Regards, Roman.
Hi, @romanbon,
Thank you for your help.
You are very good with finding a way around the problem))
This is not exactly what I want.
You (as far as I can understand) added a border to the sidebar. It moves sidebar text more to the right side. There are also other small drawbacks.
I want frame, surrounding content and sidebar areas, to appear between them.
I somehow did exactly this, playing with CSS. Maybe it was part of the whole background that appeared between them (because frame and whole background colors were the same).
The code, that I accidentally entered, was way simpler. I actually thought that my applied code mentioned above would be enough, but it’s not.
I tried to add padding to #content.page-wrap .content-wrapper, but it didn’t help too.
Please let me know if there is anything confusing to you.
-
This reply was modified 8 years, 10 months ago by Muhamadi.
-
This reply was modified 8 years, 10 months ago by Muhamadi.
@romanbon, is there a way, plugin or something, that saves all the changes applied to Dashboard → Appearance → Customize → Additional CSS?
Like all the changes made in editing the page are saved, and can be checked and compared in “Revisions” section.
Hello @muhamadi,
1. That seems to go beyond support, please consider hiring someone.
2. I’m not sure if there is such plugin. But you can save that code somewhere on your computer or server in a simple text file regularly. So you can have something like 28may2017_AdditionalCSS.txt
Kind Regards, Roman.
Hi @romanbon,
For you to know, I really accidentally did it. I’m not making it up, it is absolutely true.
At that time I didn’t like the result, then I found the right background and frame color, but, unfortunately, forgot how I created this border.
Here is the whole css that I apply, maybe it will help you in figuring out the solution.
I definitely made some small changes to the existing code, nothing major:
.widget_sydney_latest_news .roll-button {
display: none;
}
body > .preloader{ display: none; }
.widget-area .widget {
padding-top: 0;
}
.site-info {
text-align: center;
}
#gallery-1 {text-align: center;}
figure.gallery-item {margin: 5px; width: 267px; display: inline-block;}
#mainnav-mobi {
background-color: #ffffff;
}
#mainnav-mobi ul li {
border-color: #f2f2f2;
}
#mainnav-mobi ul > li > a {
color: #dd2525;
}
.entry-title{
display: none;
}
#content.page-wrap .content-wrapper {
background-color: rgba(245, 245, 245, 0.7);
}
#content #primary {
background-color: #f4f4f4;
padding: 0;
}
#sidebar-footer {
padding: 40px 0 0;
}
h6 {
font-family: Roboto, sans-serif, google;
}
h2 {
font-family: ‘Raleway’, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
color: #dd2525
}
body {
line-height: 24px;
}
hr {
border: 1px solid #dd2525;
}
.widget {
font-size: 16px;
line-height: 24px;
}
#mainnav ul li a {
font-family: ‘Raleway’, sans-serif;
}
.site-header{
background-color: transparent;
}
.roll-button.button-slider{
background-color: transparent;
}
.roll-button.button-slider:hover{
border-color: #0934d7;
background-color: #0934d7;
color: #fff;
}
Thank you for sharing this, but such things are considered advanced customization and go beyond support.
Kind Regards, Roman.
