Boxy (A Grid-Like Hover Table - Banner Alternative)

Risa
New Member

Posts: 31

Boxy (A Grid-Like Hover Table - Banner Alternative) Apr 30, 2014 22:42:54 GMT -8 ♡ Kat Meows ♡, Boy_Wonder, and 8 more like this

Quote

Post by Risa on Apr 30, 2014 22:42:54 GMT -8

BE PREPARED TO CREDIT ME IN THE DESIGN PROCESS OR DON'T USE THIS.

INSPIRATION FOR THIS CAME FROM THIS TEMPLATE EDIT.
PREVIOUSLY USED ON MY SITE, HEARTSTRINGS, IN THIS FASHION.

This is a template modification that I've named Boxy. It is a banner alternative which is a table made up boxes for pictures that when hovered reveals content for your site. It's not exactly easy to implement if you know absolutely nothing about coding but, that's why I'm here! To help if you get stuck. Feel free to respond to this thread with questions, if you need help, or just to show me how you've used it! I love seeing it in action!

You will be editing the FORUM WRAPPER template and adding some css coding to the ADVANCED STYLES & CSS > STYLESHEET. But first, there's a few things that must be done.

Step One.
Check your forum width. This is easily accomplished by navigating to...

Themes > Advanced Styles & CSS > Visual Editor > Click on Width > type in 75% visual aid

If you don't want a 75% width forum, you'll have to do some css editing later because it'll look like this. visual aid

Step Two.
We'll be adding the Google Font 'Oswald' to your FORUM WRAPPER template to get the desired design effect.
First, navigate to THEMES > LAYOUT TEMPLATES > FORUM WRAPPER visual aid
Click and bring up the template. Now we're going to insert a bit of code.
Copy this.

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
Now, look for the <head> </head> tags. (Should be at lines 3 and 7 on a fresh default theme.) Once you've located them, paste the code somewhere between them. On Line 5 works for me. visual aid

Step Three
Now, while you're in the FORUM WRAPPER template, we'll begin putting in our table. This table replaces the big title on the banner for the forum. We're taking out one line and adding a lot. Take deep breaths you're almost there.

Find Lines 18 through 20. if you added the google font in step two. (Otherwise, on a fresh theme, it will be Lines 17 through 19.) And then highlight it. visual aid

Once you've found it, copy this code.

<!-- START BOXY BY RISA OF PB SUPPORT -->
<table>
<tr>
<td style="padding: 2px;">
<div class="box1">
<div class="hover1">
<!-- START EDIT BOX ONE HERE -->
<div class="toph1">BOX ONE</div>
<div class="insidebox1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- STOP EDIT BOX ONE HERE -->
</div>
</div>
</td>
<td style="padding: 2px;">
<table>
<tr>
<td style="padding: 2px;">
<div class="box2">
<div class="hover2">
<!-- START EDIT BOX TWO HERE -->
<div class="toph1">BOX TWO</div>
<table style=" margin: 0 auto;">
<tr>
<td style="padding: 2px;">
<a href="#"><img src="http://placehold.it/75x75/F5F5F5/54544C/" style="width: 75px; height: 75px; border:4px solid #6D6D67;"></a>
</td>
<td style="padding: 2px;">
<a href="#"><img src="http://placehold.it/75x75/F5F5F5/54544C/" style="width: 75px; height: 75px; border:4px solid #6D6D67;"></a>
</td>
</tr>
<tr>
<td style="padding: 2px;">
<div class="toph1">NAME</div>
</td>
<td style="padding: 2px;">
<div class="toph1">NAME</div>
</td>
</tr>
</table>
<!-- STOP EDIT BOX TWO HERE -->
</div>
</div>
</td>
<td style="padding: 2px;">
<div class="box3">
<div class="hover3">
<!-- START EDIT BOX THREE HERE -->
<div class="toph1">BOX THREE</div>
<center><img src="http://placehold.it/100x100/D58D7C/F5F5F5/"></center>
<!-- STOP EDIT BOX THREE HERE -->
</div>
</div>
</td>
<td style="padding: 2px;">
<div class="box4">
<div class="hover4">
<!-- START EDIT BOX FOUR HERE -->
<div class="toph1">BOX FOUR</div>
<div class="insidebox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- STOP EDIT BOX FOUR HERE -->
</div>
</div>
</td>
</tr>
<tr>
<td style="padding: 2px;">
<div class="box5">
<div class="hover5">
<!-- START EDIT BOX FIVE HERE -->
<div class="toph1">BOX FIVE</div>
<div class="box5links">
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
<a href="#">PLACEHOLDER LINK</a>
</div>
<!-- STOP EDIT BOX FIVE HERE -->
</div>
</div>
</td>
<td style="padding: 2px;">
<div class="box6">
<!-- START EDIT BOX SIX HERE -->
<!-- REMOVING THE IFS AND ELSES WILL CAUSE THIS BOX NOT TO WORK AS INTENDED-->
{if !$[current_user.is_member]}
<div class="toph1">WELCOME GUEST!</div>
<div class="toph2">REGISTER OR LOGIN!</div>
<center><img src="http://placehold.it/75x75/F5F5F5/54544C/"></center>
{else}
<div class="toph1">OH! HEY! I KNOW YOU!</div>
<div class="toph2"> $[current_user.name]!</div>
<center>$[current_user.avatar_medium]</center>
{/if}
<!-- STOP EDIT BOX SIX HERE -->
</div>
</td>
<td style="padding: 2px;">
<div class="box7">
<div class="hover7">
<!-- START EDIT BOX SEVEN HERE -->
<div class="toph1">BOX SEVEN</div>
<div class="insidebox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- STOP EDIT BOX SEVEN HERE -->
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BOXY BY RISA OF PB SUPPORT -->

Now that you've copied the code, go back to your FORUM WRAPPER template and paste the code into the bit of code you highlighted earlier. You know, this one. After you're done pasting the code, it should look like this. visual aid

SAVE YOUR CHANGES.

Step Four
Your banner area probably looks like a hot mess right now. It's understandable. Unless you're styling directly into the template, everything will. But, if you've done everything right so far, it'll look like this. visual aid

Since we can't have your forum looking like that, we need to go into the ADVANCED STYLE & CSS portion of this tutorial. I'll do my best to explain things and more visual aids. You want to navigate to your stylesheet which would be...

THEMES > ADVANCED STYLES & CSS > STYLESHEET (Make sure that tab is selected)

Now that you're at the stylesheet, you'll see more code. Stuff that looks pretty daunting if you're just starting your journey. Anyway, scroll in the code window all the way to the bottom. You get there? Good? On a fresh theme, the last thing you'll see styling code for tablets and phones, just in case you're not sure. visual aid

You're at the bottom. We're going to add some css code that looks just as intense as the table coding for the forum wrapper. Hit Enter a few times after the last '}' bracket for the tablet/phones code. visual aid

Now that you've got enough space, let's paste the css code.

.toph1{
font-family: 'Oswald', sans-serif;
font-size: 18px; 
text-transform: uppercase;
padding: 5px 0 10px 0;
text-align: center;
background: transparent;
color: #ededed;
}

.toph2{
font-family: 'Oswald', sans-serif;
font-size: 14px; 
text-transform: uppercase;
padding: 0 0 15px 0;
text-align: center;
background: transparent;
color: #ededed;
}

.insidebox1{
padding: 10px;
text-align: justify; 
font-size: 10px; 
font-family: arial, sans-serif;
color:#F5F5F5;
overflow: auto; 
height: 275px;    
}

.insidebox{
padding: 10px;
text-align: justify; 
font-size: 10px; 
font-family: arial, sans-serif;
color:#F5F5F5;
overflow: auto; 
height: 103px;    
}

