Zaokraglona belka kategorii

[DawPi]

Witam,

przedstawiam bardzo dobry artykuł napisany przez znakomitego skiniarz IP.Board - Ehrena, napisany w marcu 2006 roku, więc już ponad dwa lata temu

Nie tłumaczyłem bo opis wydaje mi się jasny, jeśli jednak coś będzie nie jasne proszę pisać, ja lub ktoś inny na pewno odpowie.

***********START TUTORIALA********************

This tutorial will teach you how to make rounded category headers for the Default IPB skin, as shown below.

To begin, log into your Admin Cpanel, select Look & Feel and select Edit Stylesheet (CSS Advanced Mode) from the drop down next to your skin.

We firstly need to make our rounded images. Open up any graphics program, such as Adobe Photoshop, and create your left and right category images. Name them cat_left.gif and cat_right.gif. The two round images I will be using can be seen below. I have also included the tile_cat.gif image.

IP. Pro

Default Skin

Save them, and upload to your style_images folder.

Now it's time to make the coding for these images. In the stylesheet, add the following code (it MUST go after .borderwrap p in the stylesheet, and preferably above .popmenubutton:

/* 3 Image header code by [url="http://www.ipbforumskins.com"]http://www.ipbforumskins.com[/url] */

.left{
padding:0;
margin:0;
background: url(<#IMG_DIR#>/cat_left.gif) 0 0 no-repeat;
height:31px;
}
.right{
padding:0;
margin:0;
background: url(<#IMG_DIR#>/cat_right.gif) 100% 0 no-repeat;
height:31px;
}
/* Main title text class */
.main_text{
color: #FFF;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding:8px;
background:transparent;
border:0;
}

.maintitle_3{
background: url(<#IMG_DIR#>/tile_cat.gif);
color: #FFF;
font-size: 12px;
font-weight: bold;
margin: 0px;
}
.maintitle_3 p.expand,
.maintitle_3 p.goto{
float: right;
width: auto !important;
}
.maintitle_3 a:link,
.maintitle_3 a:visited{
background: transparent;
color: #FFF;
text-decoration: none;
}

.maintitle_3 a:hover,
.maintitle_3 a:active{
background: transparent;
color: #F1F1F1;
}
.maintitle_3 p{
margin:0;
padding:0;
background:transparent;
border:0;
}
.maintitle_3 td {
color: #FFF;
font-size: 12px;
font-weight: bold;
}

Quick Overview

The left and right classes create the div's which store the background images. The no-repeat and the (0 0) and (100% 0) position the images so they are located at the top left and top right of the maintitle.

The main_text class adds padding to the above div's, while styling the text to look like the original default text.

The other classes are just duplicates of the original .maintitle class, but must be included for the new styles to work correctly.

Press Save Stylesheet. You will be redirected to the Skin Management page. Select your skin, but this time choose Edit Template HTML

In the menu, select Board Index and then choose CatHeader_Expanded.

Replace that code with the following code: FOR IPB 2.1.x

<div class="borderwrap" style="border:0;display:{$data['div_fc']}" id="fc_{$data['id']}">
		 <div class="maintitle_3">
	 <div class="left"><div class="right"><div class='main_text'>
			 <p class="expand"><a href="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>
			 <p><{CAT_IMG}>

[KoverPL]

Hey, moj skin byl standardowo zakodowany z zaokraglonymi belkami, problem w tym ze jak zainstalowalem IP.Shoutbox to shoutbox nie ma juz zaokraglonej belki, co zrobic ?

Napisalem w odzielnym temacie:

http://forum.invisionize.pl/index.php?app=forums&module=forums&section=findpost&pid=27933

[DawPi]

Odpowiedziałem: