Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Make sure you link the correct site.
Thread Starter
Annoj
(@annoj)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It’s better to just copy & paste it.
Thread Starter
Annoj
(@annoj)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Why is there so much stuff in your Child Theme style.css file? I can’t make out what CSS you added for that border.
Thread Starter
Annoj
(@annoj)
I copied it from the stylesheet
On the 140th line of style.css, you will find the rule regarding
.page-template-showcase-php #primary, .left-sidebar.page-template-showcase-php #primary. Adjust the rule to look like this:
.page-template-showcase-php #primary, .left-sidebar.page-template-showcase-php #primary {
margin: 0;
border: 1px solid #073d85;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Adjust the “1px” size to the amount of pixels (how big the border will be) as you desire 🙂
Thread Starter
Annoj
(@annoj)
Thanks a lot!
Is it also possible to stretch the border to the bottom of the page?
Thread Starter
Annoj
(@annoj)
the border at the right is wider than the border at the left. And how do I remove the border at the top. It is now in the bottom of the menu.
Ok, there are a couple of tweaks you’ll have to undergo, but bear with me here.
Scratch what I said before. First, go to the header img:
<img padding-left: 20px; width="1000" height="70" src="http://www.projectjonna.hu.nl/wp-content/uploads/2013/06/adcam-logo-zonder-dienstverlening-header-lichtbruin-240513.jpg" alt="Logo Adcam-Administratie" alt="Logo Adcam-Administratie">
CHANGE that to:
<img src="http://www.projectjonna.hu.nl/wp-content/uploads/2013/06/adcam-logo-zonder-dienstverlening-header-lichtbruin-240513.jpg" alt="Logo Adcam-Administration" id="logo-img">
MODIFY THAT <IMG> TAG FOR EACH PAGE
And then in your style.css code, add:
#logo-img {
margin-left: -2px;
width: 1002px;
height: 70px;
}
Next, go to line 346 in the style.css file. For the #page rule, modify it to:
#page {
background: #fff;
border: 1px solid #063d85;
border-top: 0;
}
Finally, go to line 133 of style.css. Modify the .page-template-showcase-php #content, .left-sidebar.page-template-showcase-php #content rule to:
.page-template-showcase-php #content, .left-sidebar.page-template-showcase-php #content {
margin: 0 7.5% 0 7.6%;
width: auto;
}
Let us know how that works!
Thread Starter
Annoj
(@annoj)
There are two horizontal big borders now. I don’t like the one under the address.
The horizontal line at the top (onder the menu bar) is still there. I would like to remove that one.
I would like to make the vertical lines thinner
It’s quite likely that these problems are caused by having duplicate CSS code in two places – I’d suggest you get that child theme set up properly.
Thread Starter
Annoj
(@annoj)
I don’t know how to do this
For the big horizontal borders, try adjusting the #page rule on line 346 in your style.css file to:
#page {
background: #fff;
border: 1px solid #063d85;
border-top: 0;
border-bottom: 0;
}
Also, for the horizontal line at the top, I believe you’re referring to the thin dark grey line?
If you ARE referring to the thin grey line, follow the action below. If not, let me know.
That’s a box-shadow that is found on the rules for #access on lines 557 and 578 in your style.css file. I would suggest deleting the box-shadow rules, as well as the vendor prefixed box-shadows (-webkit-box-shadow, -moz-box-shadow, etc.). Do this for both #access rules found on lines 557 and 578 of the style.css file.
For the vertical lines,Did you update the last rule that I said on line 133? I don’t see it enacted in the browser. Double check to make sure, but instead, change the margin to “0 7.3% 0 7.4%”
The problem in the beginning was that the white background for the #content div did not fill the blue background completely, leaving a thin blue line at the right. That means that the blue line was NOT a border created by a CSS border rule, rather it was just the background of the div behind it showing because the white background did not cover the full width of the div behind it.