.box1 {
opacity: 1;
width: 245px;
height: 324px;
background-image: url('http://placehold.it/245x324/D58D7C/F5F5F5/');
}
.hover1 {
width: 245px;
height: 324px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover1:hover {
opacity: 1;
} 

.box2 {
opacity: 1;
width: 260px;
height: 160px;
background-image: url('http://placehold.it/260x160/F5F5F5/53534B/');
}
.hover2 {
width: 260px;
height: 160px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover2:hover {
opacity: 1;
} 

.box3 {
opacity: 1;
width: 220px;
height: 160px;
background-image: url('http://placehold.it/220x160/D58D7C/F5F5F5/');
}
.hover3 {
width: 220px;
height: 160px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover3:hover {
opacity: 1;
} 

.box4 {
opacity: 1;
width: 260px;
height: 160px;
background-image: url('http://placehold.it/260x160/A8D0CA/F5F5F5/');
}
.hover4 {
width: 260px;
height: 160px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover4:hover {
opacity: 1;
} 

.box5 {
opacity: 1;
width: 260px;
height: 160px;
background-image: url('http://placehold.it/260x160/A8D0CA/F5F5F5/');
}
.hover5 {
width: 260px;
height: 160px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover5:hover {
opacity: 1;
} 

.box6 {
background-color: #54544C; 
height: 160px;
}

.box7 {
opacity: 1;
width: 260px;
height: 160px;
background-image: url('http://placehold.it/260x160/F5F5F5/53534B/');
}
.hover7 {
width: 260px;
height: 160px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover7:hover {
opacity: 1;
}

.box5links {
background: #4A4037;
width : 300px;
text-align: center;
}

.box5links a, .box5links a:visited, .box5links a:active{
color : #A8D0CA;
padding : 4px;
margin: 2px;
float: left;
width : 39.3%;
display: block;
text-align : center;
font-family: 'Oswald', sans-serif;
font-size : 12px;
font-style : normal;
font-weight : 400;
text-transform: uppercase;
}

.box5links a:hover {
color : #D58D7C;
background-color:#6D6D67;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}

SAVE YOUR CHANGES.

Now, have a looksie. Hopefully your banner area looks like the images at the top now.

Support and changes FAQ will be addressed in the following post.
Read that before you ask a question.

Last Edit: Apr 30, 2014 23:23:03 GMT -8 by Risa

"Imitation is a form of flattery, but you lack my creativity and talent."

Risa
New Member

Posts: 31

Boxy (A Grid-Like Hover Table - Banner Alternative) Apr 30, 2014 23:08:23 GMT -8 Alanna 🥀🖤 and lodan like this

Quote

Post by Risa on Apr 30, 2014 23:08:23 GMT -8

BOXY FAQ LIST FOR SUPPORT AND CHANGES

If your Boxy table doesn't look like the one in the top graphics of the first post, you've done (maybe) one of three things in our little journey together.

1. You've opted not to set your width at 75%.
2. You've opted not to use the Oswald font, in which case some text is just default to 'sans-serif'.
3. You messed up copying and pasting somewhere along the lines and need to backtrack.

With, number 3. You know what to do. Go through your Stylesheet or Forum Wrapper template and see if you missed anything. If you can't find anything, reply to this thread and tag me. I'll be happy to help you.

For number 1, you can go through the Stylesheet and set your box widths to larger numbers to fill your gap on the right.

Example...

.box7 {
opacity: 1;
width: 260px; <- change to a larger number.

.hover7 {
width: 260px; <- change to a larger number.

But this is a table so if you make box 7 bigger, make sure you make box 4, which is on top of it, the same width or you'll have a gap.

.box4 {
opacity: 1;
width: 260px; <- change to a larger number.

.hover4 {
width: 260px; <- change to a larger number.

For number 2, you've opted not to use the google font 'Oswald'. You can use any Google font you want and after you've picked one and inserted it into the FORUM WRAPPER template (same place you would've put Oswald), make changes to the css stylesheet. '.toph1' , '.toph2' and 'box5links' are the only parts of the css that use Oswald. The font inside the boxes is Arial which is rather general but feel free to change that in a similar way

.toph1{
font-family: 'Oswald', sans-serif; <- change to the google supplied font-family code.
font-size: 18px; 
text-transform: uppercase;
padding: 5px 0 10px 0;
text-align: center;
background: transparent;
color: #ededed;
}

.toph2{
font-family: 'Oswald', sans-serif; <- change to the google supplied font-family code.
font-size: 14px; 
text-transform: uppercase;
padding: 0 0 15px 0;
text-align: center;
background: transparent;
color: #ededed;
}

.box5links a, .box5links a:visited, .box5links a:active{
color : #A8D0CA;
padding : 4px;
margin: 2px;
float: left;
width : 39.3%;
display: block;
text-align : center;
font-family: 'Oswald', sans-serif; <- change to the google supplied font-family code.
font-size : 12px;
font-style : normal;
font-weight : 400;
text-transform: uppercase;
}

The font inside the boxes is Arial which is rather general but feel free to change that in a similar way

.insidetallbox{
padding: 10px;
text-align: justify; 
font-size: 10px; 
font-family: arial, sans-serif; <- change to the google supplied font-family code.
color:#F5F5F5;
overflow: auto; 
height: 275px;    
}

.insidebox{
padding: 10px;
text-align: justify; 
font-size: 10px; 
font-family: arial, sans-serif; <- change to the google supplied font-family code.
color:#F5F5F5;
overflow: auto; 
height: 103px;    
}

Moving on to other related css concerns.

How to change the default pictures.

Find the box number in the CSS that you'd like to change and edit it.

.box1 {
opacity: 1;
width: 245px;
height: 324px;
background-image: url('INSERT YOUR OWN URL HERE. MAKE SURE THE WIDTH AND HEIGHT MATCH THE BOX'S WIDTH AND HEIGHT'); 
}

How to change the hover bg colors or or text colors.

Find the box you want to change the hover colors of and edit it.

.hover1 {
width: 245px;
height: 324px;
background-color: #54544C; <- the blackish-gray color in the background when you hover.
color: #EDEDED; <- the white-ish text color.
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}

How to change the hover speed.

Make sure it's set to the same speed for all or people will see something different in other browsers.

.hover1 {
width: 245px;
height: 324px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s; <- 0.1s - 10s +  0.1s is the fastest. 10s is slow.
-moz-transition-duration: 1s; <- same as above 
-webkit-transition-duration: 1s; <- same as above
}

So, that's all I can think of for basic editing. Any further questions or problems, remember to tag me in your reply.

"Imitation is a form of flattery, but you lack my creativity and talent."

amychelsjen
New Member

Posts: 7

Boxy (A Grid-Like Hover Table - Banner Alternative) Jun 30, 2014 7:32:56 GMT -8

Quote

Post by amychelsjen on Jun 30, 2014 7:32:56 GMT -8

Risa I really like this table, but I do have a slight problem. I'm using it on this site aph-worldpowers.proboards.com/ and even though I changed the forum width to 75%, there's still an awkward gap at the side. Tried adjusting the sizes of the boxes, but that stretched the forum awkwardly and just didn't look right. Is there a way to add an eighth box, like box one for example, at the other end of the banner?

Risa
New Member

Posts: 31

Boxy (A Grid-Like Hover Table - Banner Alternative) Jul 1, 2014 19:31:18 GMT -8

Quote

Post by Risa on Jul 1, 2014 19:31:18 GMT -8

Well, about your forum, your boards are at 75% but the banner area doesn't look like it is to me. It's actually 100% (filling my screen.) But, if you like that, in theory, this should work, amychelsjen. So, let's see...

INSERT THIS....

<td style="padding: 2px;">
<div class="box8">
<div class="hover8">
<!-- START EDIT BOX EIGHT HERE -->
<div class="toph1">BOX EIGHT</div>
<div class="insidebox8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- STOP EDIT BOX EIGHT HERE -->
</div>
</div>
</td>

INTO THE TABLE CODE WHERE I'VE INDICATED BELOW. YOU'LL HAVE TO DO SOME LOOKING AT THE BOTTOM OF THE CODE.

<!-- STOP EDIT BOX SIX HERE -->
</div>
</td>
<td style="padding: 2px;">
<div class="box7">
<div class="hover7">
<!-- START EDIT BOX SEVEN HERE -->
<div class="toph1">BOX SEVEN</div>
<div class="insidebox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- STOP EDIT BOX SEVEN HERE -->
</div>
</div>
</td>
</tr>
</table>
</td>
((((<---- PUT IT RIGHT IN THIS AREA OF THE CODE RIGHT HERE ---->))))
</tr>
</table>
<!-- END BOXY BY RISA OF PB SUPPORT -->

GIVE THE BOX SOME CSS, LIKE SO.

.box8 {
opacity: 1;
width: 245px;
height: 324px;
background-image: url('http://placehold.it/245x324/D58D7C/F5F5F5/');
}
.hover8 {
width: 245px;
height: 324px;
background-color: #54544C;
color: #EDEDED;
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.hover8:hover {
opacity: 1;
} 

.insidebox8{
padding: 10px;
text-align: justify;
font-size: 10px;
font-family: arial, sans-serif;
color:#F5F5F5;
overflow: auto;
height: 275px;
}

And that should wrap it up nicely. If you still have anymore problems, let me know. I'll try to get to it faster. 8)

Last Edit: Jul 1, 2014 19:32:42 GMT -8 by Risa

"Imitation is a form of flattery, but you lack my creativity and talent."

amychelsjen New Member Posts: 7 amychelsjen inherit Female 210214 0 Oct 3, 2014 9:23:59 GMT -8 amychelsjen 7 New Member June 2014 amychelsjen	Boxy (A Grid-Like Hover Table - Banner Alternative) Jul 2, 2014 9:38:09 GMT -8 Chris likes this Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by amychelsjen on Jul 2, 2014 9:38:09 GMT -8 Thank you so much!! It's great and has worked really well! c:
	Last Edit: Jul 2, 2014 9:38:33 GMT -8 by amychelsjen

Risa New Member Posts: 31 Risa inherit Female 191532 risabesu 0 Sept 17, 2021 13:00:44 GMT -8 Risa 31 New Member March 2013 Twitter eriza	Boxy (A Grid-Like Hover Table - Banner Alternative) Jul 2, 2014 19:39:50 GMT -8 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Risa on Jul 2, 2014 19:39:50 GMT -8 You're very welcome!
	"Imitation is a form of flattery, but you lack my creativity and talent."

Fox.
New Member

Shocking, isn't it?

Posts: 124

Boxy (A Grid-Like Hover Table - Banner Alternative) Aug 31, 2014 17:57:29 GMT -8

Quote

Post by Fox. on Aug 31, 2014 17:57:29 GMT -8

This is probably something simple I missed, but gotta ask since no one else on the site is coding inclined lol I was going through and trying this out on the test site (http://jabberjaytester.proboards.com/) before I went and somehow screwed up one of the good templates. I think I missed something in the CSS... Not sure honestly, but I'm pretty sure it's probably something rather simple I skipped over on accident since its getting late where I am.

Thanks in advance, Risa

Amateur Coder

Risa
New Member

Posts: 31

Boxy (A Grid-Like Hover Table - Banner Alternative) Aug 31, 2014 21:43:23 GMT -8

Quote

Post by Risa on Aug 31, 2014 21:43:23 GMT -8

If you've added the css already, just check to see if everything's closed properly, Fox.. It could be a missing } or ; in the css to throw it off. Also, check to see if you added it to the right stylesheet. I can count on my hands and feet how many times I've made that mistake. If there's nothing missing as far as punctuation and the stylesheet is correct, paste your style code here and I'll take a looksie at it. 8)

~~also, Luxray is my favorite pokemon.~~

Last Edit: Aug 31, 2014 21:44:39 GMT -8 by Risa

"Imitation is a form of flattery, but you lack my creativity and talent."

Boy_Wonder v6 Beta Tester Peabrained Codebreaker Posts: 6,249 Boy_Wonder inherit Peabrained Codebreaker v6 Beta Tester 107114 0 Mar 11, 2020 7:47:27 GMT -8 Boy_Wonder 6,249 Veteran July 2007 natzy24	Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 0:40:51 GMT -8 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Boy_Wonder on Sept 1, 2014 0:40:51 GMT -8 Hey Risa I want to just check a) is it okay I made a few tweaks to make this suit the rp I'm working on b) is my credit okay: beechriver.boards.net/
	Chill out with me - daily streams! DSBoyWonder25 Or come hang at The Robins Nest Discord - The Robins Nest

Fox. New Member Shocking, isn't it? Posts: 124 Fox. inherit 175033 0 Oct 4, 2019 5:57:53 GMT -8 Fox. Shocking, isn't it? 124 New Member December 2011 isagracien	Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 7:47:02 GMT -8 via mobile Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Fox. on Sept 1, 2014 7:47:02 GMT -8 I didn't make any changes to your code though (yet). I just went and copy pasted.
	Amateur Coder

Risa
New Member

Posts: 31

Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 13:13:06 GMT -8

Quote

Post by Risa on Sept 1, 2014 13:13:06 GMT -8

Boy_Wonder oh yeah. use it however you want and that credit is perfect! looks fabulous, btw.

Fox. really? then, yeah that's very very weird, because I don't see the css code at all in the source code. I could always make an account and take a look inside if you feel comfortable with that.

"Imitation is a form of flattery, but you lack my creativity and talent."

Alanna 🥀🖤
v6 Beta Tester

Posts: 3,564

Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 14:19:34 GMT -8 Risa likes this

Quote

Post by Alanna 🥀🖤 on Sept 1, 2014 14:19:34 GMT -8

Sept 1, 2014 7:47:02 GMT -8 Fox. said:

I didn't make any changes to your code though (yet). I just went and copy pasted.

If you copied and pasted everything she provided into the Forum Wrapper- the CSS is invalid. It needs to be surrounded by <style></style> tags within a Layout Template.

Last Edit: Sept 1, 2014 19:10:07 GMT -8 by Alanna 🥀🖤

Boy_Wonder
v6 Beta Tester

Peabrained Codebreaker

Posts: 6,249

Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 20:32:23 GMT -8

Quote

Post by Boy_Wonder on Sept 1, 2014 20:32:23 GMT -8

Sept 1, 2014 14:19:34 GMT -8 @khristian said:

Sept 1, 2014 7:47:02 GMT -8 Fox. said:

I didn't make any changes to your code though (yet). I just went and copy pasted.

If you copied and pasted everything she provided into the Forum Wrapper- the CSS is invalid. It needs to be surrounded by <style></style> tags within a Layout Template.

Not QUITE correct Trin. I pasted it into the end of the advanced css stylesheet and it works fine

Chill out with me - daily streams!

DSBoyWonder25

Or come hang at The Robins Nest Discord -

The Robins Nest

Alanna 🥀🖤 v6 Beta Tester Posts: 3,564 Alanna 🥀🖤 inherit Female v6 Beta Tester 133146 0 Nov 16, 2024 15:51:08 GMT -8 Alanna 🥀🖤 3,564 *Pro* Member November 2008 alannab	Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 21:05:26 GMT -8 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Alanna 🥀🖤 on Sept 1, 2014 21:05:26 GMT -8 Note I said Forum Wrapper- not Style Sheet.
	Last Edit: Sept 1, 2014 21:07:11 GMT -8 by Alanna 🥀🖤

Boy_Wonder
v6 Beta Tester

Peabrained Codebreaker

Posts: 6,249

Boxy (A Grid-Like Hover Table - Banner Alternative) Sept 1, 2014 21:08:09 GMT -8

Quote

Post by Boy_Wonder on Sept 1, 2014 21:08:09 GMT -8

Sept 1, 2014 21:05:26 GMT -8 @khristian said:

Note I said Forum Wrapper- not Style Sheet.

And if you read the instructions which people -should- be following:

Step Four
Your banner area probably looks like a hot mess right now. It's understandable. Unless you're styling directly into the template, everything will. But, if you've done everything right so far, it'll look like this. visual aid

Since we can't have your forum looking like that, we need to go into the ADVANCED STYLE & CSS portion of this tutorial. I'll do my best to explain things and more visual aids. You want to navigate to your stylesheet which would be...

THEMES > ADVANCED STYLES & CSS > STYLESHEET (Make sure that tab is selected)

Now that you're at the stylesheet, you'll see more code. Stuff that looks pretty daunting if you're just starting your journey. Anyway, scroll in the code window all the way to the bottom. You get there? Good? On a fresh theme, the last thing you'll see styling code for tablets and phones, just in case you're not sure. visual aid

Chill out with me - daily streams!

DSBoyWonder25

Or come hang at The Robins Nest Discord -

The Robins Nest

Boxy (A Grid-Like Hover Table - Banner Alternative)

Post by Risa on Apr 30, 2014 22:42:54 GMT -8

Post by Risa on Apr 30, 2014 23:08:23 GMT -8

Post by amychelsjen on Jun 30, 2014 7:32:56 GMT -8

Post by Risa on Jul 1, 2014 19:31:18 GMT -8

Post by amychelsjen on Jul 2, 2014 9:38:09 GMT -8

Post by Risa on Jul 2, 2014 19:39:50 GMT -8

Post by Fox. on Aug 31, 2014 17:57:29 GMT -8

Post by Risa on Aug 31, 2014 21:43:23 GMT -8

Post by Boy_Wonder on Sept 1, 2014 0:40:51 GMT -8

Post by Fox. on Sept 1, 2014 7:47:02 GMT -8

Post by Risa on Sept 1, 2014 13:13:06 GMT -8

Post by Alanna 🥀🖤 on Sept 1, 2014 14:19:34 GMT -8

Post by Boy_Wonder on Sept 1, 2014 20:32:23 GMT -8

Post by Alanna 🥀🖤 on Sept 1, 2014 21:05:26 GMT -8

Post by Boy_Wonder on Sept 1, 2014 21:08:09 GMT -8