Hello everyone,
I'm not very skilled at CSS, or anything code related for that matter I've been slowly working my way through editing the default template. I just did it by selecting "Create Theme" and then making a corresponding Template Set and linked the two. From there I've been editing the Global.css and template files of the newly created theme. (hopefully this is correct.)
I digress, what I would like to do is this.
http://therustyspittoon.com/images/test.png
Inside the lines I would like to keep the white background, outside of the lines I would like a darker color. Is there a easy way to achieve this or is? or is this something difficult to do? I really have no point of reference in terms of difficulty. I've been able to fiddle my way through most of everything to this point with help from Google here and there, but I'm completely lost on this.
In advanced, thanks!
The following edits will get you a fixed width. The second part is where you edit the outer content.
Part 1
Add to the top of your
header template:
<!-- custom container -->
<div id="custom-container">
Add to the bottom of your
footer template:
<!-- end #custom-container -->
</div>
Add to the end of your
global.css file:
/* custom css */
#custom-container {
width:960px;
margin: 0 auto;
background-color:#fff;
}
Part 2
Edit the "body" class in global.css to change the outer background. Edit the #custom-container in global.css to suit your needs also.
(2015-08-22, 12:29 AM)ThemeFreaknet Wrote: [ -> ]The following edits will get you a fixed width. The second part is where you edit the outer content.
Part 1
Add to the top of your header template:
<!-- custom container -->
<div id="custom-container">
Add to the bottom of your footer template:
<!-- end #custom-container -->
</div>
Add to the end of your global.css file:
/* custom css */
#custom-container {
width:960px;
margin: 0 auto;
background-color:#fff;
}
Part 2
Edit the "body" class in global.css to change the outer background. Edit the #custom-container in global.css to suit your needs also.
That is amazing, thank you it worked like a charm!
EDIT EDIT:
Never mind, It fixed itself after I cleared the cache a few times.
EDIT:
Actually, there seems to be one small issue at the bottom of my footer here.
http://therustyspittoon.com/images/footer.png
Let me know if you need more info.
(2015-08-22, 01:47 AM)Evanonian Wrote: [ -> ]That is amazing, thank you it worked like a charm!
EDIT EDIT:
Never mind, It fixed itself after I cleared the cache a few times.
EDIT:
Actually, there seems to be one small issue at the bottom of my footer here.
http://therustyspittoon.com/images/footer.png
Let me know if you need more info.
I don't see an error with your footer on the live site?
Never mind. I didn't read your post right.
When you place a link to your forum, it can be found easily I think.
When it is a table there in the footer template, than it is most probably a colspan of a td there.
The
#custom-container is probably set smaller than one of your inner containers. You could try editing
global.css again for any containers that have a fixed width bigger than what you set.
Find:
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
}
Replace with:
.wrapper {
margin: auto;
}
Find:
#container {
color: #333;
text-align: left;
line-height: 1.4;
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size: 13px;
margin: 0px;
min-width: 990px;
}
Replace with:
#container {
color: #333;
text-align: left;
line-height: 1.4;
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size: 13px;
margin: 0px;
}
(2015-08-22, 05:06 PM)ThemeFreaknet Wrote: [ -> ]The #custom-container is probably set smaller than one of your inner containers. You could try editing global.css again for any containers that have a fixed width bigger than what you set.
Find:
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
}
Replace with:
.wrapper {
margin: auto;
}
Find:
#container {
color: #333;
text-align: left;
line-height: 1.4;
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size: 13px;
margin: 0px;
min-width: 990px;
}
Replace with:
#container {
color: #333;
text-align: left;
line-height: 1.4;
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size: 13px;
margin: 0px;
}
Thank you, one more question.
Is there a way that you know of to add padding to the header here
http://therustyspittoon.com/forums/ to look like that of my wordpress page here
http://therustyspittoon.com
You've been so helpful!