Post by RILEY on Feb 7, 2014 17:08:21 GMT
Ooookay, the sidebars and stuff... JON, you wanted this!
1. The wrapper/bg
2. Side bars
T H E W R A P P E R / S E C O N D B O R D E R
This is the purple background around the boards.
Go into this panel from themes:
When it loads, click on 'Style Sheet'
If you scroll down to line 137 you'll see this:
The brown part is the original code. The /* marks stop it being 'read' and ignore that info. Instead, it reads the stuff below.
The wrapper needs to be set to 900px otherwise it stretches the boards and the banner starts to repeat off one side.
The margins are what line it up where it is in the forum - because of the sidebar the left needs set to '300px' otherwise the whole thing ends up hidden behind the sidebar and you lose half the screen.
The background color is set to the same color as the form background, as is the border right now, but if you want the border around the edges of it to be a different color you just need to change that hex color. Where it has 1px controls the thickness.
In place of 'solid', the other options for borders are 'double', 'dashed', 'dotted', 'groove', 'ridge', 'inset', 'outset', and 'hidden'. To be honest, it would be better off set as 'hidden' now, rather than to the same color as the BG, but it doesn't really make much difference.
Border-radius is what makes it rounded. The bigger the value the more it is curved. If you wanted the corners square again you could change those values to 0px, or even 1px. You can enter up to 4 values in there (whereas now there are two) and they'll affect how it curves in different ways. It would work just as well with only one value.
E D I T I N G S I D E B A R C O N T E N T
This time, from themes click on 'Layout Templates'
All the sidebar stuff if found under 'Forum Wrapper'
The start of the side bar is marked by more of the brown writing. Anything between <!--- ---> and /* */ stuff is just note stuff and the where I've added my own, it separates each of the tabs into their own section so it's easy to see where each one starts.
The tab names can be changed here, but if you name thing anything long then the buttons won't align properly and you'll probably find the fifth button goes onto a line of it's own, beneath the others, and it messes the whole thing up. Keep 'em short if you change them.
TAB ONE:
Tab one has the writing that was in the tabbed table on the old skin, and the cbox. The more writing you put at the top, the further down the sidebar the cbox will go.
The bigger your computer screen (height wise) the longer the sidebar will appear. If you fill loads of stuff into it to fill it on a bigger screen, chances are someone with small screen won't be able to see half of the stuff at the bottom! So... don't fill it too much!
The <div id= and <div class= parts relate to the sidebar CSS which is at the bottom (and I'll explain it further down, too). Only change the names of them if you change the CSS names, too. But it really makes no difference what they're called so... yeah.
Tab One is pretty simple. Edit the top info, the the cbox can only be changed on cbox.ws site by Sarah/whoever has the cbox login details.
TAB TWO:
This has current month/year information on it. Again, CSS is at the bottom.
Plot info/news/updates whatever can go in the space below it (again, don't fill it too much!) - Sarah says plot stuff will probably go there when it's decided on!
Census stuff... you can see how it is set out at the bottom, though I haven't print-screened all of it. It all looks the same, really. You can see where it has background-color:#ff000000 - each one has a different colors value, and that changes the colors of the square you see at the side, next to the group name.
You'll just have to look at the ♂ and♀ icons to see which one you're filling in. If you add someone to the census, make sure you add them into their member group numbers AND to 'totals' at the bottom to keep the numbers right! I think it would be beneficial to set up a thread in this board where we all say what we've added/what needs added, so everything is kept up to date, there's no double ups, and no confusion. But that'll come after this!
And... that's about all there is to Tab Two.
TAB THREE:
This is the staff stuff - the difference here is that the text stuff is edited within the code, not within the CSS at the bottom of the page. Technically, each name could be in a different color, if you wanted it to be.
You can see in the pic above where the images go, and they're each set to a specific height/width. The text below is there as well, right below the images.
The end of the lines look like this:
Each one links to each profile, and you can see the names at the end.
After 'style=' where it has color:#8165a8 -that's what makes the links that purple color. As said, each one could be different if you wanted them to. Otherwise, if you want them all one color you'd need to change it in every one.
You can't really see it on either pic, but in the space between the two that is cut off, there is 'text-shadow:#fff 1px 1px' - this is the write around the names.
The color can be changed, as can the amount of shadow, though it starts to look really weird if it goes much bigger than 3px. Again, you can have up to four values here, and they don't have to be the same.
If you put in four values into a code it reads: Top Right Bottom Left.
TAB FOUR:
This is the Of The Month/Nominations stuff! Since you don't pick just one per category it made more sense to make it scroll/marquee, so as many can be added as needed.
'scrollamount=3' dictates how fast it moves. Currently it doesn't stop scrolling when you hover over it - do you want it to stop, or keep going?
Height is 500px, on my laptop that makes the bottom of the marquee start about half an inch from the bottom of my screen. For others with better screen it probably looks higher up but... you know... What can ya do?! ^.^
Where it has 'placehold.it/230x120' - this is where the images will go. They should be 230px wide by 120px tall.
The line below it has the names stuff, with the exception of the couples one where the names go below both images.
If you need to add more places to one of the groups then they can easily be added. Add this where it's needed:
TAB FIVE:
The top of this is the links, and the bottom is affiliates. Where the text is black, is what name shows up. If you wanted to change those then change them there. I mean, if you wanted 'Quick Links' to say 'Navigation' or anything like that - that's where you'd change it.
Right now, the links are just the same ones as what was shown in the tabbed table on the old skin. You can add more by copying one of the <a class... lines and pasting it in, then just changing the stuff. It should automatically look like the rest of them.
The affiliate stuff... Right now they're just a list of static tabs, and pretty obvious - put in URL and image into the right places, and it'll show.
It would be easy enough to change the types if you think it would be better - as in, maybe only a couple of static ones, then a marquee area, or a scrolling area, something like that. It's limited to how many affs there can be right now with them static, so whatever you think would be best in there.
SIDEBAR CSS
![]()
This is the start of the CSS (aka appearance) stuff.
In the first #sidebar chunk:
background - this is the color of all the tabs, which right now is the same color as the rest of the forum.
width - currently 250px - change it and it'll probs mess with the background wrapped thing (above).
background-image - if you didn't want a solid color BG you could put a URL in there as a background.
border-right - this is where you currenly see the solid black line down the side. This can be changed - width, color, and type (i listed them above)
.clickable1 - these are the buttons when they're not clicked.
color:#fff- is the text colors in them
background color - currently set to black
border-bottom - this is the line of color you see under the buttons, which is set to the same site purple.
.highlight is what the button does when it's clicked on. Right now, the colors reverse.
#tab-strip background-color: is where it's currently purple behind the TOP of the buttons.
.sidebartext - this effects what most of the ordinary text looks like. So, on the cbox tab where the 'welcome to HM!...' stuff is, etc.
.update-date - this is the 'It is winter', 'census' 'quick links', and 'affiliates' stuff. 'color' is the text color, border-bottom: is the line underneath it, which again, all the settings can be changed, and text-shadow is the fuzz/shadow around the words.
These two are for the navigation/quick links.
a.linky:
background:#f7f7f7 is the off-white BG it currently is.
color = text color
border-left: is the current dark purple you see
a.linky:hover:
border-left is the color the purple changes to when it's hovered over
background is the color change in the background when it's hovered over.
You can see where the end of the side bar is too!
And... done!
Need anything else added to this?
T H E M E S T U F F
This all goes on in the obvious place:
1. The wrapper/bg
2. Side bars
T H E W R A P P E R / S E C O N D B O R D E R
This is the purple background around the boards.
Go into this panel from themes:
When it loads, click on 'Style Sheet'
If you scroll down to line 137 you'll see this:
The brown part is the original code. The /* marks stop it being 'read' and ignore that info. Instead, it reads the stuff below.
The wrapper needs to be set to 900px otherwise it stretches the boards and the banner starts to repeat off one side.
The margins are what line it up where it is in the forum - because of the sidebar the left needs set to '300px' otherwise the whole thing ends up hidden behind the sidebar and you lose half the screen.
The background color is set to the same color as the form background, as is the border right now, but if you want the border around the edges of it to be a different color you just need to change that hex color. Where it has 1px controls the thickness.
In place of 'solid', the other options for borders are 'double', 'dashed', 'dotted', 'groove', 'ridge', 'inset', 'outset', and 'hidden'. To be honest, it would be better off set as 'hidden' now, rather than to the same color as the BG, but it doesn't really make much difference.
Border-radius is what makes it rounded. The bigger the value the more it is curved. If you wanted the corners square again you could change those values to 0px, or even 1px. You can enter up to 4 values in there (whereas now there are two) and they'll affect how it curves in different ways. It would work just as well with only one value.
E D I T I N G S I D E B A R C O N T E N T
This time, from themes click on 'Layout Templates'
All the sidebar stuff if found under 'Forum Wrapper'
The start of the side bar is marked by more of the brown writing. Anything between <!--- ---> and /* */ stuff is just note stuff and the where I've added my own, it separates each of the tabs into their own section so it's easy to see where each one starts.
The tab names can be changed here, but if you name thing anything long then the buttons won't align properly and you'll probably find the fifth button goes onto a line of it's own, beneath the others, and it messes the whole thing up. Keep 'em short if you change them.
TAB ONE:
Tab one has the writing that was in the tabbed table on the old skin, and the cbox. The more writing you put at the top, the further down the sidebar the cbox will go.
The bigger your computer screen (height wise) the longer the sidebar will appear. If you fill loads of stuff into it to fill it on a bigger screen, chances are someone with small screen won't be able to see half of the stuff at the bottom! So... don't fill it too much!
The <div id= and <div class= parts relate to the sidebar CSS which is at the bottom (and I'll explain it further down, too). Only change the names of them if you change the CSS names, too. But it really makes no difference what they're called so... yeah.
Tab One is pretty simple. Edit the top info, the the cbox can only be changed on cbox.ws site by Sarah/whoever has the cbox login details.
TAB TWO:
This has current month/year information on it. Again, CSS is at the bottom.
Plot info/news/updates whatever can go in the space below it (again, don't fill it too much!) - Sarah says plot stuff will probably go there when it's decided on!
Census stuff... you can see how it is set out at the bottom, though I haven't print-screened all of it. It all looks the same, really. You can see where it has background-color:#ff000000 - each one has a different colors value, and that changes the colors of the square you see at the side, next to the group name.
You'll just have to look at the ♂ and♀ icons to see which one you're filling in. If you add someone to the census, make sure you add them into their member group numbers AND to 'totals' at the bottom to keep the numbers right! I think it would be beneficial to set up a thread in this board where we all say what we've added/what needs added, so everything is kept up to date, there's no double ups, and no confusion. But that'll come after this!
And... that's about all there is to Tab Two.
TAB THREE:
This is the staff stuff - the difference here is that the text stuff is edited within the code, not within the CSS at the bottom of the page. Technically, each name could be in a different color, if you wanted it to be.
You can see in the pic above where the images go, and they're each set to a specific height/width. The text below is there as well, right below the images.
The end of the lines look like this:
Each one links to each profile, and you can see the names at the end.
After 'style=' where it has color:#8165a8 -that's what makes the links that purple color. As said, each one could be different if you wanted them to. Otherwise, if you want them all one color you'd need to change it in every one.
You can't really see it on either pic, but in the space between the two that is cut off, there is 'text-shadow:#fff 1px 1px' - this is the write around the names.
The color can be changed, as can the amount of shadow, though it starts to look really weird if it goes much bigger than 3px. Again, you can have up to four values here, and they don't have to be the same.
If you put in four values into a code it reads: Top Right Bottom Left.
TAB FOUR:
This is the Of The Month/Nominations stuff! Since you don't pick just one per category it made more sense to make it scroll/marquee, so as many can be added as needed.
'scrollamount=3' dictates how fast it moves. Currently it doesn't stop scrolling when you hover over it - do you want it to stop, or keep going?
Height is 500px, on my laptop that makes the bottom of the marquee start about half an inch from the bottom of my screen. For others with better screen it probably looks higher up but... you know... What can ya do?! ^.^
Where it has 'placehold.it/230x120' - this is where the images will go. They should be 230px wide by 120px tall.
The line below it has the names stuff, with the exception of the couples one where the names go below both images.
If you need to add more places to one of the groups then they can easily be added. Add this where it's needed:
<img src="http://placehold.it/230x120" border="0" alt="GROUP"/>
<div style="width:240px;text-align:center;font-family:georgia;font-size:20px;color:#453c51;">group name</div>TAB FIVE:
The top of this is the links, and the bottom is affiliates. Where the text is black, is what name shows up. If you wanted to change those then change them there. I mean, if you wanted 'Quick Links' to say 'Navigation' or anything like that - that's where you'd change it.
Right now, the links are just the same ones as what was shown in the tabbed table on the old skin. You can add more by copying one of the <a class... lines and pasting it in, then just changing the stuff. It should automatically look like the rest of them.
The affiliate stuff... Right now they're just a list of static tabs, and pretty obvious - put in URL and image into the right places, and it'll show.
It would be easy enough to change the types if you think it would be better - as in, maybe only a couple of static ones, then a marquee area, or a scrolling area, something like that. It's limited to how many affs there can be right now with them static, so whatever you think would be best in there.
SIDEBAR CSS
This is the start of the CSS (aka appearance) stuff.
In the first #sidebar chunk:
background - this is the color of all the tabs, which right now is the same color as the rest of the forum.
width - currently 250px - change it and it'll probs mess with the background wrapped thing (above).
background-image - if you didn't want a solid color BG you could put a URL in there as a background.
border-right - this is where you currenly see the solid black line down the side. This can be changed - width, color, and type (i listed them above)
.clickable1 - these are the buttons when they're not clicked.
color:#fff- is the text colors in them
background color - currently set to black
border-bottom - this is the line of color you see under the buttons, which is set to the same site purple.
.highlight is what the button does when it's clicked on. Right now, the colors reverse.
#tab-strip background-color: is where it's currently purple behind the TOP of the buttons.
.sidebartext - this effects what most of the ordinary text looks like. So, on the cbox tab where the 'welcome to HM!...' stuff is, etc.
.update-date - this is the 'It is winter', 'census' 'quick links', and 'affiliates' stuff. 'color' is the text color, border-bottom: is the line underneath it, which again, all the settings can be changed, and text-shadow is the fuzz/shadow around the words.
These two are for the navigation/quick links.
a.linky:
background:#f7f7f7 is the off-white BG it currently is.
color = text color
border-left: is the current dark purple you see
a.linky:hover:
border-left is the color the purple changes to when it's hovered over
background is the color change in the background when it's hovered over.
You can see where the end of the side bar is too!
And... done!
Need anything else added to this?
