We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Complete Forum View - Invisionfree Skinning; Cells & Wrapmini
Topic Started: Jul 25 2011, 05:53 AM (1,998 Views)
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]

Posted Image

Anyone interesting in learning how to skin InvisionFree skins?
In this topic, just post questions up and share tips/tricks about skinning.
At the end of week we will try to complete bits and pieces of your first or even hundredth skin!
So join in on the fun!


Index Page
SectionPost
HeaderPost #12, Post #28
MaintitlePost #29
CellsPost #33


Forum View
SectionPost
CellsPost #2
WrapminiPost #2



Completed Guides:
Offline Profile Quote Post Goto Top
 
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
Posted Image
Taken from http://docs.zetaboards.com/. Credits to Nicola.


Since you have already completed the Index Page in the first documentation listed above (first post).
We only need to do a few things here.

Just complete the wrapmini and the darkrows.



Darkrow1

Now the Important Topics and Topic Forums are controlled by the .darkrow1 class.
Code:
 
.darkrow1 { background-color: #C2CFDF; color:#4C77B6; }


Change the color and background-color to something else such as this.

Code:
 
.darkrow1 { background: #HEX url(BACKGROUND IMAGE) top repeat-x; padding: #px; color:#HEX; }


You can be more specific as well if you don't want to change the darkrow1 in other places such as the topic view.
To do this you can use this:
Code:
 
td.darkrow1 { background: #HEX url() top repeat-x; }


You can also change the text Important Topics and Topic Forums with this:
Code:
 
td.darkrow1 b { color: #HEX; font-weight: bold; font-family: Arial; }



Darkrow2
Same as the .darkrow1 we can manipulate the CSS:
Code:
 
.darkrow2 { background: #HEX url(BACKGROUND IMAGE) top repeat-x; padding: #px; color:#HEX; }

To change it specifically we would use this:
Code:
 
div.darkrow2 { background: #HEX url(BACKGROUND IMAGE) top repeat-x; padding: #px; color:#HEX; }



Row2
To turn on the Users Browsing this forum you can go to Admin CP > System Settings > General Configuration > Remove 'Users Browsing this forum' feature? > No

This is controlled by the row2
Code:
 
.row2 { background-color: #DFE6EF }


However you can be more specific and change it with this:
Code:
 
div.row2 { CSS }



Wrapmini
The wrapmini is the topic image legend under the forum view.
Code:
 
.wrapmini { float:left;line-height:1.5em;width:25% }


This can be styled by adding display: block to your CSS.

Code:
 
.wrapmini { float:left;line-height:1.5em;width:25%; display: block; }


You can also play around with the CSS:
Code:
 
.wrapmini { float:left;line-height:1.5em;width:25%; display: block; border: 1px solid #HEX; background: #HEX url() top repeat-x; margin: 0px 10px; padding: 10px; }


An example of this would be this:
Posted Image
Taken from REfresh IF Conversion

Code:
 
.wrapmini {
float:left;
line-height:1.5em;width:25%;
display: block;
margin: 4px;
padding: 4px;
background:url(http://z3.ifrm.com/28102/94/0/p326828/light_cell.png) no-repeat #b6cade;
color: #5c7289;
border: 1px solid #96adc4;
}

Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
For those interested:
Quote:
 

  • span.small - Topics Pagination on Forum Page
  • form[action*="SF&f"] - Forum Area Where Topics Display
Taken from this guide.
Offline Profile Quote Post Goto Top
 
Artur Araripe
Member
[ * ]
Great TUTO! Help me a lot =D
Thanks =D
Offline Profile Quote Post Goto Top
 
2 users reading this topic (2 Guests and 0 Anonymous)
« Previous Topic · Skin Tips · Next Topic »
Add Reply