Google+
MyBB Romania - MyBB.ro › [RO] Resurse › Articole / soluții / tutoriale v
Tutorial creare meniu cu imagine la tema

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Modes
Tutorial creare meniu cu imagine la tema
georgian Offline
BuzauForum.info
Posts: 743
Threads: 81
Joined: Dec 2011
Reputation: 8
Puncte credit: 314.15 PV
#1
Wink  02-20-2013, 12:15 PM
Am observat pe forum dar si pe mess ca multi intrebau cum sa faca un meniu asemanator ca in poza de mai jos la o tema mybb.Nu este foarte greu de aceea am zis sa va ajut.

[Image: untitled_116.jpg]

Codul de mai jos il copiati in "tema voastra->header templates->header" il puneti deasupra liniei "<div id="container">"

PHP Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="featured">



		<div class="featured_links">


			<ul>
				<li id="rank"><a href="http://steamcommunity.com/groups/wtfcscom/"><span>SteamGroup</span><span class="desc">Join us on steam!</span></a></li>
				<li id="admin"><a href="http://www.facebook.com/WtfCsCommunity"><span>Facebook</span><span class="desc">Like us on Facebook</span></a></li>
				<li id="steam"><a href="http://www.wtfcs.com/forum/forumdisplay.php?fid=625"><span>TeamSpeak3</span><span class="desc">Come and chat with us!</span></a></li>
				<li id="facebook"><a href="http://www.wtfcs.com/forum/donate.php"><span>Cont Vip</span><span class="desc">Click pentru detalii</span></a></li>
				<li id="parteneriat"><a href="http://www.wtfcs.com/forum/forumdisplay.php?fid=10"><span>Cerere DNS</span><span class="desc">Cere DNS free</span></a></li>
			</ul>
		</div>
	</div>


Unde scrie de exemplu: <li id="rank"><a href="http://steamcommunity.com/groups/wtfcscom/"><span>SteamGroup</span><span class="desc">Join us on steam!</span></a></li> la http://steamcommunity.com/groups/wtfcscom trebuie sa puneti linkul unde vreti sa va duca cand dati click

Urmatorul cod il copiati in "tema voastra->global.css->Edit Stylesheet: Advanced Mode" puteti sa il puneti la sfarsit de tot

PHP Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
.featured {
	background: #151515;
	border-bottom: 1px solid #2D2D2D;
	border-top: 1px solid #050505;
	color: #fff;
	text-align: center;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	position: relative;
	box-shadow: 0 0 10px #000 inset;
}

.featured_links {
	height: 58px;
	text-shadow: 0 1px 0 #151518;
}

.featured_links span {
	display: block;
	padding-left: 60px;
}

.featured_links .desc {
	color: #999;
	font-size: 12px;
}

.featured_links ul {
	padding: 0;
}

.featured_links li {
	float: left;
	list-style: none;
}

.featured_links li a {
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	display: block;
	line-height: 21px;
	margin-left: -9px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.featured_links li:hover a {
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 4px #000000 inset;
	color: #fff;
	padding: 3px 17px 0 0;
}

.featured_links #rank {
	background: url(images/wtfcs.v2/steam.png) no-repeat;
	margin-left: 15px;
}

.featured_links #admin {
	background: url(images/wtfcs.v2/facebook.png) no-repeat;
	margin-left: 50px;
}

.featured_links #steam {
	background: url(images/wtfcs.v2/teamspeak.png) no-repeat;
	margin-left: 50px;
}

.featured_links #facebook {
	background: url(images/wtfcs.v2/vip.png) no-repeat;
	margin-left: 50px;
}

.featured_links #parteneriat {
	background: url(images/wtfcs.v2/dns.png) no-repeat;
	margin-left: 50px;
}


Unde scrie de exemplu: background: url(images/wtfcs.v2/dns.png) no-repeat; la "images/wtfcs.v2/dns.png" , aici trebuie sa puneti legatura catre imaginea care vreti sa va apara la fiecare categorie.

Daca aveti nelamuriri puteti posta aici. In curand o sa revin cu un alt tutorial pentru alt fel de meniu, ceva asemanator dar mai simplu


Daca este util acest tutorial as vrea sa fie mutat la " Articole / soluții / tutoriale' mersi

[Image: logo1.png]
Website Find
Reply
Rake Offline
Retired
Posts: 249
Threads: 21
Joined: May 2011
Reputation: 3
Puncte credit: 123.3 PV
#2
02-25-2013, 09:46 PM
Man salut, eu unul nu vad acea imagine . . . daca poti incearca sa o urci cu alt link sau nu stiu dar nu se vede . . . numai bine.
Alexandru Stan Photography
Like us on facebook
Find
Reply
georgian Offline
BuzauForum.info
Posts: 743
Threads: 81
Joined: Dec 2011
Reputation: 8
Puncte credit: 314.15 PV
#3
03-09-2013, 02:04 PM
poti vedea demo aici http://www.wtfcs.com/forum , ceea ce este sub meniu
[Image: logo1.png]
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)