"Pretty 'N' Pinkie Pie" Template

[Tiffy-Bean]

If for whatever reason you don't like this theme or are confused and want to down rate it in the themes library, give me a reason so I know what to improve on! Thanks!

Theme Library Link

When I set out to make this theme, I wanted to make something that has some bells and whistles but is still easy to use. It's a hodgepodge of different ideas, and I've used some remodels by some of the support forum members (credit all in place on this theme for each and every one of them).

Admin > Members > Custom Profile Fields

Match this image:

Cover Image and Hover Image need to be set under the options to: URL (plain text)

Show Cover Image needs only one option. The option should be Yes.

Remember to Save.

The Cover Image was designed by Leif and the mini-profile design was done by Trinity Blair, so thank you for sharing your knowledge with us on the support forum.

Now that the easy part is out of the way, let's move on to the more complicated.

Admin > Themes > Layout Template > Forum Wrapper

This is where you can edit information for the side bar between line 83 and line 182 (obviously this will become further down the more information you add.

Under the Staff tab I've included a hover over to contact staff. The first one is already set up to link to the default admin profile (profile #1) but you can change these out. This should be located at line #128 if you haven't made any alterations yet. If you already have, look for this line of code:

<div style="width:100px; height:100px; background-image:URL(http://rosupport.com/demo2/assets/images/gotm.jpg); float:right;margin-left:3px; margin-right:4px;"><div id="brooklyn2"><div id="brooklyn3"><center>Contact Admin by <a href="http://tiffystestforum.freeforums.net/conversation/new/1">Board Email</a>

Then let's deal with the Boxy layout by Risa:

Go to Admin > Themes > Advanced Styles & CSS

Line 1648: switch out the placeholder for a 245x324 image.

Line 1668: switch out placeholder for a 260x160 image.

You get the idea.
Do it on line 1688, 1708, 1728, 1753



Now go to:

Admin > Themes > Layout Template > Home

This is where you edit the inside information of the boxes at the top of the forum.

Thank you to everyone who have shared their knowledge on sections of this template, and I hope everyone enjoys what I've done with this.  If you need forum support these are the rules:

• ALL credit must be in tact, not just to me but to Risa, Trinity, and Leif.
• Include a Link to your forum in order for me to help you.
• Be patient.  I'm still learning myself when it comes to coding, and making this layout has been a lot of trial and error, so I may not have a solution for you immediately, but I will do the best I can to find one for you.

[Tumbleweed]

Tiffy-Bean

Is this meant to be in themes or did you customize a specific layout that is unique. Since you submitted no preview, not sure if this is in the right place.

[Tiffy-Bean]

It is supposed to be themes. I was having a special day. lol

[Tumbleweed]

Aug 24, 2015 7:33:18 GMT -8 Tiffy-Bean said:

It is supposed to be themes. I was having a special day. lol

I'll move it. We all have those, oh very special days.

[Former Member]

I would love to see the rest of this.

[Tiffy-Bean]

Now up in the theme library.

[Former Member]

I can't get the shoutbox from covering up the reply column here:
thepurposeoflife.freeforums.net/

[STLUEE]

I have it up and running and love it!  How do I remove the 200x300 I guess its part of a mini profile or avatar?

[Tiffy-Bean]

Aug 11, 2016 17:23:02 GMT -8 STLUEE said:

I have it up and running and love it!  How do I remove the 200x300 I guess its part of a mini profile or avatar?

Do you mean the placeholder?  You can change this by going to Layout Templates > Mini-Profile.  If you haven't made any mini-profile mods, it should be on line 5.  Replace http://placehold.it/200x300 with whatever image you like.  Keep in mind, that this will be the default image people first see in the template before they change it themselves in their edit profile.

If you need further assistance, just ask.

[STLUEE]

I got most of it figured. Instead of pictures on the hovers, How would I just put words?Hover, then under neath it would show information. Thank you.

[Tiffy-Bean]

Sept 2, 2016 13:38:41 GMT -8 STLUEE said:

I got most of it figured. Instead of pictures on the hovers, How would I just put words?Hover, then under neath it would show information. Thank you.

Well, do you want words with a background that you can't see through until you hover? Just making sure I understand you before I give you a solution.

[STLUEE]

Words instead of placing a picture where it says 260x160- Its to hard resizing and finding pictures to place there.

[Tiffy-Bean]

Sept 4, 2016 19:07:51 GMT -8 STLUEE said:

Words instead of placing a picture where it says 260x160- Its to hard resizing and finding pictures to place there.

The problem is..it'd be a rewrite completely of the code to do this.  I can do this for you but it'll be a few days for me to be able to get it done since I just had oral surgery and am in recovery.  Essentially, instead of having a background link for the image (that is what's going on right now), we'd have to rewrite it so it's text instead with the hover still working it'll be set up slightly differently.  So, if you're willing to be patient, I can do this for you when I feel less drugged. <3

[STLUEE]

I can wait and thank you. Take your time. Speedy healing

[Tiffy-Bean]

Sept 5, 2016 17:24:18 GMT -8 STLUEE said:

I can wait and thank you. Take your time. Speedy healing

I may have some time to look at this now but I want to be 100% clear what I'm doing first.  Would you rather just get rid of the hover entirely and have just the hover over below text visible all the time, or would you rather have words on top and fade into what you can see underneath?

If you just want to get rid of the hover function with no words over it this would be the code you use.  Replace everything from .toph1 all the way down to the matching box5 hover code with the below under your CSS in your stylesheet.

.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-color: #54544C;

}



.box2 {

opacity: 1;

width: 260px;

height: 160px;

background-color: #54544C

}



.box3 {

opacity: 1;

width: 220px;

height: 160px;

background-color: #54544C;

}



.box4 {

opacity: 1;

width: 260px;

height: 160px;

background-color: #54544C;

}



.box5 {

opacity: 1;

width: 260px;

height: 160px;

background-color: #54544C;

}



.box6 {

background-color: #54544C;

height: 160px;

}



.box7 {

opacity: 1;

width: 260px;

height: 160px;

background-color: #54544C;

}





.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;

}