سلام،
دو تا کاری که می خوای بکنی از طریق css عملیه، این آموزش رو اول ببین در ویکی جوملای انگلیسی مشکلت حل می شه:
پیشنهاد می کنم یه نمونه منو نصب کنی و از روی cssش الگو برداری کنی، بستگی به نحوه نوشتن منوت داره، باید برای حالت hover و (active یا current) منوت پس زمین بزاری،
و برای اضافه کردن نمایش علامت در منوهای فعال این آموزش رو ببین خیلی خوب توضیح داده:
مثلا css کد منوش که با فایرباگم می تونی ببینی به این صورت:
img {
border: medium none !important;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
color: #333333;
font: 100% Geneva,Verdana,Trebuchet,sans-serif;
}
#header {
background: url("http://www.sperling.com/css/seasons/winter.jpg") no-repeat scroll left top #77AAFB;
height: 138px;
width: 100%;
}
#header p {
color: #FFFFFF;
font-family: "Lucida Grande","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
font-size: xx-large;
letter-spacing: -0.03em;
line-height: 1.2;
margin: 0;
padding-top: 20px;
text-align: center;
}
#page {
background-color: #FFFFFF;
margin: 0 auto;
max-width: 60em;
min-width: 48.5em;
width: 99%;
}
#container {
background-color: white;
color: #333333;
}
#wrapper {
float: left;
margin-left: -200px;
width: 100%;
}
#content {
background-image: url("/images/gifs/dotted_vertical.gif");
background-position: right center;
background-repeat: repeat-y;
margin-left: 200px;
}
#content p {
line-height: 1.4;
margin-left: 50px;
margin-right: 20px;
}
#content ul {
list-style: square outside none;
margin-left: 50px;
margin-right: 20px;
}
#content ol {
margin-left: 50px;
margin-right: 20px;
}
#content h1, #content h2, #content h3, #content h4 {
color: #5375B0;
line-height: 1.2;
margin-left: 40px;
padding-left: 45px;
text-align: left;
text-decoration: none;
}
#content h1, #content h3 {
background: url("../images/gifs/bird3.gif") no-repeat scroll left top transparent;
line-height: 2;
}
#content h1 {
font-size: large;
}
#content h2 {
font-size: medium;
margin-left: 0;
padding-left: 0;
}
#content h3 {
font-size: medium;
}
#content h4 {
font-size: medium;
padding-left: 10px;
}
#content h5 {
font-size: medium;
line-height: 1.2;
margin-left: 40px;
padding-left: 45px;
text-align: left;
text-decoration: none;
}
#sidebar {
float: left;
width: 180px;
}
#sidebar h3 {
color: #5375B0;
margin: 20px 10px 10px;
}
#footer {
clear: both;
color: #999999;
font-size: small;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 100%;
}
#footer_bottom {
border-top: 1px solid #77AAFB;
color: #999999;
}
strong {
font-size: medium;
font-style: normal;
font-weight: normal;
}
em {
color: #5375B0;
font-size: medium;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
strong {
font-size: medium;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
p {
color: #0D0D0D;
display: block;
font-size: medium;
font-style: normal;
line-height: 1.3;
}
.title {
font-family: "Lucida Grande","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
line-height: 1.3;
}
.r {
color: red;
}
.g {
color: green;
}
.b {
color: blue;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
blockquote {
background: url("http://sperling.com/images/gifs/quotes.gif") no-repeat scroll left top transparent;
margin-left: 100px;
margin-right: 100px;
}
blockquote p {
color: #666666;
font-style: italic;
line-height: 1.3;
}
.clear {
clear: both;
}
hr {
clear: both;
margin-left: 50px;
width: 200px;
}
.bluebox {
background-color: #DDEAFF;
border: 1px solid #77AAF7;
margin-left: 50px;
margin-right: 20px;
}
.bluebox p {
color: #0D0D0D;
font-size: small;
font-style: normal;
text-align: center;
text-decoration: none;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.bluebox img {
text-align: center;
}
.left p {
text-align: left;
}
.centerinline {
text-align: center;
}
.up {
position: relative;
top: -50px;
z-index: 1;
}
.upword {
color: blue;
font-size: large;
position: relative;
right: 220px;
top: 0;
z-index: 100;
}
.webtips li {
margin: 1em 1em 1em 0;
}
.tips {
left: -3em;
position: relative;
top: 0;
}
.list li {
margin: 1em;
}
.published {
background: url("../images/gifs/clip-bottom.png") no-repeat scroll right bottom transparent;
border-bottom: medium none;
display: inline;
float: left;
font-family: Arial,Helvetica,sans-serif;
margin: 2em;
text-align: center;
width: 2.2em;
}
.pub-month {
background: url("http://sperling.com/images/gifs/clip-top.png") repeat-x scroll center top transparent;
display: block;
float: left;
font-size: small;
margin: 0;
padding: 12px 0 0;
}
.pub-date {
display: block;
float: left;
font-size: large;
margin: 0;
padding: 0;
}
.address {
line-height: 1.3;
list-style: none outside none;
}
#article p {
font-size: 1em;
line-height: 1.35;
margin: 0 30px 40px 90px;
}
#article ul li {
list-style: square outside none;
margin: 0 80px 20px 70px;
}
#article ul li {
list-style: square outside none;
margin: 0 0 1em -1em;
}
#article h2 {
color: #5375B0;
font-size: large;
line-height: 1.2;
margin: 0 0 0 45px;
padding: 40px 0 20px;
text-align: left;
width: 11em;
}
#article h3 {
background: url("../images/gifs/bird3.gif") no-repeat scroll left top transparent;
color: #5375B0;
font-size: large;
height: 30px;
line-height: 1.1;
margin-left: 40px;
margin-right: 10px;
padding-left: 45px;
text-align: left;
text-transform: capitalize;
}
b {
font-weight: normal;
}
.floatR {
float: right;
margin-left: 1em;
margin-right: 4em;
}
.floatL {
float: left;
margin-left: 1em;
margin-right: 1em;
}
.floatleft {
float: left;
margin: 0 1em 1em 0;
}
.floatleft1 {
float: left;
margin-left: 5em;
margin-right: 5em;
}
.floatleft2 {
float: left;
margin: 0.5em 2em 2em 5em;
}
.floatright {
float: right;
margin-left: 1em;
margin-right: 1em;
}
.floatright img {
height: 12.5em;
width: 18.75em;
}
.clear {
clear: both;
margin-top: -1em;
}
textarea {
color: blue;
font-family: monaco,"Bitstream Vera Sans Mono","Courier New",courier,monospace;
font-size: small;
font-weight: normal;
margin-left: 50px;
margin-right: 20px;
padding-left: 2em;
position: relative;
text-align: left;
white-space: nowrap;
}
pre {
background: none repeat scroll 0 0 #EEEEEE;
border-color: #EEEEEE #DFDFDF #666666 #CCCCCC;
border-style: solid;
border-width: 2px 2px 1px;
color: #003399;
font-family: monaco,"Bitstream Vera Sans Mono","Courier New",courier,monospace;
font-size: small;
font-weight: normal;
line-height: 1.3;
margin: 1% 20px 1% 50px;
padding: 1% 2%;
text-align: left;
}
.zoom {
width: 20em;
}
#birdObject {
background-color: transparent;
background-image: url("http://sperling.com/js/bird_fly.gif");
background-repeat: no-repeat;
height: 50px;
left: -100px;
position: absolute;
width: 75px;
z-index: 100;
}
.large {
font-size: 1.3em;
text-decoration: none;
}
.that_image img {
border-color: #DFDFDF #CCCCCC #666666 #DFDFDF !important;
border-style: solid !important;
border-width: 1px 2px 1px 1px !important;
}
.tiny {
color: #0354C2;
font-size: 0.6em;
}
.hide {
display: none;
font-family: arial,helvetica,sans-serif;
font-size: 0.9em;
}
#hide {
display: none;
font-family: arial,helvetica,sans-serif;
font-size: 0.9em;
}
.simple {
border: medium none;
list-style: none outside none;
margin-left: 1em;
padding: 0;
}
#submit-search {
left: 0;
position: relative;
top: 7px;
}
#comment {
background-color: transparent;
font-family: arial,helvetica,sans-serif;
font-size: 1em;
margin-left: 2em;
text-align: left;
}
#comment .head {
color: #0354C2;
font-family: helvetica,geneva,arial,sans-serif;
font-size: 1.1em;
}
#comment td {
font-size: 0.9em;
}
#comment .note {
border-bottom: 1px solid silver;
margin-left: 2em;
margin-right: 2em;
padding: 4px;
}
#comment .name {
margin-left: -2em;
margin-top: 1em;
}
#comment .quote {
background-image: url("../images/gifs/quotes.gif");
background-position: 0 0;
background-repeat: no-repeat;
height: 35px;
margin-left: -2em;
margin-top: 1em;
width: 35px;
}
#comment .my-quote {
background-image: url("../images/gifs/quotes1.gif");
background-position: 0 0;
background-repeat: no-repeat;
height: 35px;
margin-left: -2em;
margin-top: 1em;
width: 35px;
}
#comment .my-text {
background-color: #ECFFE5;
color: blue;
font-size: 0.9em;
margin-left: 1em;
margin-top: -2.5em;
padding: 2px;
}
#comment .text {
font-size: 0.9em;
margin-left: 1em;
margin-top: -2.5em;
padding: 2px;
}
#comment .no-comment {
color: red;
font-size: 0.9em;
margin-left: 1em;
}
#comment .red {
color: red;
}
.input-comment {
margin: 0;
padding: 0;
}
.title-text {
color: blue;
font-size: 1em;
}
.navcontainer {
background-color: transparent;
border: medium none;
color: #00FF00;
margin: 0;
padding: 0;
width: 100%;
}
.navcontainer ul {
border: medium none;
list-style: none outside none;
margin: 0;
padding: 0;
}
.navcontainer li {
border-bottom: 1px solid #77AAFB;
margin: 0;
padding: 0;
}
.navcontainer li a {
background-color: transparent;
color: #0000FF;
display: block;
font-family: "Lucida Grande","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
padding-bottom: 0.2em;
padding-left: 2em;
padding-top: 0.2em;
text-align: left;
text-decoration: none;
}
.navcontainer li a:hover {
background-color: #77AAFB;
color: white;
}
* html {
height: 1%;
}
که در این دو خطش برای منوهای فعال علامتش رو تعریف کرده:
#menuh a.top_parent, #menuh a.top_parent:hover {
background-image: url("navdown_white.gif");
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover {
background-image: url("nav_white.gif");
background-position: right center;
background-repeat: no-repeat;
}
توضیحات زیرش رو هم بخون.
پارس جوم :: انجمن های تخصصی جوملا
پشتیبانی
